总结下javascript中的常用的继承

最近不是特别忙，有空沉淀下来，继续去学习和巩固javascript的基础知识，本章谈到的是javascript中常用到的继承方法。

构造函数的继承

构造函数绑定

通过使用apply、call来改变this的指向；将父对象的构造函数绑定到子对象上。
复制代码

function Animal () {
    this.color = 'black';
}

function Dog (name, color) {
    Animal.apply(this, arguments);
    this.name = name;
    this.color = color;
}

var dog = new Dog('lily', 'gray');
console.log(dog.color);   // 输出 gray, 此时子对象继承了父对象的color属性。
复制代码

prototype模式

每个函数对象都有一个原型，即prototype，默认指向为以该函数为构造函数的实例原型。通过将子对象的原型指向一个父对象的实例，来让子对象继承父对象的属性和方法。
复制代码

function Animal () {
    this.color = 'black';
}

function Dog(name) {
    this.name = name;
}

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

var dog = new Dog('lucy');
dog.color = 'yellow';
console.log(dog.color);
复制代码

这里需要注意下Dog.prototype.constructor = Dog; 当我们将Dog的原型指向一个Animal的实例，这时，Dog.prototype.constructor = Animal; 而这时子对象dog实例也具有一个constructor，默认调用的是prototype.constructor的Animal; 而dog是通过Dog来创建的，所以此时我们需要纠正下Dog原型的constructor属性。

子对象直接继承父对象的原型

通过直接继承prototype方式让子对象继承父对象。

function Animal () {
    this.color = 'black';
}
Animal.prototype.eat = function () {
  console.log('i can eat');
};

function Dog(name) {
    this.name = name;
}
        
Dog.prototype = Animal.prototype;
Dog.prototype.constructor = Dog;
var dog = new Dog('lucy');
dog.eat();  // 输出 i can eat
Dog.prototype.eat = function () {
    console.log('I Can eat');
};

var animal = new Animal();
animal.eat(); // 输出 I Can eat
复制代码

这种方式需要留意下，我们改变了Dog原型上的eat方法，但同时也改变了Animal的eat方法，鉴于此，我们又可以用下面这种方法。

利用空对象，作为中间的中介，来实现继承

function Animal () {
    this.color = 'black';
}

Animal.prototype.tailColor = 'black';

function Dog(name) {
    this.name = name;
}

function extendObj(p, c) {
    var F = function () {};
    F.prototype = p.prototype;
    c.prototype = new F();
    c.prototype.constructor = c;
    return c;
}

extendObj(Animal, Dog);
var dog = new Dog();
console.log(dog.tailColor);   // 输出black;
复制代码

拷贝继承

直接通过遍历的方式，将父对象的属性全部拷贝到子对象的属性上来实现继承。

function Animal () {
    this.color = 'black';
}
Animal.prototype.eat = function () {
  console.log('i can eat');
};

Animal.prototype.tailColor = 'black';

function Dog(name) {
    this.name = name;
}

function copyProperty(p, c) {
    var child = c.prototype;
    var parent = p.prototype;
    for (var item in parent){
        child[item] = parent[item];
    }
}
copyProperty(Animal, Dog);
var dog = new Dog('lily');
console.log(dog.tailColor);
复制代码

非构造函数的继承

明天继续