原型和原型链

àì夳堔傛蜴生んèń 2022-10-01 05:45 213阅读 0赞

这几天一直在学习js的继承。感觉有了一个比较清晰的认识。不过要想深刻理解，最好的方式就是输出出来。 其实对于这篇来说，懂的人不用看。不懂的人，看了也不会立即理解。不过，仍希望看了之后对于理解有一定的帮助。

### 原型模式 ###

尽管es6提出了class,似乎看起来是类。但是仅仅只是语法糖。实质任然是**函数**。这一点，会在后面进行说明解释。

首先我们需要知道一点，对于js的函数而言。它们都有一个\*\*prototype(原型)\*\*属性。这是一个指针，指向一个对象，这个对象包含实例共享的 属性和方法。默认情况下，所有的原型对象，都会获得一个constructor（构造函数）属性，然而这个属性，它右包含一个指向prototype属性所在函数的指针。大致就是你指向我，我指向你。

function Person(name){
        this.name = name;
    }
    let p1 = new Person("hang");
    console.log(p1);//环境为chrome 
    复制代码

实例，原型对象，构造函数，之间的关系图示(再也不用画图去画图了)

这里补充说明一下，\_\_proto\_\_属性，这并不是js自带的，而是各大浏览器所实现的一个可访问对象原型的属性。在es5中可以使用Object.getprototypeOf(p1)来获取p1的对象原型。js中自带的应该是\[\[prototype\]\]属性 讲到这里，应该大概就可以知道instanceof的原理。

p1 instanceof Person
    //等同于
    Object.getPrototypeOf(p1) === Person.prototype
    复制代码

#### 组合使用构造函数和原型模式 ####

这是认可度比较高的一种做法,即解决引用属性共享，也没有切断原本的构造循环链（我创造的一个词吧...hahaha）,

不过这样的做法有一个缺点，就是constructor属性变成了可枚举的，可以这样做，如果需要的话,可以加上这些

//重设构造函数，只适用于ES5兼容的浏览器
    Object.definePrototype(Person.prototype,"constructor",{
        enumerable: false,
        value: Person
    });
    复制代码

#### 顺便提下new ####

执行new关键字时，大致是以下的步骤

let p1 = new Person("hang");
    //等同于
    let p1 = {};
    p1.__proto__ = Person.prototype;
    Person.call(p1,"hang");
    复制代码

### 原型链 ###

前面我提到过一个属性\_*proto\_*，一个指向原型对象的指针。还记得，刚接触js时，就听过的一句话，**一切皆对象**。那么它的所有的对象都有一个\_\_proto\_\_属性。这样一来，就像一个链条一样，将所有的东西串了起来。这就是原型链。 以上文的实例p1为例

p1.__proto__ ==
    Object.getPrototypeOf(p1) //Person.prototype
    p1.__proto__.proto__ ==
    Object.getPrototypeOf(Object.getPrototypeOf(p1)) //Object.prototype
    p1.__proto__.proto__.__proto__ ==
    Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(p1))) //null
    //p1的原型链大致是这个样子
    // p1 --> Person.prototype --> Object.prototype --> null
    复制代码

回到null类型的定义上来看。红宝书第三版是这样说的`从逻辑的角度来看，null表示一个空对象指针`，这也就是为什么对象的顶层是一个null了。

#### 借用构造函数继承 ####

这种很少使用，只是为后面做铺垫

function SuperType(name){
        this. name = name;
        this.colors = ["red","blue","green"];
    }
    function SubType(name,age){
        //继承SuperType,同时传递参数
        SuperType.call(this,name);
        this.age = age;
    }
    复制代码

借用构造函数的问题，方法都在构造函数中定义，函数无法复用。所以就产生了**组合继承**

#### 组合继承\* ####

组合继承，有时候也叫做伪经典继承，将原型链和借用构造函数技术整合到一块。

组合继承避免原型链(实例共享引用对象)和借用和构造函数的缺陷，融合了它们的优点。但是它也有一个缺点，无论什么情况下，都会调用两次超类型构造函数。好在出现了**寄生组合继承**

#### 寄生组合继承\*\* ####

通过借用构造函数来来继承属性，通过原型链的混成形式形式来继承方法

//寄生组合式继承
    //构造循环链不能断，也不知道这样理解对不对
    function inheritPrototype(subType,superType){
        let prototype = Object.create(superType.prototype);//创建对象
        prototype.constructor = subType;//增强对象
        subType.prototype = prototype;//指定对象
    }
    //
    function SuperType(name){
        this.name = name;
        this.colors = ["red","blue","green"];
    }
    SuperType.prototype.sayName = function(){
        console.log(this.name);
    }
    function SubType(name,age){
        SuperType.call(this,name);
        this.age = age;
    }
    //继承方法
    inheritprototype(SubType,SuperType);
    //如果不用封装的继承函数，可以这样使用
    // SubType.prototype = Object.create(SuperType.prototype);
    // SubType.prototype.constructor = SubType;
    SubType.prototype.sayAge = function(){
        console.log(this.age);
    }
    复制代码

#### class ####

es6产生了class来定义类(原型)，实际上依旧是函数

class SuperType{
        constructor(name){
            this.name = name;
        }
        sayName(){
            console.log(this.name);
        }
    }
    let s1 = new SuperType("Bob");
    typeof SuperType //function 
    
    class SubType extends SuperType{
        constructor(name,age){
            super(name);
            this.age = age;
        }
    }
    let s2 = new SubType("Tony",52);
    复制代码

将以上的代码，通过Babel进行转化，你会发现es5的实现，也是使用的寄生组合继承。

#### 小结 ####

js支持面向对象编程，但不使用类或者接口。对象可以在代码执行过程中创建和增强，具有动态性，而非严格定义的实体。 **原型模式**：使用构造函数的prototype属性来指定那些应该共享的属性和方法。 **组合使用构造函数模式和原型模式**。使用构造函数定义实例属性，使用prototype来定义共享属性和方法。 大致的继承方法： **原型继承**，无法自定义属性。本质是对给定对象的浅复制。 **寄生式继承**，基于某个对象或信息创建一个对象，然后增强对象，最后返回对象。 **组合继承**：原型继承+构造继承。多次调用超类型和构造函数而导致低效率。 **寄生组合式继承**：组合继承上的优化。实现基于类型继承的最有效方式。es6的extends就是这种的语法糖。

参考文献：

javascript高级程序设计（第三版）

[MDN|继承和原型链][MDN]

转载于:https://juejin.im/post/5cc6cf406fb9a031ed20c578

[MDN]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.mozilla.org%2Fzh-CN%2Fdocs%2FWeb%2FJavaScript%2FInheritance_and_the_prototype_chain