javascript实现继承的几种方式

Posted 2020-08-15 張暁磊

 

原型链方式实现继承

[javascript] view plain copy

 

print?

1. function SuperType(){  
2.     this.property = true;  
3.     this.colors = [‘red‘,‘blue‘,‘green‘];  
4. }  
5. SuperType.prototype.getSuperValue = function(){  
6.     return this.property;    
7. };  
8.   
9. function SubType(){  
10.     this.subprototype = false;  
11. }  
12. SubType.prototype = new SuperType(); //继承了SuperType  
13. SubType.prototype.constructor = SubType  
14.   
15.   
16. var instance1 = new SubType();  
17. instance1.colors.push(‘black‘);  
18. console.log("instance1.colors:",instance1.colors,‘getSuperValue():‘,instance1.getSuperValue());  
19.   
20. var instance2 = new SubType();  
21. console.log("instance1.colors:",instance1.colors,‘getSuperValue():‘,instance1.getSuperValue());  

function SuperType(){
    this.property = true;
    this.colors = [‘red‘,‘blue‘,‘green‘];
}
SuperType.prototype.getSuperValue = function(){
    return this.property;  
};

function SubType(){
    this.subprototype = false;
}
SubType.prototype = new SuperType(); //继承了SuperType
SubType.prototype.constructor = SubType


var instance1 = new SubType();
instance1.colors.push(‘black‘);
console.log("instance1.colors:",instance1.colors,‘getSuperValue():‘,instance1.getSuperValue());

var instance2 = new SubType();
console.log("instance1.colors:",instance1.colors,‘getSuperValue():‘,instance1.getSuperValue());

以上代码展示了原型链实现继承的方式。instance1实例继承了new  SuperType(),new SuperType()又继承了Object的实例(javascript中所有的对象都默认继承Object)。如此层层递进，构成了实例与实例原型的链。

 

原型链的问题

原型链很强大，可以用它来实现继承，但它也存在一些问题。其中最大的问题就是包含引用类型值得原型，而原型会被所有实例都共享。就像以上代码，SubType.prototype包含一个引用类型的值colors属性，而SubType的两个实例instance1和instance2都共享colors属性，对instance1.colors修改能够通过instance2.colors反映出来。

第二个问题是：在创建子类实例时，不能向超类的构造函数中传递参数。有鉴于此，在加上刚刚讨论过的原型中包含引用类型值得问题，实践中很少会单独使用原型链实现继承。

借用构造函数方式实现继承

在解决原型中包含引用类型值所带来的问题的过程中，开发人员使用一种叫做借用构造函数的技术。这种技术相当简单，即在子类型类构造函数内部调用超类型构造函数(使用apply()和call()方法实现)。事例代码如下：

[javascript] view plain copy

 

print?

1. function SuperType(name){  
2.     this.colors = [‘red‘,‘blue‘,‘grezen‘];  
3.     this.name = name;  
4.     this.print = function(obj){  
5.         console.log("print:",obj);  
6.     }  
7. }  
8. SuperType.prototype.getName = function(){  
9.     return this.name;  
10. }  
11.   
12. function SubType(name,age){  
13.     SuperType.call(this,name);  
14.     this.age = age;  
15. }  
16.   
17. var instance1 = new SubType(‘zxy‘,24);  
18. instance1.colors.push(‘baclk‘);  
19. console.log(‘instance1.name:‘,instance1.name,‘instance1.age:‘,instance1.age);  
20.   
21. var instance2 = new SubType(‘ABC‘,111);  
22. console.log(‘instance2.name:‘,instance2.name,‘instance2.age:‘,instance2.age,‘instance2.colors:‘,instance2.colors);  
23. instance2.print(instance2.colors);  

function SuperType(name){
    this.colors = [‘red‘,‘blue‘,‘grezen‘];
    this.name = name;
    this.print = function(obj){
        console.log("print:",obj);
    }
}
SuperType.prototype.getName = function(){
    return this.name;
}

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}

var instance1 = new SubType(‘zxy‘,24);
instance1.colors.push(‘baclk‘);
console.log(‘instance1.name:‘,instance1.name,‘instance1.age:‘,instance1.age);

