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

Bertha 。 2023-10-01 11:03 17阅读 0赞

原文网址：[JS--继承的实现方式--详解/实例\_IT利刃出鞘的博客-CSDN博客][JS--_--_IT_-CSDN]

## 简介 ##

**说明**

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

1.  原型链继承。
    
    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.  可继承构造函数的属性
2.  可继承父类构造函数的属性
3.  可继承父类原型的属性

**缺点**

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

**实例**

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)

结果

![c5b5edaa790849f49638370f9efc4185.png][]

分析

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

## 构造函数继承(使用call) ##

**简介**

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

**优点**

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

**缺点**

*  实例并不是父类的实例，只是子类的实例。
 *  不能继承原型属性/方法。（只能继承父类的实例属性/方法）
    
     *  即：函数不能复用。每个子类都有父类实例函数的副本，影响性能。

**实例**

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.  实例是父类的实例，不是子类的实例
2.  不支持多继承

**实例**

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.  实现较为复杂

**实例**

## 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

## 其他网址 ##

[JavaScript实现继承的几种方式\_刘欢的博客-CSDN博客\_javascript继承方式][JavaScript_-CSDN_javascript]

[JS--_--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/122203246
[c5b5edaa790849f49638370f9efc4185.png]: https://img-blog.csdnimg.cn/c5b5edaa790849f49638370f9efc4185.png
[JavaScript_-CSDN_javascript]: https://blog.csdn.net/github_38851471/article/details/79674090