ES5和ES6继承

深碍√TFBOYSˉ_ 2022-04-24 15:14 317阅读 0赞

ES5常用七种继承方案和ES6的类继承，有八种继承方案。

**ES5：**

原型链继承、借用构造函数继承、组合继承、  
原型式继承、寄生式继承、寄生组合式继承、  
混入方式继承多个对象

**ES6：**

类继承extends

**1.原型链继承**

原型链继承就是SuperType的原型指向SuperType的实例，那么就可以继承SuperType原型链上方法。

继承的本质就是复制，即重写原型对象，代之以一个新类型的实例。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]  
原型链方案存在的缺点：多个实例对引用类型的操作会被篡改。

function SuperType(){
      this.colors = ["red", "blue", "green"];
    }
    function SubType(){}
    
    SubType.prototype = new SuperType();
    
    var instance1 = new SubType();
    instance1.colors.push("black");
    alert(instance1.colors); //"red,blue,green,black"
    
    var instance2 = new SubType(); 
    alert(instance2.colors); //"red,blue,green,black"

**2.借用构造函数继承**

使用父类的构造函数来增强子类实例，等同于复制父类的实例给子类（不使用原型）

function  SuperType(){
        this.color=["red","green","blue"];
    }
    function  SubType(){
        //继承自SuperType
        SuperType.call(this);
    }
    var instance1 = new SubType();
    instance1.color.push("black");
    alert(instance1.color);//"red,green,blue,black"
    
    var instance2 = new SubType();
    alert(instance2.color);//"red,green,blue"

核心代码是SuperType.call(this)，创建子类实例时调用SuperType构造函数，于是SubType的每个实例都会将SuperType中的属性复制一份。

缺点：  
1.只能继承父类的实例属性和方法，不能继承原型属性/方法  
2.无法实现复用，每个子类都有父类实例函数的副本，影响性能

**下面我们介绍下SuperType.call(this)的意思**

我们需要了解：  
1.函数的调用模式  
2.this

**函数的调用模式**

1.
    var name = 'qianlong';
    var showName = function () {
      console.log(this.name);
      console.log(this === window);
    };
    
    showName();   //qianlong true
    
    2.
    var name = 'qianlong';
    var showName = function () {
      console.log(this.name);
      console.log(this === window);
    };
    
    showName.call();   //qianlong true
    
    3.
    var name = 'qianlong';
    var showName = function () {
      console.log(this.name);
      console.log(this === window);
    };
    
    showName.call(undefined);   //qianlong true
    showName.call(null);   //qianlong true
    showName.call({});   //undefined false

得出结论：  
普通的函数调用和showName.call()形式得到结果都是一样的，函数内的this指向的是window对象（当然这是在浏览器以及非严格模式下），如果而当第一个参数不为空或者undefined以及null的时候，这个时候函数内部的this就是指向传进来的第一个参数。

**new中this指的是什么呢**

var Person = function () {
      this.name = 'qianlong';
      this.sex = 'boy';
      console.log(this);
    };
    
    var p1 = new Person();

你发现了啥？ 使用new来调用函数的时候，内部的this就是指向，最终生成的那个对象.

此时，我们再看代码：

call 方法就是把目标方法绑定参数对象去执行。SuperType.call(this) 注意这里的this就是SubType实例，此时也就是相当于执行 SubType实例.SuperType().