var instance2 = new SubType(‘ABC‘,111);
console.log(‘instance2.name:‘,instance2.name,‘instance2.age:‘,instance2.age,‘instance2.colors:‘,instance2.colors);
instance2.print(instance2.colors);

SuperType.call(this, name);会在新对象(指的是SubType的实例)上执行SuperType()函数中定义的所有代码初始化。结果SubType()的每个实例都有一个自己的colors属性的副本了。(解决了原型中包含引用类型值得问题)

我们还可以在SubType()构造函数内部调用SuperType()构造函数时，给SuperType()构造函数出入参数。这样就可在创建SubType()的实例时出入参数。(解决了创建子类实例时，不能像父类传递参数的问题)

 

借用构造函数存在的问题

借用构造函数也存在一些问题：1）方法都要在构造函数中定义，因此函数复用就无从谈起了。这样做降低了效率。上面代码中instance1.print == instance2.print的结果是false，也就是说创建了两个完成同样任务的函数实例，这样是没有必要的，会降低效率。

2）超类原型上的方法对子类是不可见的，子类继承不到。比如:SubType()的实例不能使用SuperType.prototype上的方法。

考虑到这两个问题，借用构造函数实现继承的方式在实践中也很少单独使用。

组合继承

组合继承是指将原型链和借用构造函数的技术组合到一起，从而发挥二者之长的一种继承技术。其背后的思路是使用原型链技术实现对原型上方法和属性的继承，而通过借用构造函数来实现对实例属性的继承。这样既能通过在原型上定义方法实现函数的复用，又能保证每个实例都有它自己的属性。ps:就这么原封不动的照着书敲下来了...因为总结不啰嗦,很精辟....

事例代码如下：

[javascript] view plain copy

 

print?

1. function SuperType(name){  
2.     this.name = name;  
3.     this.colors = [‘red‘,‘blue‘,‘green‘];  
4. }  
5. SuperType.prototype.getName = function(){  
6.     return this.name;  
7. }  
8.   
9. function SubType(name,age){  
10.     SuperType.call(this,name);  
11.     this.age = age;  
12. }  
13. SubType.prototype = new SuperType();  
14. SubType.prototype.constructor = SubType;  
15. SubType.prototype.getAge = function(){  
16.     return this.age;  
17. }  
18.   
19. var instance1 = new SubType(‘zxy‘,24);  
20. instance1.colors.push(‘black‘);  
21. console.log(‘colors:‘,instance1.colors);  
22. console.log(‘instance1.getName():‘,instance1.getName(),‘instance1.getAge():‘,instance1.getAge());  
23.   
24. var instance2 = new SubType(‘zxy‘,24);  
25. console.log(‘colors:‘,instance2.colors);  
26. console.log(‘instance2.getName():‘,instance2.getName(),‘instance2.getAge():‘,instance2.getAge());  

function SuperType(name){
    this.name = name;
    this.colors = [‘red‘,‘blue‘,‘green‘];
}
SuperType.prototype.getName = function(){
    return this.name;
}

function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.getAge = function(){
    return this.age;
}

var instance1 = new SubType(‘zxy‘,24);
instance1.colors.push(‘black‘);
console.log(‘colors:‘,instance1.colors);
console.log(‘instance1.getName():‘,instance1.getName(),‘instance1.getAge():‘,instance1.getAge());

var instance2 = new SubType(‘zxy‘,24);
console.log(‘colors:‘,instance2.colors);
console.log(‘instance2.getName():‘,instance2.getName(),‘instance2.getAge():‘,instance2.getAge());

组合继承避免了原型链和借用构造函数技术的缺陷，融合了它们的优点，成为JavaScript中最常用的继承模式。而且instanceof和isPrototypeOf()也能够用于基于组合模式创建的对象。

 

 

原型式继承

道格拉斯。克罗克福德在2006年写了一篇文章，题为 JavaScript中的原型式继承。在文章中他介绍了一种实现继承的方法，

print?

1. function object(o){  
2.     function F(){}  
3.     F.prototype = o;  
4.     return new new F();  
5. }  

function object(o){
    function F(){}
    F.prototype = o;
    return new new F();
}

在object()函数内部，先创建了一个临时性的构造函数F(),然后将传入的对象作为这个构造函数的原型，最后返回这个这个临时类型的新实例。从本质上来讲，object对传入的其中的对象执行了一次浅复制。我们看下面的例子：

 

