标签：

一．继承的原理？

1.原型链继承，原型？

每个构造函数都有一个原型对象，即prototype，原型对象都包含一个指向构造函数的指针，即constructor,而实例都包含一个指向原型对象的内部指针__proto__（火狐浏览器支持测试）

function  Func () {

}

Func.prototype instanceof Object //true

Func.prototype.constructor == Func //true

var  func = new Func();

func.__prop__ == Func.proptype //true

原型链继承:将父类的实例赋给子类的原型

function Super (){

this.property=‘super‘;

}

Super.prototype.getSuperValue = function (){

return this.property;

}

function Sub (){

this.subProperty=‘sub‘;

}

//继承了Super

Sub.prototype = new Super();

Sub.prototype.getSubValue = function () {

return this.subProperty;

}

var  instance = new Sub();

alert(instance.getSuperValue()); // super

//拥有了Super的方法,property属性则位于Sub的原型中,因为property是一个实例属//性,而getSuperValue是一个原型方法.

//此时Sub的原型中有一个指针指向Super的原型

Sub.prototype.__proto__ == Super.prototype //true

//实例有一个指针指向Sub的原型

instance.__proto__ == Sub.prototype//true

如此层层递进形成了一条原型链.

注意:instance.constructor现在指向Super,这是因为Sub的原型指向了另一个对象,

即Super的原型,而这个原型对象的constructor是指向Super的.

instance.constructor == Super //true

2.默认的继承

前面所说的继承链其实还少一环,所有引用类型默认都继承了Object.所以所有函数的原型都是Object的实例,并且而所有函数的constructor属性都是Function

Super.prototype instancof Object //true

Sub.prototype instanceof Object //true

Super.constructor == Function // true

Sub.constructor == Function //true

3.确定原型和实例的关系

第一种使用instanceof操作符,只要用这个操作符来测试 实例与原型链中出现过的构造函数,结果会返回 true

alert(instance instanceof Object);//true

alert(instanceinstanceof SuperType);//true

alert(instance instanceof Sub);//true

第二种方式是使用isPrototype()方法

alert(Object.prototype.isPropertyOf(instance));//true

alert(Super.prototype.isPrototypeOf(instance));//true

alert(Sub.prototype.isPrototypeOf(instance));//true

4.谨慎地定义方法

子类型有时候需要覆盖超类型中的某个方法,或者需要添加超类型中不存在的某个方法.但是不管怎样,给原型添加 方法的代码一定要放在替换原型的语句之后.

function Super() {

this.property = true;

}

Super.prototype.getSuperValue = function(){

return this.property;

}

function Sub(){

this.subProperty = ‘sub‘;

}

//继承了Super

Sub.prototype = new Super();

Sub.prototype.getSubValue = function(){

return this.subProperty;

}

//重写超类型原型中的方法

Sub.prototype.getSuperValue = function(){

return false;

}

var instance = new Sub();

alert(instance.getSuperValue());//false

注意:在通过原型链继承时,不能使用字面量创建原型方法,因为这样做会重写原型链.

function Super() {

this.property = true;

}

Super.prototype.getSuperValue = function(){

return this.property;

}

function Sub(){

this.subProperty = ‘sub‘;

}

//继承了Super

Sub.prototype = new Super();

//使用字面量添加方法,会导致上一行代码无效

Sub.prototype = {

getSubValue: function(){

},

someOtherMethod:function(){

}

};

var instance =new Sub();

alert(instance.getSuperValue()); //TypeError: instance.getSuperValue is not a function

由于现在的原型包含的是一个Object的实例,而非Super的实例,因此 我们设想中原型链已经被切断--------Sub和Super已经没有关系了.

5.原型链的问题

a. 构造函数中this定义的属性会使得每个实例都有独立的该属性,因此我们通过this关键字来定义实例变量,而原型中的属性的值会被所有实例共享,也就是通过实例去修改构造函数中原型的属性的值,会导致所有实例中该属性的值也被更改.

