JavaScript中的继承

本篇文章的内容主要来自于《JavaScript权威指南(第六版)》和《JavaScript高级程序设计(第三版)》,基于ES5;

  JavaScript中没有像Java中的接口或者父类的概念。但是像其他面向对象语言一样,它也有继承的概念,只是实现方式不同:JavaScript中的继承是通过原型链来实现的。我门在JavaScript中的原型与原型链中提到过。现在我们详细讨论下。

我们先看看JavaScript中的几种继承方式。

一、完全使用原型链

  我们都知道,JavaScript对象会继承原型链上的属性。当我们通过对象o访问属性x,如果o中没有,就去原型链中一级一级找,最终返回属性值或属性x;当我们给x赋值时,如果o中有属性x,则改变x的值;如果没有,就给o新增一个属性x并赋值,不会影响到原型链,从而也不会影响到有相同原型链的其他对象。但是这存在一个问题:当原型链上的某个属性为引用类型时,当我们不修改这个引用的指向,而通过这个引用修改引用所指的对象时。修改会影响到有相同原型链的所有对象实例:

//本代码片段来自于《JavaScript高级程序设计(第三版)》167页
function
SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ } //继承了 SuperType SubType.prototype = new SuperType(); var instance1 = new SubType(); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green,black

  完全使用原型链还有一个问题:不能向超类型的构造函数中传递参数。实际上,应该说是没有办法在不影响所有对象实例的情况下,给超类的构造函数传递参数。

二、借用构造函数

  使用构造函数有一个很大的优势,即可以在子类型构造函数中向超类型构造函数传递参数。


//本代码片段来自于《JavaScript高级程序设计(第三版)》168页

function
SuperType(name){   this.name = name; } function SubType(){ //继承了 SuperType,同时还传递了参数 SuperType.call(this, "Nicholas");   //实例属性   this.age = 29; } var instance = new SubType(); alert(instance.name); //"Nicholas"; alert(instance.age); //29

  在SubType的构造函数中调用了SuperType,每一次创建一个SubType的实例,都会执行一次SuperType和SubType的初始化方法。所以每个对象实例都具有SubType和SupType定义的属性的副本,相互之间不会有任何影响。而且可以看到,这种方式在创建对象时可以传递参数。

  然而,这种方式也有缺点:

    第一,超类的原型对象不在子类的原型链中,所以在超类原型型定义的属性,对子类型而言是不可见的;

    第二,方法在构造参数中定义,每创建一个对象,都会重新生成方法,因此方法无法重用:

function SubType(){
    this.func=function(){
        console.info("func")
    }
}
var instance1 = new SubType();
var instance2 = new SubType();
instance1.func()//func
instance2.func()//func
console.info(instance1.func===instance2.func)//false

三、组合继承(最常见模式)

  指的是将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。


//本代码片段来自于《JavaScript高级程序设计(第三版)》168页
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
    alert(this.name);
};
function SubType(name, age){
//继承属性
SuperType.call(this, name);
    this.age = age;
}
//继承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
    alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27

  这是JavaScript中最常见的继承方式。但是也有缺点,原型对象中定义了不必要的属性,在SuperType构造函数中定义的属性存在于SuperType和SubType对象实例中,而SuperType实例作为SubType实例的原型对象,SuperType实例中的这些属性在SubType实例中始终被覆盖。这个缺点将在下面说到的寄生式组合继承中解决。

四、原型式继承


//本代码片段来自于《JavaScript高级程序设计(第三版)》169页
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}

  这种继承方式以一个已有的对象作为原型创建对象,这种方式与Object.create()。显然这种方式与完全使用原型链的方式有相同的缺点,在只想让一个对象与另一个对象保持类似的情况下,可以使用。同时它也是下面说到的另一种继承方式的基础:寄生式继承。

五、寄生式继承


//本代码片段来自于《JavaScript高级程序设计(第三版)》171页

function
createAnother(original){ var clone = object(original); //通过调用函数创建一个新对象 clone.sayHi = function(){ //以某种方式来增强这个对象 alert("hi"); }; return clone; //返回这个对象 } var person = {   name: "Nicholas",   friends: ["Shelby", "Court", "Van"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi(); //"hi

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

六、寄生组合式继承 (最理想的模式)

  前面我们说到组合式继承在原型对象中定义了不必要的属性。寄生式组合式继承可以避免这个问题:


//本代码片段来自于《JavaScript高级程序设计(第三版)》173页

function
inheritPrototype(subType, superType){   var prototype = object(superType.prototype); //创建对象   prototype.constructor = subType; //增强对象   subType.prototype = prototype; //指定对象 } function SuperType(name){   this.name = name;   this.colors = ["red", "blue", "green"]; } SuperType.prototype.sayName = function(){   alert(this.name); }; function SubType(name, age){   SuperType.call(this, name);   this.age = age; } inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){   alert(this.age); };

  可以看到通过把SubType的原型指向一个对象,这个对象本身除了一个指向SubType的构造函数外,没有任何属性,并且的原型是SuperType。实现了对SuperType的继承,并且没有定义不必要的属性。

总结

  可以看到JavaScript中的继承主要依赖原型链,为了克服原型链的某些缺点,我们使用了构造函数。最后一种方式是最理想的方式,组合式继承最常见,但是其他方式也都各有其实用的范围。

  在寄生式组合继承中我最初想为什么不直接把SubType的原型指定为为SuperType的原型,不是更方便吗?但是仔细一想,如果有不止一个SubType,那么一个SubType在原型中定义的属性就会在其他所有的SubType中都可见!!而且原型的constructor也指向了错误的类型!算是自己一个错误的尝试吧,记下来给自己个提醒!

posted @ 2017-11-13 01:15  qiutianlaile  阅读(165)  评论(0编辑  收藏  举报