[javascript] view plain copy

 

print?

1. var person = {  
2.     name:‘zxy‘,  
3.     friends: [‘A‘,‘B‘,‘C‘]  
4. };  
5.   
6. var person1 = object(person);  
7. person1.name = ‘zxy person1‘;  
8. person1.friends.push(‘D‘);  
9. console.log(person1);  
10.   
11. var person2 = object(person);  
12. person2.name = ‘zxy person2‘;  
13. console.log(person2);  

var person = {
    name:‘zxy‘,
    friends: [‘A‘,‘B‘,‘C‘]
};

var person1 = object(person);
person1.name = ‘zxy person1‘;
person1.friends.push(‘D‘);
console.log(person1);

var person2 = object(person);
person2.name = ‘zxy person2‘;
console.log(person2);

克罗克福德主张的这种原型式继承，要求你必须有一个对象可以作为另一个对象的基础。如果有这么一个对象的话，就把它传递给object()函数，然后在根据需要在对得到的对象加已修改。在上面的例子中，可以最为基础对象的是person，于是我们把它出入object()中，然后object()函数返回一个新对象，这个新对象将person对象作为原型，所以它的原型中包含一个基本类型值和一个引用类型值。这就意味着person.fridends不仅属于pserson所有，而且也会被person1和person2共享。实际上，相当于创建了person的两个副本(浅复制)。原型式继承和原型链技术实现继承存在同样的问题。

ECMAScript5通过新增Object.create()规范原型式继承。想了解的可以百度一下。

 

原型式继承的问题

在没有必要兴师动众地创建构造函数，只想让一个对象与另一个对象保持类的情况下，原型式继承完全可以胜任。
不过别忘了，原型式继承和原型模式技术实现继承存在同样的问题。原型包含引用类型的值，通过一个实例对这个引用类型修改，会在其它实例反映出来。

 

寄生式继承

寄生式继承是与原型式继承紧密相关的一种思路，并且同样也是有克罗克福德推而广之的。即创建一个仅用于封装继承过程的的函数，该函数内部已某种方式增强对象(给对象添加方法，也就是添加新的行为)，比较类似工厂模式。

已下代码示范了寄生式继承模式：

[javascript] view plain copy

 

print?

1. function object(o){  
2.     function F(){}  
3.     F.prototype = o;  
4.     return new F();  
5. }  
6.   
7. function createAnother(o){  
8.     var clone = object(o);//通过调用函数创建一个新对象  
9.     clone.sayHi = function(){//通过给新对象新增方法来增强这个对象  
10.         console.log(‘HI 小明..‘);  
11.     }  
12.     return clone; //返回这个对象  
13. }  

function object(o){
    function F(){}
    F.prototype = o;
    return new F();
}

function createAnother(o){
    var clone = object(o);//通过调用函数创建一个新对象
    clone.sayHi = function(){//通过给新对象新增方法来增强这个对象
        console.log(‘HI 小明..‘);
    }
    return clone; //返回这个对象
}

在这个例子中，createAnother()函数接受一个参数，就是将要作为新对象的基础(原型)对象。然后把这个对象(o)传递给object()函数，将返回值赋给clone。在为clone对象添加新方法sayHi()，最后返回clone。可以像下面这样使用createAnother()函数：

[javascript] view plain copy

 

print?

1. var person = {  
2.     name:‘zxy‘,  
3.     friends: [‘A‘,‘B‘,‘C‘]  
4. };  
5.   
6. var anotherPerson = createAnother(person);  
7. anotherPerson.sayHi();  

var person = {
    name:‘zxy‘,
    friends: [‘A‘,‘B‘,‘C‘]
};

var anotherPerson = createAnother(person);
anotherPerson.sayHi();

这个例子中的代码，基于person对象返回了一个新对象anotherPerson.新对象不仅具有person的所有属性和方法。而且还有自定义的sayHi()方法。

按照我的理解的寄生式继承：一个函数中调用了其他函数(这个函数不是必须是object()函数，只要是能返回一个对象的函数就可以)产生一个新对象，在为新对象添加新方法，并将新对象返回。

