- 浏览: 45549 次
- 性别:
- 来自: 北京
文章分类
最新评论
javascript继承
- 博客分类:
- javascript
类继承
类型1:extend
function extend(subClass, superClass) { var F = function() { }; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass; }
类型2:extendOther
function extendOther(subClass, superClass) { subClass.prototype = new superClass(); subClass.prototype.constructor = subClass; }
举例:extend
function SuperType() { this.property = true; this.property1 = true; this.property2 = true; this.property3 = true; this.property4 = true; this.property5 = true; this.property6 = true; this.property7 = true; this.property8 = true; /*SuperType.prototype.getSuperV = function() { return this.property; }*/ } SuperType.prototype.getSuperV1 = function() { return this.property; } function SubType() { this.subproperty = false; } SubType.prototype.getSubV = function() { return this.subproperty; } SubType.prototype.getSuperV = function() { return this.subproperty; } extend(SubType, SuperType); //extendOther(SubType, SuperType); var ins = new SubType();
改写为:extendOther
function SuperType() { this.property = true; this.property1 = true; this.property2 = true; this.property3 = true; this.property4 = true; this.property5 = true; this.property6 = true; this.property7 = true; this.property8 = true; /*SuperType.prototype.getSuperV = function() { return this.property; }*/ } SuperType.prototype.getSuperV1 = function() { return this.property; } function SubType() { this.subproperty = false; } SubType.prototype.getSubV = function() { return this.subproperty; } SubType.prototype.getSuperV = function() { return this.subproperty; } //extend(SubType, SuperType); extendOther(SubType, SuperType); var ins = new SubType();
结果对比:
去掉如下代码的注释:
SuperType.prototype.getSuperV = function() { return this.property; }
extend继承较extendOther继承改进之处:
它添加了一个空函数F,并将用它创建的一个对象实例插入原型链中。这样做可以避免创建超类的新实例,因为它可能会比较庞大,而且有时超累的构造函数有一些副作用,或者会执行一些需要进行大量计算的任务。
如果想在子类中直接调用超类中的方法,可以作如下改进:
//子类可以访问父类的方法 subClass.superclass = superClass.prototype; if(superClass.prototype.constructor == Object.prototype.constructor) { superClass.prototype.constructor = superClass; }
实例1:用extend的场合:
function extend(subClass, superClass) { var F = function() { }; F.prototype = superClass.prototype; subClass.prototype = new F(); subClass.prototype.constructor = subClass; //子类可以访问父类的方法 subClass.superclass = superClass.prototype; if(superClass.prototype.constructor == Object.prototype.constructor) { superClass.prototype.constructor = superClass; } } function SuperType() { this.property = true; this.property1 = true; this.property2 = true; this.property3 = true; this.property4 = true; this.property5 = true; this.property6 = true; this.property7 = true; this.property8 = true; SuperType.prototype.getSuperInner = function() { return "getSuperInner"; } } SuperType.prototype.getSuperV = function() { return this.property; } SuperType.prototype.getSuperV1 = function() { return this.property; } function SubType() { //用来将SuperType的实例property~property8实例化到SubType的实例中 SubType.superclass.constructor.call(this); this.subproperty = false; } extend(SubType, SuperType); SubType.prototype.getSubV = function() { return this.subproperty; } SubType.prototype.getSuperV = function() { return this.subproperty; } SubType.prototype.getName = function() { console.log("superType.property:"+SubType.superclass.getSuperV.call(this)); console.log("subType.property:"+SubType.prototype.getSuperV.call(this));//console.log("subType.property:"+this.getSuperV()); /*输出结果为: superType.property:true subType.property:false */ }; var ins = new SubType(); ins.getName();
实例2:用extendOther的场合
function extendOther(subClass, superClass) { subClass.prototype = new superClass(); subClass.prototype.constructor = subClass; //子类可以访问父类的方法 subClass.superclass = superClass.prototype; if(superClass.prototype.constructor == Object.prototype.constructor) { superClass.prototype.constructor = superClass; } } function SuperType() { this.property = true; this.property1 = true; this.property2 = true; this.property3 = true; this.property4 = true; this.property5 = true; this.property6 = true; this.property7 = true; this.property8 = true; SuperType.prototype.getSuperInner = function() { return "getSuperInner"; } } SuperType.prototype.getSuperV = function() { return this.property; } SuperType.prototype.getSuperV1 = function() { return this.property; } function SubType() { //用来将SuperType的实例property~property8实例化到SubType的实例中 //SubType.superclass.constructor.call(this); this.subproperty = false; } extendOther(SubType, SuperType); SubType.prototype.getSubV = function() { return this.subproperty; } SubType.prototype.getSuperV = function() { return this.subproperty; } SubType.prototype.getName = function() { console.log("superType.property:"+SubType.superclass.getSuperV.call(this)); console.log("subType.property:"+SubType.prototype.getSuperV.call(this));//console.log("subType.property:"+this.getSuperV()); /*输出结果为: superType.property:true subType.property:false */ }; var ins = new SubType(); ins.getName();
原型式继承
function clone(object) { function F() { }; F.prototype = object; return new F; } var SuperType = { property8 : ['a','b','c'], configure : function() { this.property = true; this.property1 = true; this.property2 = true; this.property3 = true; this.property4 = true; this.property5 = true; this.property6 = true; this.property7 = ['1','2','3']; }, getSuperInner : function() { console.log(this); console.log("this.property7:"+this.property7); console.log("this.property8:"+this.property8); return this.property; } } var subType = clone(SuperType); subType.configure(); subType.getSuperInner(); var subType1 = clone(SuperType); subType1.configure(); subType1.getSuperInner(); subType.property7.push('4'); subType.property8.push('dfef'); subType.getSuperInner(); subType1.getSuperInner();
运行结果
注意:
如果想设置property~property7的值需要调用configure方法。
property~property7属于F,即Clone后的对象
property8属于父对象。所以同时对property7和property8进行修改,输出结果的原理是不同的。
property8体现了原型式继承的优点:原型式继承更能节约内存。原型链读取成员的方式使所有克隆出来的对象共享每个属性和方法的唯一一份实例。只有在直接设置了某个克隆对象的属性和方法时,情况才会有所变化。详细内容请参考《javascript设计模式》第四章继承与封装
疑问:
《javascript设计模式》第四章继承与封装中提到:与原型式继承相比,在类式继承方式中创建的每一个对象在内存中都有自己的一套属性。可是从(类继承)的实例中,看到的意识共享属性啊,这是为什么呐?这句话有什么深切的含义???
发表评论
-
es6
2016-07-25 17:11 01.export default 不用关系模块输出了什么 ... -
immutable
2016-07-21 17:23 0作者:张克军链接:ht ... -
react
2016-07-08 16:02 0中文文档:http://reactjs.cn/react/ ... -
redux
2016-07-07 15:30 0redux例子counter总结: action:描述发 ... -
angular遇到的问题
2016-03-17 18:53 0Form Validation and fields add ... -
http2
2015-12-22 13:10 0http2资料: http://http2-explai ... -
iconfont的蜕化操作
2015-11-09 16:27 0转自:http://www.cnblogs. ... -
flux
2015-10-19 14:03 0转自:http://www.csdn.net/articl ... -
setTransform
2015-10-15 17:30 0转自:http://book.51cto.co ... -
遇到的问题
2014-12-19 14:37 0http://stackoverflow.com/questi ... -
node安装(windows)
2014-09-14 10:43 0Windows平台下的node.js安装 直接去node ... -
jQuery.Callbacks之demo
2014-08-30 10:56 0jQuery.Callbacks是jquery在1.7版本 ... -
使用proxy改变js上下文
2014-03-27 21:48 0<body> <div id=& ... -
num
2014-01-14 17:31 0$("input[type=text][imemo ... -
js插件模板
2014-01-05 12:36 0(function(){ function Guid ... -
jquery中的this
2013-06-26 21:42 0jQuery.fn.test2= function() ... -
SeaJS与RequireJS最大的区别
2013-06-21 08:43 0SeaJS与RequireJS最大的区别 转自:h ... -
快速排序
2013-06-16 17:35 0快速排序: 设要排序的数组是A[0]……A[N-1],首先 ... -
autocomplete/suggest
2013-06-07 15:05 0<!DOCTYPE html PUBLIC & ... -
typeof
2013-06-06 08:35 0console.log(typeof ([])) //obj ...
相关推荐
在JavaScript中继承是一个非常复杂的话题,比其他任何面向对象的语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字即可。与它们不同,在JavaScript中要想达到传承公用成员的目的,...
JavaScript继承的三种方法实例 继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承。 继承也是为了数据共享,js中的继承也是为了实现...
Javascript继承机制原理 可以参考下
JavaScript继承与多继承实例分析.docx
javascript继承之为什么要继承.docx
JavaScript继承机制研究.pdf
说好的讲解JavaScript继承,可是迟迟到现在讲解。废话不多说,直接进入正题。 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考《面向对象JS基础讲解,工厂模式、构造...
JavaScript继承机制探讨及其应用.pdf
Javascript继承[参考].pdf
详解Javascript继承的实现_.docx
javascript 继承派生等问题的资料,都是网上收集的,学会apply call 就懂js面向对象的原理了。
本文实例讲述了JavaScript继承与聚合。分享给大家供大家参考,具体如下: 一、继承 第一种方式:类与被继承类直接耦合度高 1. 首先,准备一个可以被继承的类(父类),例如 //创建一个人员类 function Person(name)...
javascript继承问题,不知道写的可不可以,就勉强看看呗
JavaScript面向对象编程中使用继承,详细讲解四种实现方法的原理。
正因为JavaScript本身没有完整的类和继承的实现,并且我们也看到通过手工实现的方式存在很多问题, 因此对于这个富有挑战性的任务网上已经有很多实现了
NULL 博文链接:https://snandy.iteye.com/blog/429140
javascript毫无疑问是面向对象的,可日常使用中,怎么实现类,对象,继承这种高级语言特性呢.看完这个文档就很清楚啦,很不错的东西,适合有一丁点Javascript基础的童鞋
学完了Javascript类和对象的创建之后,现在总结一下Javascript继承机制的实现。Javascript并不像Java那样对继承机制有严格明确的定义,它的实现方式正如它的变量的使用方式那样也是十分宽松的,你可以设计自己的方法...
然而,继承中所涉及的不仅仅是一个对象,并且 js 也没有继承这一现有的机制,那它如何实现的呢? 原型 在 JavaScript 中,每个构造函数都拥有一个prototype属性,它指向构造函数的原型对象,这个原型对象中有一个 ...
深入学习javascript继承之前,先了解下面的几个概念: 父类:被继承的类 子类:由继承得来的类 超类:也就是父类 抽象类:一般不用来实例化的类,它的用途是用来给其他类继承. 基类:提供给其他类可以继承的类 派生类:由基类...