function Super(){

this.colors = [‘red‘];

}

function Sub(){

}

//继承

Sub.prototype = new Super();

var instance1 = new Sub();

instance.colors.push(‘black‘);

alert(instance.colors); // red,black

var instance2 = new Sub();

alert(instance.colors);//red,black

b.在创建子类型的实例时,不能向超类型的构造函数中传递参数.实际上应该是说没有办法在不影响所有实例的情况下,给超类型传递参数.因此,鉴于这些问题,实践中很少单独使用原型链.

6.借用构造函数

为了解决原型链继承的问题,开发人员使用了一种叫做借用构造函数的技术,思想就是在子类型的构造函数的内部调用超类型构造函数,因为函数只不过是在特定环境中执行代码的对象,因此可以通过apply()和call()方法也可以在(将来)新创建的对象上执行构造函数.

function Super(){

this.colors = [‘red‘];

}

function Sub(){

//继承

Super.call(this);

}

var instance1 =  new Sub();

instance1.colors.push(‘black‘);

alert(instance1.colors); // red,black

var instance2 = new Sub();

alert(instance2.colors);//red

a.传递参数

相对于原型链而言,借用构造函数有个很大的优势,即可以再子类型的构造函数中向超类型构造函数传递参数.

function Super(name){

this.name = name;

}

function Sub(){

//继承并传递参数

Super.call(this,‘sub‘);

this.age = 23;

}

var instance = new Sub();

alert(instance.name);//‘sub‘‘

alert(instance.age);//23

b.借用构造函数的问题,如果仅仅使用借用构造函数,也无法避免构造函数模式存在的问题-------方法都在够着函数中定义,因此复用无从谈起,,并且原型中定义的函数在子类中也是不可见的.

7.组合继承

组合继承也叫做伪经典继承,思路就是将原型链和借用构造函数结合,使用原型链实现对原型属性和方法的继承,而 通过构造函数来实现实例属性的继承.这样既通过原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性.

function Super(name){

this.name = name;

this.colors = [‘red‘];

}

Super.prototype.sayName = function(){

alert(this.name);

};

function Sub(name,age){

//继承属性

Super.call(this,name);

this.age = age;

}

//继承方法

Sub.prototype = new Super();

Sub.prototype.constructor = Sub;

Sub.prototype.sayAge = function(){

alert(this.age);

}

var instance1 = new Sub(‘First‘,23);

instance1.colors.push(‘black‘);

alert(instance1.colors); //red,black

instance1.sayName(); // First

instance1.sayAge(); //23

var instance2 = new Sub(‘Second‘,24);

alert(instance2.colors); // red

instance2.sayName(); // Second

instance2.sayAge(); //24

组合继承避免了原型链和借用构造函数的缺陷,融合了他们的优点,成为javascript中最常用的继承模式.

8.原型式继承

这种方式的思想是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型,这种方法并没有严格意义上的构造函数.

function object(o){

function F(){ }

F.prototype = o;

return new F();

}

object函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例.从本质上看,object对传入其中的对象执行了一次浅复制.

var person = {

name:‘Jack‘,

friends: [‘Rose‘]

};

var anotherPerson = object(person);

anotherPerson.name = ‘LiangShanBo‘ ;

anotherPerson.friends.push(‘ZhuYinTai‘);

var yetAnotherPerson = object(person);

yetAnotherPerson.name = ‘Romeo‘;

yetAnotherPerson.friends.push(‘Juliet‘);

alert(person.friends);//Rose,zhuYinTai,Juliet

ECMAScript5新增了Object.create()方法规范化了原型式继承.这个方法接受两个参数:一个作为新对象原型的对象(可选),另一个为新对象定义额外属性对象.在传入一个参数的情况下和object方法行为相同.

var person = {

name: ‘Jack‘,

friends: [‘Rose‘]

}

