JavaScript中的继承

JavaScript中的继承

以下讨论中，我们以Animal作为父类，Cat作为子类，使Cat继承Animal。

//父类Animal
function Animal(){
    this.species="动物";
}

//子类Cat
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;
}

---

二、prototype模式

如果Cat.prototype对象指向一个Animal实例，那么所有的Cat的实例就能继承Animal了.

代码如下：

/**
*每个构造函数都有一个原型对象(prototype)，这个原型对象是这个函数所有实例的原型（proto）.
*每个原型对象都有一个constructor属性，指向它的构造函数.
*每个实例也有一个constructor属性，默认调用prototype的constructor属性.
*/

//将Cat的原型对象设置为Animal的实例
Cat.prototype=new Animal();

//手动纠正Cat.prototype.constructor , 如果不纠正将指向Animal
Cat.prototype.constructor=Cat;

---

三、直接继承prototype

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

代码如下：

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

//将Cat.prototype指向Animal.prototype，就完成了继承
Cat.prototype=Animal.prototype;

//手动纠正constructor指向
Cat.prototype.constructor=Cat;

---

四、利用空对象作为中介

空对象几乎不占用空间，且这时修改Cat的prototype对象，不会影响Animal的prototype对象.

代码如下：

var F=function(){};
F.prototype=Animal.prototype;

//将原型执行一个空对象
Cat.prototype=new F();

//还是手动修改constructor的指向
Cat.prototype.constructor=Cat;

可以将上面的方法封装成一个函数

function extend(child, parent){
    var F=function(){};
    F.prototype=parent.prototype;
    child.prototype=new F();
    child.prototype.constructor=child;
}

---

总结：继承的方法有多种，核心思想是控制prototype指向，切记纠正constructor的指向 。