参考文章：[https://segmentfault.com/q/1010000007648841][https_segmentfault.com_q_1010000007648841]

**3.组合继承**

组合上述两种方法就是组合继承。用原型链实现对原型属性和方法的继承，用借用构造函数技术来实现实例属性的继承。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

缺点:  
1.第一次调用SuperType()：给SubType.prototype写入两个属性name，color。  
2.第二次调用SuperType()：给instance1写入两个属性name，color。

实例对象instance1上的两个属性就屏蔽了其原型对象SubType.prototype的两个同名属性。所以，组合模式的缺点就是在使用子类创建实例对象时，其原型中会存在两份相同的属性/方法。

**4.**

**5.**

**6.**

**7.**

**8.ES6类继承extends**

extends关键字主要用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。其中constructor表示构造函数，一个类中只能有一个构造函数，有多个会报出SyntaxError错误,如果没有显式指定构造方法，则会添加默认的 constructor方法，使用例子如下。

class Rectangle {
        // constructor
        constructor(height, width) {
            this.height = height;
            this.width = width;
        }
        
        // Getter
        get area() {
            return this.calcArea()
        }
        
        // Method
        calcArea() {
            return this.height * this.width;
        }
    }
    
    const rectangle = new Rectangle(10, 20);
    console.log(rectangle.area);
    // 输出 200
    
    -----------------------------------------------------------------
    // 继承
    class Square extends Rectangle {
    
      constructor(length) {
        super(length, length);
        
        // 如果子类中存在构造函数，则需要在使用“this”之前首先调用 super()。
        this.name = 'Square';
      }
    
      get area() {
        return this.height * this.width;
      }
    }
    
    const square = new Square(10);
    console.log(square.area);
    // 输出 100

extends继承的核心代码如下，其实现和上述的寄生组合式继承方式一样

function _inherits(subType, superType) {
      
        // 创建对象，创建父类原型的一个副本
        // 增强对象，弥补因重写原型而失去的默认的constructor 属性
        // 指定对象，将新创建的对象赋值给子类的原型
        subType.prototype = Object.create(superType && superType.prototype, {
            constructor: {
                value: subType,
                enumerable: false,
                writable: true,
                configurable: true
            }
        });
        
        if (superType) {
            Object.setPrototypeOf 
                ? Object.setPrototypeOf(subType, superType) 
                : subType.__proto__ = superType;
        }
    }

更多详细可以参考文章：  
[https://juejin.im/post/5bcb2e295188255c55472db0][https_juejin.im_post_5bcb2e295188255c55472db0]  
[https://www.cnblogs.com/annika/p/9073572.html][https_www.cnblogs.com_annika_p_9073572.html]  
[https://segmentfault.com/a/1190000003973606][https_segmentfault.com_a_1190000003973606]

[https://segmentfault.com/a/1190000015727237\#articleHeader10][https_segmentfault.com_a_1190000015727237_articleHeader10]  
[https://segmentfault.com/a/1190000015216289][https_segmentfault.com_a_1190000015216289]  
[https://segmentfault.com/a/1190000014476341][https_segmentfault.com_a_1190000014476341]  
[http://keenwon.com/1524.html][http_keenwon.com_1524.html]  
[https://github.com/noahlam/articles/blob/master/JS中的原型对象.md][https_github.com_noahlam_articles_blob_master_JS_.md]  
[https://www.jianshu.com/p/342966fdf816][https_www.jianshu.com_p_342966fdf816]  
[https://juejin.im/entry/5bbf51015188255c3a2d6965][https_juejin.im_entry_5bbf51015188255c3a2d6965]  
[https://juejin.im/post/5bd7f8ed5188252a784d2201\#comment][https_juejin.im_post_5bd7f8ed5188252a784d2201_comment]  
[https://zhuanlan.zhihu.com/p/32502909][https_zhuanlan.zhihu.com_p_32502909]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220212/e9b85005717e462293798a943552b268.png
[https_segmentfault.com_q_1010000007648841]: https://segmentfault.com/q/1010000007648841
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220212/d7a3de5e4a9a471fb9a683b0d7d4e6c6.png
[https_juejin.im_post_5bcb2e295188255c55472db0]: https://juejin.im/post/5bcb2e295188255c55472db0
[https_www.cnblogs.com_annika_p_9073572.html]: https://www.cnblogs.com/annika/p/9073572.html
[https_segmentfault.com_a_1190000003973606]: https://segmentfault.com/a/1190000003973606
[https_segmentfault.com_a_1190000015727237_articleHeader10]: https://segmentfault.com/a/1190000015727237#articleHeader10
[https_segmentfault.com_a_1190000015216289]: https://segmentfault.com/a/1190000015216289
[https_segmentfault.com_a_1190000014476341]: https://segmentfault.com/a/1190000014476341
[http_keenwon.com_1524.html]: http://keenwon.com/1524.html
[https_github.com_noahlam_articles_blob_master_JS_.md]: https://github.com/noahlam/articles/blob/master/JS%E4%B8%AD%E7%9A%84%E5%8E%9F%E5%9E%8B%E5%AF%B9%E8%B1%A1.md
[https_www.jianshu.com_p_342966fdf816]: https://www.jianshu.com/p/342966fdf816
[https_juejin.im_entry_5bbf51015188255c3a2d6965]: https://juejin.im/entry/5bbf51015188255c3a2d6965
[https_juejin.im_post_5bd7f8ed5188252a784d2201_comment]: https://juejin.im/post/5bd7f8ed5188252a784d2201#comment
[https_zhuanlan.zhihu.com_p_32502909]: https://zhuanlan.zhihu.com/p/32502909