在主要考虑对象而不是自定义类型和构造函数的情况下，寄生继承也是一种有用的模式。

 

寄生模式存在的问题

1）达不到函数复用的目的。2）原型包含引用类型的值。

寄生组合模式

寄生组合模式JavaScript中真正的大牛级别实现继承的方式出现了。在介绍寄生组合模式之前我们先来说说组合模式存在的的最大问题。

我们之前说过组合模式是JavaSscript中最常用的继承模式。不过，它也有自己的不足。组合模式最大的问题就是无论什么情况下都会调用两次超类的构造函数：第一次是在将父类实例赋给子类的原型，第二次是在子类的构造函数内部调用父类构造函数。

第一次调用超类的实例后，子类实例就包含了所有父类实例的属性(从子类构造函数原型上继承来的)，但是我们又在调用第二次父类的构造函数时不得不在子类构造函数中重新了这些属性。请看下面组合继承的例子：

 

[javascript] view plain copy

 

print?

1. //超类  
2. function SuperType(name){  
3.     this.name = name;  
4.     this.colors = [‘red‘,‘blue‘,‘green‘];  
5. }  
6. SuperType.prototype.getName = function(){  
7.     return this.name;  
8. }  
9.   
10. //子类  
11. function SubType(name,age){  
12.     SuperType.call(this,name);//第二次调用超类构造函数  
13.     this.age = age;  
14. }  
15. SubType.prototype = new SuperType(); //第一次调用超类构造函数  
16. SubType.prototype.constructor = SubType;  
17. SubType.prototype.getAge = function(){  
18.     return this.age;  
19. }  
20.   
21. //创建SubType()构造函数的一个实例  
22. var instance = new SubType(‘zxy‘,24);  
23.   
24. console.log(instance); //输出类instance的原型链(见图IMG-1)  

//超类
function SuperType(name){
    this.name = name;
    this.colors = [‘red‘,‘blue‘,‘green‘];
}
SuperType.prototype.getName = function(){
    return this.name;
}

//子类
function SubType(name,age){
    SuperType.call(this,name);//第二次调用超类构造函数
    this.age = age;
}
SubType.prototype = new SuperType(); //第一次调用超类构造函数
SubType.prototype.constructor = SubType;
SubType.prototype.getAge = function(){
    return this.age;
}

//创建SubType()构造函数的一个实例
var instance = new SubType(‘zxy‘,24);

console.log(instance); //输出类instance的原型链(见图IMG-1)

在上面代码中第一次调用SuperType()构造函数时，会在SubType.prototype创建两个属性colors和name(图片中画红圈的后两个)，它们都是SuperType()实例的属性，只不过是位于SubType的原型对象上。

第二次调用时，会在instance实例上创建colors和name属性(图片中画红圈的前两个)，这两个实例上的colors和name会屏蔽原型中的同名属性。

如上所述，有两组colors和name属性，一组在SubType()的原型上，一组在SubType()的实例上。为了解决组合继承的问题，我们来学习一下寄生组合式继承。

 

寄生组合式继承，即通过借用构造函数继承来实现属性继承，通过原型链的混成来实现方法继承。其背后的基本思路是：不必为指定子类的原型而调用超类的构造函数(new超类的构造函数),我们所需要无非就是父类构造函数原型的一个副本而已。其实就是使用寄生式继承来继承父类的原型。寄生组合式继承的基本模式如下所示：

[javascript] view plain copy

 

print?

1. function object(o){  
2.     function F(){};  
3.     F.prototype = o;  
4.     return new F();  
5. }  
6.   
7. function inheritPrototype(subType,superType){  
8.     var prototype = object(superType.prototype); //以superType.prototype为基础创建一个新对象(原型式继承).  
9.                                                  //注意这里是浅复制,尽量避免将colorsPrototype这样的属性定义在原型对象中，应该像colors属性定义在构造函数内部  
10.     //subType.prototype = prototype;  
11.     //subType.prototype.constructor = c;  
12.    prototype.constructor = subType;             //给prototype对象添加constructor属性,增强对象(寄生式继承)  
13.    subType.prototype = prototype;               //将prototype对象子类的原型对象  
14.   
15. }  

