关于JavaScript继承的那些事

在JavaScript中,对象的创建可以脱离类型(class free),通过字面量的方式可以很方便的创建出自定义对象。

另外,JavaScript中拥有原型这个强大的概念,当对象进行属性查找的时候,如果对象本身内找不到对应的属性,就会去搜索原型链。所以,结合原型和原型链的这个特性,JavaScript就可以用来实现对象之间的继承了。

下面就介绍一下JavaScript中的一些常用的继承方式。

原型链继承

由于原型链搜索的这个特性,在JavaScript中可以很方便的通过原型链来实现对象之间的继承。

下面看一个例子:

function Person(name, age){
    this.name = name;
    this.age = age;
}    

Person.prototype.getInfo = function(){
    console.log(this.name + " is " + this.age + " years old!");
}


function Teacher(staffId){
    this.staffId = staffId;
}

Teacher.prototype = new Person();

var will = new Teacher(1000);
will.name = "Will";
will.age = 28;
will.getInfo();
// Will is 28 years old!

console.log(will instanceof Object);
// true
console.log(will instanceof Person);
// true
console.log(will instanceof Teacher);
// true

console.log(Object.prototype.isPrototypeOf(will));   
// true
console.log(Person.prototype.isPrototypeOf(will));
// true
console.log(Teacher.prototype.isPrototypeOf(will));
// true

在这个例子中,有两个构造函数"Person"和"Teacher",通过"Teacher.prototype = new Person()"语句创建了一个"Person"对象,并且设置为"Teacher"的原型。

通过这种方式,就实现了"Teacher"继承"Person","will"这个对象可以成功的调用"getInfo"这个属于"Person"的方法。

在这个例子中,还演示了通过"instanceof"操作符和"isPrototypeOf()"方法来查看对象和原型之间的关系。

对于原型链继承,下面看看其中的一些细节问题。

 

constructor属性

对于所有的JavaScript原型对象,都有一个"constructor"属性,该属性对应用来创建对象的构造函数。

对于"constructor"这个属性,最大的作用就是可以帮我们标明一个对象的"类型"

在JavaScript中,当通过"typeof"查看Array对象的时候,返回的结果是"object"。这个我们的预期结果,所以如果要判对一个对象到底是不是Array类型,就可以结合"constructor"属性得到想要的结果。

function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

var arr = []
console.log(typeof arr);
// object
console.log(isArray(arr));
// true

现在回到前面的例子,查看一下对象"will"的原型和构造函数:

从这个结果可以看到,"will"的原型是"Person {name: undefined, age: undefined}"(通过new Person()构造出来的对象),"will"的构造函数是"function Person"。

等等,"will"不是通过"Teacher"创建出来的对象么?为什么构造函数对于的是"function Person",而不是"function Teacher"?

下面,根据前面的例子绘制一张对象关系图,从而分析一下继承关系以及"constructor"属性:

图中给出了各种对象之间的关系,有几点需要注意的是:

  • "Teacher.prototype"这个原型对象是通过"Person"构造函数创建出来的一个对象"Person {name: undefined, age: undefined}"
  • 对象"will"创建了自己的"name"和"age"属性,并没有使用父类对象的,而是覆盖了父类的"name"和"age"属性
  • 通过"will"访问"constructor"这个属性的时候,先找到了"Teacher.prototype"这个对象,然后找到"Person.prototype",通过原型链查找访问到了"constructor"属性对应的"function Person"

     

重设constructor

为了解决上面的问题,让子类对象的"constructor"属性对应正确的构造函数,我们可以重设子类原型对象的"constructor"属性。

一般来说,可以简单的使用下面代码来重设"constructor"属性:

Teacher.prototype.constructor = Teacher;

但是通过这种方式重设"constructor"属性会导致它的[[Enumerable]]特性被设置为 true。默认情况下,原生的"constructor"属性是不可枚举的。

因此如果使用兼容 ECMAScript 5 的 JavaScript 引擎,就可以使用"Object.defineProperty()":

Object.defineProperty(Teacher.prototype, "constructor", {
    enumerable: false,
    value: Teacher
});

通过下面的结果可以看到:

通过这个设置,对象"will" 的"constructor"属性就指向了正确的"function Teacher"。

这时的对象关系图就变成了如下,跟前面的关系图比较,唯一的区别就是"Teacher.prototype"对象多了一个"constructor"属性,并且这个属性指向"function Teacher":

 

原型的动态性

原型对象是可以修改的,所以,当创建了继承关系之后,我们可以通过更新子类的原型对象给子类添加特有的方法。

例如通过下面的方式就给子类添加了一个特有的"getId"方法。

Teacher.prototype.getId = function(){
    console.log(this.name + "'s staff Id is " + this.staffId);
}

will.getId();
// Will's staff Id is 1000

但是,一定要区分原型的修改和原型的重写。如果对原型进行了重写,就会产生完全不同的效果。

