JavaScript原型链继承与盗用构造函数继承

大熊G

发布于 2022-11-14 08:46:46

44100

代码可运行

文章被收录于专栏：大熊G的前端分享大熊G的前端分享

运行总次数：0

代码可运行

theme: channing-cyan

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

昨天我们讲解了原型和原型链，今天我们说一下继承，顺便再重温一下原型链

什么是继承

继承这个词比较容易理解，很多东西我们没有，但是我们的父亲有，我们就可以拿我们父亲的来用。这个就是继承。我们直接上干货。

原型链继承

原型链继承是js中的主要继承方式，它的基本思想就是通过原型继承多个引用类型的属性和方法。

// 原型链
     function SuperType() {
        this.property = true;
    }
    SuperType.prototype.getSuperValue = function () {
        return this.property;
    };

    function SubType() {
        this.subproperty = false;
    }
    //继承SuperType
    SubType.prototype = new SuperType();
    SubType.prototype.getSubValue = function () {
        return this.subproperty;
    };
    let instance = new SubType();
    console.log(instance.getSuperValue()); // true

以上代码定义了俩个类型 SuperType和SubType，这里SubType就是继承了SuperType。这个赋值重新更改了SUbType的最初原型，替换成了SuperType实例。这样意味着SuperType实例可以访问所有的属性和方法也存在与SubType.protoype。

这样一来，SubType 的实例不仅能从 SuperType 的实例中继承属性和方法，而且还与 SuperType 的原型挂上了钩。于是 instance（通过内部的Prototype）指向SubType.prototype，而 SubType.prototype（作为 SuperType 的实例又通过内部的Prototype）指向 SuperType.prototype。所有输出的是true。

原型链的搜索机制就是在读取实例上的属性时，首先在自身的实例上进行搜索，如果没找到，就会通过继承的方式继续搜索，搜索是向上的。对于属性和方法一直会持续到原型链末端

原型链虽然是比较强大的继承实现工具，但是它里面所有的引用值都是实例间共享的，而且子类不能向父类传参，一般原型链也不会被单独使用，我们可以通过盗用构造函数配合来解决这些问题。

盗用构造函数

盗用构造函数有时候也被一些人叫做“对象伪装”或“经典继承”。这个思路很简单，在字类构造函数中调用父类构造函数。我们可以用.call()和.apply()将父类构造函数引入子类函数。

 //盗用构造函数
    function SuperType() {
        this.names = ["jackson", "bear"];
    }

    function SubType() {
        // 继承 SuperType
        SuperType.call(this);
    }
    let instance1 = new SubType();
    instance1.names.push("daxiong");
    console.log(instance1.names); // ["jackson", "bear", "daxiong"]
    let instance2 = new SubType();
    console.log(instance2.names); // ["jackson", "bear"]

上面的代码就是盗用构造函数的调用，通过使用call()（也可以使用apply())，SuperType构造函数在为SubType的实例创建的新对象执行后，相当于新的SubType对象运行了SuperType()函数中的所有初始化代码。每个实例都会有自己的names属性。

我们再说一下传递参数

 //盗用构造函数传参
    function SuperType(name) {
        this.name = name;
    }

    function SubType() {
        // 继承 SuperType 并传参
        SuperType.call(this, "Jackson");
        // 实例属性
        this.age = 22;
    }
    let instance = new SubType();
    console.log(instance.name); // "Jackson";
    console.log(instance.age); // 22