function object(o){
    function F(){};
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType,superType){
    var prototype = object(superType.prototype); //以superType.prototype为基础创建一个新对象(原型式继承).
                                                 //注意这里是浅复制,尽量避免将colorsPrototype这样的属性定义在原型对象中，应该像colors属性定义在构造函数内部
    //subType.prototype = prototype;
    //subType.prototype.constructor = c;
   prototype.constructor = subType;             //给prototype对象添加constructor属性,增强对象(寄生式继承)
   subType.prototype = prototype;               //将prototype对象子类的原型对象

}

这个实例中的inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数：第一个参数是子类构造函数和超类构造函数。在函数内部，第一步是创建超类原型的一个副本。第二部是添加一个constructor属性，从而弥补重写原型而失去的默认的constructor属性。最后一步将新创建的对象(即父类原型的副本)赋给子类的原型。这样，我们可以调用inheritPrototype()函数来替换前边例子中为子类原型赋值的语句了。实例如下：

[javascript] view plain copy

 

print?

1. //也可以将object()和inheritPrototye()功能合并成一个函数  
2. /*function inheritPrototype1(subType, superType){ 
3.     function F(){}; 
4.     F.prototype = superType.prototype; 
5.     subType.prototype = new F(); 
6.     subType.prototype.constructor = subType; 
7. }*/  
8.   
9. //父类  
10. function SuperType(name){  
11.     this.name = name;  
12.     this.colors = [‘red‘,‘green‘,‘black‘];  
13. }  
14. SuperType.prototype.sayName = function(){  
15.     console.log("sayName():"+this.name);  
16. };  
17. SuperType.prototype.colorsPtototype = [‘A‘,‘B‘];  
18.   
19. //子类  
20. function SubType(name,age){  
21.     SuperType.call(this,name);  
22.     this.age = age;  
23. }  
24. inheritPrototype(SubType,SuperType);    //使SubType继承SuperType   
25. //SubType.prototype = new SuperType(); //SubType.prototype.constructor = SubType; //以前的写法  
26. SubType.prototype.sayAge = function(){  
27.     console.log("sayName():"+this.age);  
28. }  
29.   
30. var subType1 = new SubType(‘zxy‘,‘20‘);  
31. subType1.sayName();  
32. subType1.sayAge();  
33. subType1.colorsPtototype.push(‘C‘);  
34. console.log("colorsPtototype:"+subType1.colorsPtototype);  
35. console.log("subType1:",subType1);  
36.   
37. var subType2 = new SubType();  
38. console.log("colorsPtototype:"+subType2.colorsPtototype);  
39. console.log("subType2",subType2);  

//也可以将object()和inheritPrototye()功能合并成一个函数
/*function inheritPrototype1(subType, superType){
    function F(){};
    F.prototype = superType.prototype;
    subType.prototype = new F();
    subType.prototype.constructor = subType;
}*/

//父类
function SuperType(name){
    this.name = name;
    this.colors = [‘red‘,‘green‘,‘black‘];
}
SuperType.prototype.sayName = function(){
    console.log("sayName():"+this.name);
};
SuperType.prototype.colorsPtototype = [‘A‘,‘B‘];

//子类
function SubType(name,age){
    SuperType.call(this,name);
    this.age = age;
}
inheritPrototype(SubType,SuperType);    //使SubType继承SuperType 
//SubType.prototype = new SuperType(); //SubType.prototype.constructor = SubType; //以前的写法
SubType.prototype.sayAge = function(){
    console.log("sayName():"+this.age);
}

var subType1 = new SubType(‘zxy‘,‘20‘);
subType1.sayName();
subType1.sayAge();
subType1.colorsPtototype.push(‘C‘);
console.log("colorsPtototype:"+subType1.colorsPtototype);
console.log("subType1:",subType1);

var subType2 = new SubType();
console.log("colorsPtototype:"+subType2.colorsPtototype);
console.log("subType2",subType2);

这个例子的高效体现在他只调用一次父类(SubType)的构造函数，并且因此避免了在子类的原型(SubType.prototype)上创建不必要、多余的属性。 与此同时，原型链还能保持不变；因此能够正常使用instanceof和isPrototypeOf()。

YUI的YAHOO.lang.extend()方法采用了寄生组合式继承，从而让这种模式首次出现在一个应用非常广泛的JavaScript库中。