下面看看如果对"Teacher"的原型重写会产生什么效果,为了分清跟前面代码的顺序,这里贴出了完整的代码:

function Person(name, age){
    this.name = name;
    this.age = age;
}    

Person.prototype.getInfo = function(){
    console.log(this.name + " is " + this.age + " years old!");
}


function Teacher(staffId){
    this.staffId = staffId;
}

Teacher.prototype = new Person();
Object.defineProperty(Teacher.prototype, "constructor", {
    enumerable: false,
    value: Teacher
});

var will = new Teacher(1000);
will.name = "Will";
will.age = 28;

// 更新原型 Teacher.prototype.getId
= function(){ console.log(this.name + "'s staff Id is " + this.staffId); } will.getId(); // Will's staff Id is 1000
// 重写原型 Teacher.prototype = { getStaffId: function(){ console.log(this.name + "'s staff Id is " + this.staffId); } } will.getInfo(); // Will is 28 years old! will.getId(); // Will's staff Id is 1000 console.log(will.__proto__); // Person {name: undefined, age: undefined} console.log(will.__proto__.constructor); // function Teacher var wilber = new Teacher(1001); wilber.name = "Wilber"; wilber.age = 28; // wilber.getInfo(); // Uncaught TypeError: wilber.getInfo is not a function(…) wilber.getStaffId(); // Wilber's staff Id is 1001 console.log(wilber.__proto__); // Object {} console.log(wilber.__proto__.constructor); // function Object() { [native code] }

经过重写原型之后情况更加复杂了,下面就来看看重写原型之后的对象关系图:

从关系图可以看到:

  • 原型对象可以被更新,通过"Teacher.prototype.getId"给"will"对象的原型添加了"getId"方法
  • 重写原型之后,在重写原型之前创建的对象的"[[prototype]]"属性依然指向原来的原型对象;在重写原型之后创建的对象的"[[prototype]]"属性将指向新的原型对象
  • 对于重写原型前后创建的两种对象,对象的属性查找将搜索不同的原型链

组合继承

在通过原型链方式实现的继承中,父类和子类的构造函数相对独立,如果子类构造函数可以调用父类的构造函数,并且进行相关的初始化,那就比较好了。

这时就想到了JavaScript中的call方法,通过这个方法可以动态的设置this的指向,这样就可以在子类的构造函数中调用父类的构造函数了。

这样就有了组合继承这种方式:

function Person(name, age){
    this.name = name;
    this.age = age;
}    

Person.prototype.getInfo = function(){
    console.log(this.name + " is " + this.age + " years old!");
}

function Teacher(name, age, staffId){
    Person.call(this, name, age);        // 通过call方法来调用父类的构造函数进行初始化
    this.staffId = staffId;
}

Teacher.prototype = new Person();
Object.defineProperty(Teacher.prototype, "constructor", {
    enumerable: false,
    value: Teacher
});

var will = new Teacher("Will", 28, 1000);
will.getInfo();

console.log(will.__proto__);
// Person {name: undefined, age: undefined}
console.log(will.__proto__.constructor);
// function Teacher

在这个例子中,在子类构造函数"Teacher"中,直接通过"Person.call(this, name, age);"的方式调用了父类的构造函数,进而设置了"name"和"age"属性(但这里依旧是覆盖了父类的"name"和"age"属性)。

组合式继承是比较常用的一种继承方法,其背后的思路是使用原型链实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。这样,既通过在原型上定义方法实现了函数复用,又保证每个实例都有它自己的属性。

组合式继承的小问题

虽然组合继承是 JavaScript 比较常用的继承模式,不过通过前面组合继承的代码可以看到,它也有一些小问题。

首先,子类会调用两次父类的构造函数:

  • 一次是在创建子类型原型的时候
  • 另一次是在子类型构造函数内部

子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性,从下图可以看到"will"对象中有两份"name"和"age"属性。

后面,我们会看到如何通过"寄生组合式继承"来解决组合继承的这个问题。

原型式继承

在前面两种方式中,都需要用到对象以及创建对象的构造函数(类型)来实现继承。

但是在JavaScript中,创建对象完全不需要定义一个构造函数(类型),通过字面量的方式就可以创建一个自定义的对象。

为了实现对象之间的直接继承,就有了原型式继承

这种继承方式方法并没有使用严格意义上的构造函数,而是直接借助原型基于已有的对象创建新对象,同时还不必创建自定义类型(构造函数)。为了达到这个目的,我们可以借助下面这个函数:

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

在 "object()"函数内部,先创建了一个临时性的构造函数,然后将传入的对象作为这个构造函数的原型,最后返回了这个临时类型的一个新实例。

下面看看使用"object()"函数实现的对象之间的继承:

var utilsLibA = {
    add: function(){
        console.log("add method from utilsLibA");
    },
    sub: function(){
        console.log("sub method from utilsLibA");
    }
}

