继承(转阮一峰)

2018-04-21  本文已影响70人  我向你奔

现在有一个"动物"对象的构造函数

function Animal() {
    this.species = "动物"
}

还有一个"猫"对象的构造函数

function Cat(name, color) {
    this.name = name
    this.color = color
}

怎样才能使"猫"继承"动物"呢?

构造函数绑定

使用call或apply方法,将父对象的构造函数绑定在子对象上

function Cat(name, color) {
    Animal.call(this, arguments)
    this.name = name
    this.color = color
}

var cat1 = new Cat("dog", "white");
console.log(cat1)
prototype模式

如果"猫"的prototype对象,指向一个Animal的实例,那么所有"猫"的实例,就能继承Animal了

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

var cat1 = new Cat("dog", "white");
console.log(cat1.species)      // 动物

代码的第一行,我们将Cat的prototype对象指向一个Animal的实例,它相当于完全删除了prototype 对象原先的值,然后赋予一个新值。

第二行是任何一个prototype对象都有一个constructor属性,指向它的构造函数。如果没有"Cat.prototype = new Animal();"这一行,Cat.prototype.constructor是指向Cat的;加了这一行以后,Cat.prototype.constructor指向Animal。

更重要的是,每一个实例也有一个constructor属性,默认调用prototype对象的constructor属性。因此,在运行"Cat.prototype = new Animal();"这一行之后,cat1.constructor也指向Animal。这显然会导致继承链的紊乱(cat1明明是用构造函数Cat生成的),因此我们必须手动纠正,将Cat.prototype对象的constructor值改为Cat。这就是第二行的意思。

即如果替换了prototype对象,那么,下一步必然是为新的prototype对象加上constructor属性,并将这个属性指回原来的构造函数。

o.prototype = {}
o.prototype.constructor = o
直接继承prototype

由于Animal对象中,不变的属性都可以直接写入Animal.prototype。所以,我们也可以让Cat()跳过 Animal(),直接继承Animal.prototype。

我们先将Animal对象改写:

function Animal() {}
Animal.prototype.species = "动物";

然后,将Cat的prototype对象,然后指向Animal的prototype对象,这样就完成了继承。

Cat.prototype = Animal.prototype;
Cat.prototype.constructor = Cat;

var cat1 = new Cat("大毛","黄色");
alert(cat1.species);    // 动物

与前一种方法相比,这样做的优点是效率比较高(不用执行和建立Animal的实例了),比较省内存。缺点是 Cat.prototype和Animal.prototype现在指向了同一个对象,那么任何对Cat.prototype的修改,都会反映到Animal.prototype。

所以,上面这一段代码其实是有问题的。请看第二行

Cat.prototype.constructor = Cat;

这一句实际上把Animal.prototype对象的constructor属性也改掉了!

alert(Animal.prototype.constructor);    // Cat
利用空对象作为中介
var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat;

F是空对象,所以几乎不占内存。这时,修改Cat的prototype对象,就不会影响到Animal的prototype对象。

alert(Animal.prototype.constructor);   // Animal

我们将上面的方法,封装成一个函数,便于使用。

function extend(Child, Parent) {
    var F = function(){};
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;
}

extend(Cat, Animal);
var cat1 = new Cat("大毛","黄色");
alert(cat1.species); // 动物

函数体最后一行

Child.uber = Parent.prototype;

意思是为子对象设一个uber属性,这个属性直接指向父对象的prototype属性。(uber是一个德语词,意思是"向上"、"上一层"。)这等于在子对象上打开一条通道,可以直接调用父对象的方法。这一行放在这里,只是为了实现继承的完备性,纯属备用性质。

借用构造函数

只需要在子类构造函数内部使用apply或者call来调用父类的函数即可在实现属性继承的同时,又能传递参数,又能让实例不互相影响。

function Super(){ 
    this.flag = true; 
} 
function Sub(){ 
    Super.call(this)    //如果父类可以需要接收参数,这里也可以直接传递 
} 
var obj = new Sub(); 
obj.flag = flase; 
var obj_2 = new Sub(); 
console.log(obj.flag)    //依然是true,不会相互影响
ES6继承

其内部其实也是ES5组合继承的方式,通过call借用构造函数,在A类构造函数中调用相关属性,再用原型链的连接实现方法的继承。

class B extends A {
   constructor() {
      return A.call(this);  //继承属性
   }
}
A.prototype = new B;  //继承方法  

ES6封装了class,extends关键字来实现继承,内部的实现原理其实依然是基于上面所讲的原型链。

class ColorPoint extends Point { 
    constructor(x, y, color) { 
        super(x, y);   // 等同于parent.constructor(x, y) 
        this.color = color; 
    }
    toString() { 
        return this.color + ' ' + super.toString();  // 等同于parent.toString() 
    } 
}

通过constructor来定义构造函数,用super调用父类的属性方法。ES6中Class充当了ES5中,构造函数在继承实现过程中的作用。同样有原型属性prototype,以及在ES5中用来指向构造函数原型的_proto_属性,这个属性在ES6中的指向有一些主动的修改。

一个继承语句同时存在两条继承链:一条实现属性继承,一条实现方法继承。

class A extends B {}
A.__proto__ === B;  //继承属性
A.prototype.__proto__ === B.prototype;  //继承方法

ES6的子类的_proto是父类,子类的原型的_proto是父类的原型。第二条继承链理解起来没有什么问题,对应到ES5中的 A.prototype = new B; A.prototype 作为B构造的实例,指向构造函数B的原型B.prototype,

但是在ES5中A._proto_ 是指向 Function.prototype的,因为每一个构造函数其实都是Function这个对象构造的,ES6中子类的_proto_指向父类可以实现属性的继承,在ES5中在没有用借用继承的时候由于父类属性被子类原型继承,所有的子类实例实际上都是同一个属性引用。

在ES6中实现了子类继承父类属性,在构造实例的时候会直接拿到子类的属性,不需要查找到原型属性上面去,ES6新的静态方法和静态属性(只能在构造函数上访问)也是通过这样类的直接继承来实现,至于普通复用方法还是放到原型链上,道理和实现和ES5是一样的。

此外我认为这里修改A._proto_的指向是有意区分ES6中继承和实例化,同时建立子类和父类直接的关系,ES5的子类的构造函数通过子类的原型与父类的构造函数连接,不存在直接的关系;

可以这么说,在ES5继承和构造实例,ES6构造实例的时候可以理解_proto_ 原型指针是用来指向构造函数的原型的,但是在ES6继承中,_proto_指继承自哪个类或原型,在A继承B之后,构造一个实例 var obj = new A; 会发现它所有的属性指向都是和ES5一致的。

上一篇下一篇

猜你喜欢

热点阅读