深入理解原型链与继承

曾经终败给现在 2023-01-20 09:38 238阅读 0赞

## **前言** ##

JavaScript是一门面向对象的语言，所有的对象都从原型继承属性和方法，那么什么是原型？对象与对象之间如何实现继承？

本文就带大家来深入理解下JavaScript中的原型，欢迎各位感兴趣的开发者阅读本文。

## 原理解析 ##

接下来我们来逐步分析下原型与对象之间的关系。

**原型对象**

我们使用function来创建函数时，内存中会创建一个包含prototype属性的对象，这个属性指向的是函数的**原型对象(Person的原型对象）**，如下

function Person() {
        
    }
    Person.prototype // {constructor: Person(), __proto__}

上述代码中我们创建了一个名为Person的函数：

*  prototype属性指向的就是Person的原型对象（每个除null外的JS对象在创建的时候都会关联到另一个对象，这个关联的对象就是原型）
 *  每个对象都会从原型“继承”属性
 *  原型对象里包含`constructor`与`__proto__`属性。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70][]

画个图来描述下`Person`与`prototype`之间的关系

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1][]

> 用new运算符调用的函数便为**构造函数**，建议构造函数命名时将首字母大写。

也就是没创建一个对象，就会有一个protitype属性的对象，而prototype属性的对象指向就是原型对象。

**函数实例与原型对象的关系**

上个章节我们捋清了**构造函数**与**原型对象**的关系，接下我们来看下**函数实例**与**原型对象**之间的关系。

用运算符new将上一节创建的Person函数进行实例化，得到person实例，代码如下：

// 实例化对象
    const person = new Persion();

在上个章节中，我们知道原型对象有2个属性，其中`__proto__`是每一个除null外的JavaScript对象都具有的一个属性，它指向该对象构造函数的原型对象。

接下来，我们来证明下`person.__proto__`是否和`Persion.prototype`相等，代码如下：

function Person() {
        
    }
    const person = new Persion();
    console.log("函数实例的__proto__指针指向构造函数的原型对象: ", person.__proto__ === Person.prototype);

执行结果如下：

![20210512100036457.png][]

> 除了使用`__proto__`来访问原型对象，我们还可以使用Object.getPrototypeOf()来获取。

证明出他们相等后，结合构造函数与原型对象可知他们三个之间的关系，如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 2][]

>  当我们实例化一个对象时，也会为这个实例创建一个属性\_proto\_,这个属性是一个指针，它指向构造函数的原型对象。
> 
> 由于同一个构造函数创建的所有实例对象的`__proto__`属性都是指向其构造函数的原型对象，因此所有的实例对象都会共享构造函数原型对象上的属性和方法，因此，一旦原型对象上的属性或方法发生改变，所有的实例对象都会受到影响。

思考：既然每个除null外JS对象都有一个属性\_\_proto\_\_属性，那么Person也是对象，它也包含了`__proto__`属性，那么它指向哪里？

答案很明显，和我们上面说的一样：`__proto__`指向构造函数的原型对象。

我们举个例子证明下：

function Person() {}
    Person.__proto__ === Person.constructor.prototype // true

上述代码使用了constructor属性，它指向该对象的构造函数，下个章节我们详细讲解：

如下：

![20210513173420809.png][]

**原型对象与构造函数的关系**

上个章节我们分析了原型对象中`__proto__`的指向，接下来我们来分析下`constructor`的指向。每个原型对象都有一个`constructor`属性，它指向该对象的构造函数。

接下来，我们来证明下`Person.prototype.constructor`是否和`Person`相等，代码如下：

function Person() {
    
    }
    
    const person = new Person();
    console.log("原型对象与构造函数相等: ", Person.prototype.constructor === Person);

执行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 3][]

证明出他们相等后，我们结合构造函数、函数实例、原型对象可知他们四个之间的关系，如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 4][]

> 获取对象原型，除了访问它的prototype外，我们还可以使用Object.getPrototypeOf()来获取。

**实例属性的读取顺序**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70]: /images/20221021/9c01e8206fa24b45b1978191f5b275b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 1]: /images/20221021/32888394a69c48dcbaa806ec8086be81.png
[20210512100036457.png]: /images/20221021/7df742e700a74d388a45685f8ee3158e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 2]: /images/20221021/5f7f465d64e34d348b801b987b714aaf.png
[20210513173420809.png]: /images/20221021/7ac09568ecab4821b5e2ba7e6c998acb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 3]: /images/20221021/e7601b67c9704ac68576df93ae30f7b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDU1MjAw_size_16_color_FFFFFF_t_70 4]: /images/20221021/82f8352786dd4544b6478810775949c5.png