var anotherPerson = Object.create(person);

anotherPerson.name = ‘LiangShanBo‘;

anotherPerson.friends.push(‘ZhuYinTai‘);

var yetAnotherPerson = Object.create(person);

yetAnotherPerson.name = ‘Romeo‘;

yetAnotherPerson.friends.push(‘Juliet‘);

alert(person.friends) //Rose,ZhuYinTai,Juliet

Object.create()方法的第二个参数与Object.defineProperties()方法的第二个参数格式相同:每个属性都是 通过自己的描述定义的.以这种方式指定的任何属性 都会覆盖原型 对象上的同名属性.

var Person = {

name: ‘Jack‘,

friends: [‘Rose‘]

};

var anotherPerson = Object.create(person,{

name: {

value: ‘LiangShanBo‘

}

});

alert(anotherPerson.name);// LiangShanBo

在没有必要兴师动众地创建构造函数的,而只想让要一个对象与另一个对象保持类似的情况下,原型式继承十分有用.

但这种方式跟原型链继承一样,包含引用类型值的属性始终会共享相应的值.

9.寄生式继承

与原型式继承紧密相关的一种思路,与寄生构造函数和工程模式类似,即创建了一个仅用于封装继承过程的函数,该函数在内部以某种方式增强函数,最后再像真正地是它做了 所有的工作一样返回对象.

function createAnother(orignal){

var clone = object(orignal);//通过调用函数创建一个新对象

clone.sayHi = function(){ //以某种方式增强这个对象

alert(‘hi‘);

};

return clone;

}

//使用createAnnother()函数

var person = {

name: ‘Jack‘,

friends: [‘Rose‘]

};

var anotherPerson = createAnother(person);

anotherPerson.sayHi();//hi

这个例子中基于person返回一个新对象-------anotherPerson.新对象不仅具有哦person的所有属性和方法,而且还有自己的sayHi()方法.

在主要考虑对象而不是自定义类型和构造函数的情况下,寄生继承也是一种有用的模式.例子中的object()函数不是必须的,任何能够返回新对象的函数都适用此模式.

需要注意的是:使用这种方式为对象添加函数,会由于做不到函数复用而降低效率,这点与构造函数模式类似.

10.寄生组合式继承

组合式继承时javascript最常用的继承模式,但是也有自己的不足:那就是无论如何使用的时候都会调用两次超类型:一次是在 创建子类型原型的时候,另一次是在子类型构造函数内部.再来看一下组合继承

function Super(name){

this.name = name;

this.colors = [‘red‘];

}

Super.prototype.sayName = function(){

alert(this.name);

};

function Sub(name,age){

//继承属性

Super.call(this,name); //第二次调用Super

this.age = age;

}

//继承方法

Sub.prototype = new Super(); //第一次调用Super()

Sub.prototype.constructor = Sub;

Sub.prototype.sayAge = function(){

alert(this.age);

}

还好我们找到了解决这个问题的办法,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法.思路就是:不必为了指定子类型的原型而调用超类型的构造函数

,我们所需要的无非就是超类型的一个 副本而已,本质上就是使用寄生式继承来继承 超类型的原型,然后再将结果指定给子类型的原型.

function inheritPrototype(sub,super){

var prototype = Object(super.prototype); //创建对象

prototype.constructor = subType; //增强类型

subType.prototype = prototype; 指定对象

}

//最终的模式

function Super(name){

this.name = name;

this.colors = [‘red‘];

}

Super.prototype.sayName = function(){

alert(this.name);

};

function Sub(name,age){

//继承属性

Super.call(this,name); //第二次调用Super

this.age = age;

}

inheritPrototype(Sub,Super);

Sub.prototype.sayAge = function(){

alert(this.age);

}

寄生组合式继承是引用类型最理想的继承范式.

js继承总结

标签：

原文地址：http://www.cnblogs.com/ZSG-DoBestMe/p/5410955.html