JS--继承的实现方式--详解/实例

简介

说明

        本文介绍JavaScript继承的方式，包括7种方式：

1. 1. 
      
2. 原型链继承。

1. 将父类的实例作为子类的原型。

2. 构造函数继承(使用call)

1. 使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类。

3. 组合继承

1. 调用父类构造函数，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。

4. 实例继承

1. 为父类实例添加新特性，作为子类实例返回。

5. 寄生组合继承

1. 通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点。

6. extends 继承（ES6）

1. 使用ES6的class新特性的extends关键字扩展一个类并继承它的行为

继承简介

        JavaScript的继承本质上都是通过原型链机制实现的扩展。不管是哪种继承方式，都是通过操作父类原型链和子类原型链形成关联关系实现的。

        在实际项目开发中，建议尽量用用ES6的class extends实现，其他实现方式主要是理解背后的原理和思想。

公共代码

要实现继承，那么首先我们得有一个父类，代码如下：

// 定义一个动物类
function Animal (name) {
    // 属性
    this.name = name || 'Animal';

    // 属性
    this.color = [];

    // 实例方法
    this.sleep = function(){
        console.log(this.name + '正在睡觉');
    }
}
// 原型方法
Animal.prototype.eat = function(food) {
    console.log(this.name + '正在吃：' + food);
};

原型链继承

优点

1. 1. 
      
2. 可继承构造函数的属性
3. 可继承父类构造函数的属性
4. 可继承父类原型的属性
   1. 
      

缺点

1. 1. 
      
2. 无法向父类构造函数传参
3. 所有实例共享父类实例的引用属性（对象或者数组）
4. 无法实现多继承
   1. 
      

实例

function Cat() {

}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

// Test Code
let cat = new Cat();
console.log(cat.name);  //cat
cat.eat('fish');        //cat正在吃：fish
cat.sleep();            //cat正在睡觉
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat);    //true

实例：父类的引用属性被共享

function Cat() {

}
Cat.prototype = new Animal();
Cat.prototype.name = 'cat';

// Test Code
let cat1 = new Cat();
let cat2 = new Cat();

cat1.color.push(1);
console.log(cat2.color)

结果

分析

可见，只改了一个子类实例的属性，另一个子类实例的这个属性也被改变。

构造函数继承(使用call)

简介

核心：使用父类的构造函数来增强子类实例，等于是复制父类的实例属性给子类（没用到原型）。

优点

1. 1. 
      
2. 父类的引用属性不会被共享
3. 创建子类实例时，可以向父类传递参数
4. 可以实现多继承（call多个父类对象）
   1. 
      

缺点

• • 
    
• 实例并不是父类的实例，只是子类的实例。
• 不能继承原型属性/方法。（只能继承父类的实例属性/方法）

• 即：函数不能复用。每个子类都有父类实例函数的副本，影响性能。

实例

function Cat(name) {
    Animal.call(this);
    this.name = name || 'Tom';
}

// Test Code
let cat = new Cat();
console.log(cat.name);              //Tom
cat.sleep()                         //Tom正在睡觉
console.log(cat instanceof Cat);    //true
console.log(cat instanceof Animal); //false

组合继承

简介

        将原型链继承和构造函数继承的各自优势组合使用。

        核心：通过调用父类构造函数，继承父类的属性并保留传参的优点，然后通过将父类实例作为子类原型，实现函数复用。

优点

• • 
    
• 可以继承实例属性/方法，也可以继承原型属性/方法。（弥补了方式二的缺陷）
• 不存在引用属性共享问题
• 创建子类实例时，可以向父类传递参数
  • 
    

缺点

1. 内存占用较大。原因：父类构造函数被调用了两次，生成了两份实例。

1. 虽然根据原型链机制，并不会访问到原型对象上的同名属性，但总归是不美。

实例

function Cat(name) {
    Animal.call(this);
    this.name = name || "Tom";
}
Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;

// Test Code
let cat = new Cat();
console.log(cat.name);              //Tom
cat.sleep();                        //Tom正在睡觉
cat.eat('bread');                   //Tom正在吃：bread
console.log(cat instanceof Cat);    //true
console.log(cat instanceof Animal); //true

实例继承

简介

核心：为父类实例添加新特性，作为子类实例返回

优点

1. 不限制调用方式，不管是 new 子类() 还是 子类()，返回的对象具有相同的效果

缺点

1. 1. 
      
2. 实例是父类的实例，不是子类的实例
3. 不支持多继承
   1. 
      

实例

function Cat(name) {
    let instance = new Animal();
    instance.name = name || 'Tom';
    return instance;
}

// Test Code
let cat = new Cat();
console.log(cat.name);              //Tom
cat.sleep();                        //Tom正在睡觉
cat.eat('meat');                    //Tom正在吃：meat
console.log(cat instanceof Cat);    //false
console.log(cat instanceof Animal); //true

寄生组合继承

简介

        核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点。

优点

1. 堪称完美

缺点

1. 实现较为复杂

实例

function Cat(name) {
    Animal.call(this);
    this.name = name || "Tom";
}
(function () {
    // 创建一个没有实例方法的类
    let Super = function () {
    }
    Super.prototype = Animal.prototype;
    // 将实例作为子类的原型
    Cat.prototype = new Super();
})();
// 修复构造函数
Cat.prototype.constructor = Cat;

// Test Code
let cat = new Cat();
console.log(cat.name);              //Tom
cat.sleep();                        //Tom正在睡觉
cat.eat('bread');                   //Tom正在吃：bread
console.log(cat instanceof Cat);    //true
console.log(cat instanceof Animal); //true

extends 继承（ES6）

简介

        ES6中新增了class特性。这个class特性和Java中的类差不多，支持通过extends关键字继承。

优点

1. 完美！

缺点

1. ES6才支持。旧浏览器不支持。

实例

首先，需要使用class改写父类

class Animal {
    constructor (name, food) {
        this.name = name || "Animal";
        this.food = food;
        this.sleep = () => console.log(this.name + '正在睡觉');
    }
    eat(){
        // console.log(this.name + '正在吃：' + this.food);
        return this.name + '正在吃：' + this.food;
    }
}

让Cat继承父类

class Cat extends Animal {
    constructor (name, food, ability){
        super(name, food);
        this.ability = ability;
    }

    extraAbility() {
        console.log("我还可以：" + this.ability)
    }
}

测试

let cat = new Cat('cat', 'fish', 'run');
cat.extraAbility();                 //我还可以：run
console.log(cat.eat());             //cat正在吃：fish
console.log(cat instanceof Cat);    //true
console.log(cat instanceof Animal); //true