JavaScript原型链

随记：JavaScript原型链

前言

小编学习前端的随记，个人理解，欢迎大佬纠错

正文

在认识JS原型链之前我们先认识几个概念：显示原型、原型对象、实例对象、对象原型(隐式原型)。

显示原型

所有概念都出自于函数对象中，而函数有许多的属性，其中就有这么一个特殊的属性叫显示原型：prototype。

原型对象

javascript 复制代码

function Person(){}
console.log( Person.prototype );

控制台输出

javascript 复制代码

{
    constructor: ƒ Person(),
    __proto__: {
        constructor: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),
        isPrototypeOf: ƒ isPrototypeOf(),
        propertyIsEnumerable: ƒ propertyIsEnumerable(),
        toLocaleString: ƒ toLocaleString(),
        toString: ƒ toString(),
        valueOf: ƒ valueOf()
    }
}

上面这个对象，就是大家常说的原型对象。

可以看到，原型对象有⼀个自有属性constructor，这个属性指向该函数。这是形成原型链的一步。

实例对象

javascript 复制代码

// 1. 构造函数
function Person(name) {
    this.name = name; // 每个实例独有的属性
}

// 2. 创建"实例对象"
const p1 = new Person("张三");

console.log(p1)

控制台输出

javascript 复制代码

{"name":"张三"}

通过new关键字创建的对象，就叫做实例对象。

可以看到new出来的p1对象身上继承了其原Person对象的name属性。它可以有自己的属性和方法，也包括继承而来的属性和方法。

对象原型(隐式原型）

javascript 复制代码

// 1. 构造函数
function Person(name) {
    this.name = name; // 每个实例独有的属性
}

// 2. 创建"实例对象"
const p1 = new Person("张三");

// --- 验证关系 ---

// 实例的"对象原型" 指向 构造函数的"原型对象"
console.log(p1.__proto__ === Person.prototype); // true

对象原型 也可以叫做隐式原型，以下我们都叫做隐式原型。

是实例对象的一个属性------__proto__。注意：这里每个都是两个下划线 。它是的作用是通过原型链来使用Person.prototype中的函数方法。

那么它们有什么作用呢？

我们可以把原型对象 Person.protoype比作一个开源项目，而它的作者就是构造函数 Person。相当于作者把自己的项目------构造函数 ，进行了开源，其中包括项目中的所有属性和方法。那么只要是这个作者的粉丝------实例对象 person ，都可以使用这个项目。

注意：new关键字只能继承构造函数的属性，而构造函数中的函数方法 ，是通过__proto__来实现的。

原型链

了解了上述四个概念之后，那么接下来就是原型链的一个关系图。

下面来解释一下

作者：构造函数Person
constructor：它是Person.prototype的一个属性，指回该函数本身。
粉丝：person是由Person new出来的实例对象，它继承了Person所有的属性------开源项目的属性。
开源项目的方法：原型对象Person.prototype，存放着Person的函数方法。
__proto__：当person想使用Person中的函数方法时，就会通过隐式原型__proto__顺着原型链指向Person.prototype来使用其方法。
而在JavaScript中"万物皆对象"。Person.prototype本身也是一个存在属性和方法的对象，它也会有__proto__的属性，并且会向上查找到内置对象，默认是由Object构造函数的prototype属性来创建的。但是原型链终有末端，内置对象最终指向null。此处的Object是JavaScript自带的默认构造函数，它保证了所有函数的默认属性和方法。

就此，原型链搭建完成。

为什么叫"链"？

先看 person 自己有没有？没有。
顺着 person.__proto__ 找到 Person.prototype，有没有？没有。
顺着 Person.prototype.__proto__ 找到 Object.prototype，有没有？
如果还没找到，返回 undefined。
这种层层递进的查找关系，才是"链"的精髓。

到这，你已经理解了图中的上半部分------原型链的大半部分，已足够日常使用。下半部分是扩展内容，大家可以去自行搜索了解一下。

总结

每个函数都有一个 prototype（显式原型），指向它的原型对象。
每个对象都有一个 __proto__（隐式原型），指向创建它的构造函数的 prototype。
原型链 就是由 __proto__ 串联起来的查找路径。
Object.prototype.__proto__ === null 是原型链的终点。