var utilsLibB = object(utilsLibA);

utilsLibB.add = function(){
    console.log("add method from utilsLibB");
}
utilsLibB.div = function(){
    console.log("div method from utilsLibB");
}

utilsLibB.add();
// add method from utilsLibB
utilsLibB.sub();
// sub method from utilsLibA
utilsLibB.div();
// div method from utilsLibB

通过原型式继承,基于"utilsLibA"创建了一个"utilsLibB"对象,并且可以正常工作,下面看看对象之间的关系:

通过"object()"函数的帮助,将"utilsLibB"的原型赋值为"utilsLibA",对于这个原型式继承的例子,对象关系图如下,"utilsLibB"的"add"方法覆盖了"utilsLibA"的"add"方法:

Object.create()

ECMAScript 5 通过新增 "Object.create()"方法规范化了原型式继承。这个方法接收两个参数:

  • 一个用作新对象原型的对象
  • 一个为新对象定义额外属性的对象(可选的)

在传入一个参数的情况下,"Object.create()"与 上面的"object"函数行为相同。关于更多"Object.create()"的内容,请参考MDN

继续上面的例子,这次使用"Object.create()"来创建对象"utilsLibC":

utilsLibC = Object.create(utilsLibA, {
    sub: {
        value: function(){
            console.log("sub method from utilsLibC");
        }
    },
    mult: {
        value: function(){
            console.log("mult method from utilsLibC");
        }
    },
})

utilsLibC.add();
// add method from utilsLibA
utilsLibC.sub();
// sub method from utilsLibC
utilsLibC.mult();
// mult method from utilsLibC
console.log(utilsLibC.__proto__);
// Object {add: (), sub: (), __proto__: Object}
console.log(utilsLibC.__proto__.constructor);
// function Object() { [native code] }

寄生式继承

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

以下代码示范了寄生式继承模式,其实就是封装"object()"函数的调用,以及对新的对象进行自定义的一些操作:

function create(o){
    var f= object(o);         // 通过原型式继承创建一个新对象
    f.run = function () {     // 以某种方式来增强这个对象
        return this.arr;
    };
    return f;                 // 返回对象
}

寄生组合式继承

所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。

其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是父类型原型的一个副本而已。本质上,就是使用寄生式继承来继承父类型的原型,然后再将结果指定给子类型的原型。

注意在寄生组合式继承中使用的“inheritPrototype()”函数。

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

function inheritPrototype(subType, superType) {
    var prototype = object(superType.prototype);    // 创建对象
    prototype.constructor = subType;                // 增强对象,设置constructor属性
    subType.prototype = prototype;                  // 指定对象
}

function Person(name, age){
    this.name = name;
    this.age = age;
}    
Person.prototype.getInfo = function(){
    console.log(this.name + " is " + this.age + " years old!");
}


function Teacher(name, age, staffId){
    Person.call(this, name, age)
    this.staffId = staffId;
}

inheritPrototype(Teacher, Person);

Teacher.prototype.getId = function(){
    console.log(this.name + "'s staff Id is " + this.staffId);
}


var will = new Teacher("Will", 28, 1000);
will.getInfo();
// Will is 28 years old!
will.getId();
// Will's staff Id is 1000

var wilber = new Teacher("Wilber", 29, 1001);
wilber.getInfo();
// Wilber is 29 years old!
wilber.getId();
// Wilber's staff Id is 1001

代码中有一处地方需要注意,给子类添加"getId"方法的代码("Teacher.prototype.getId")一定要放在"inheritPrototype()"函数调用之后,因为在“inheritPrototype()”函数中会重写“Teacher”的原型。

下面继续查看一下对象"will"的原型和"constructor"属性。

 

这个示例中的" inheritPrototype()"函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数:子类型构造函数和父类型构造函数。

在函数内部,第一步是创建超类型原型的一个副本。第二步是为创建的副本添加 "constructor" 属性,从而弥补因重写原型而失去的默认的 "constructor" 属性。最后一步,将新创建的对象(即副本)赋值给子类型的原型。这样,我们就可以用调用 "inheritPrototype()"函数的语句,去替换前面例子中为子类型原型赋值的语句了("Teacher.prototype = new Person();")。

对于这个寄生组合式继承的例子,对象关系图如下:

总结

本文介绍了JavaScirpt中的 几种常用继承方式,我们可以通过构造函数实现继承,也可以直接基于现有的对象来实现继承。

无论哪种继承的实现,本质上都是通过JavaScript中的原型特性,结合原型链的搜索实现继承。

与其说"JavaScript是一种面向对象的语言",更恰当的可以说"JavaScript是一种基于对象的语言"。

通过了这些介绍,相信你一定对JavaScript的继承有了一个比较清楚的认识了。

 

posted @ 2015-11-16 10:13  田小计划  阅读(1798)  评论(4编辑  收藏
Fork me on GitHub