js原型和原型链

参考：https://juejin.cn/post/6844903567375990791
   https://juejin.cn/post/6844903797039300615#heading-2

构造函数与原型

与大部分面向对象语言不同，JavaScript中并没有引入类（class）的概念，但JavaScript仍然大量的使用了对象，为了保证对象之间的联系，JavaScript引入了原型和原型链的概念。

JavaScript通过构造函数来创建实例。

function Dog(name, color) {
    this.name = name
    this.color = color
    this.bark = () => {
        console.log('wangwang~')
    }
}

const dog1 = new Dog('dog1', 'black')
const dog2 = new Dog('dog2', 'white')

上述代码就是声明一个构造函数，并通过构造函数创建实例的过程，这样看起来似乎有点面向对象的样子了，但是实际上这种方法存在一个很大的问题。

在上述的代码中，有两个实例被创建，他们有自己的名字、颜色，但他们的bark方法是一样的，而通过构造函数创建实例的时候，每创建一个实例，都需要重新创建这个方法，再把它添加到新的实例中。这无疑造成了很大的浪费，既然实例的方法都是一样的，为什么不把这个方法单独放到一个地方，并让所有实例都可以访问呢。

prototype原型

原型指的就是一个对象，实例“继承”那个对象的属性。在原型上定义的属性，通过“继承”，实例也拥有了这个属性。“继承”这个行为是在new操作符内部实现的。

原型和构造函数的关系就是，构造函数内部有一个名为prototype的属性，通过这个属性就能访问到原型。

Person就是构造函数，Person.prototype就是原型。

instance实例

有了构造函数，我们就可以在原型上创建可以“继承”的属性，并通过new操作符创建实例。

比方说Person，我们要创建一个person实例，那么使用new操作符就可以实现，并通过instanceof来检查他们之间的关系。

我们在原型上定义一个属性，那么实例上也就可以“继承”这个属性：

proto隐式原型

实例可以通过_proto_访问到原型

所以，这两者是等价的

constructer构造函数

既然构造函数能通过prototype访问到原型，那原型也应该能访问到构造函数，这就是constructor。

因此，两者的关系应该是这样的

ps：
注意这里的constructor是原型中的一个属性，Constructor才是指真正的构造函数，注意区分大小写。

实例、构造函数、原型直接的关系

如果实例想要访问构造函数，应当是

没有从实例直接访问到构造函数的属性和方法

实例与原型是通过_proto_访问

在读取一个实例的属性的过程中，如果属性在该实例中没有找到，那就会循着_proto_指定的原型上去找，如果还找不到，就会试着寻找原型的原型。

原型链

原型同样也可以通过_proto_访问到原型的原型，比方说这里有个构造函数Person然后“继承”前者的有一个构造函数People，然后new People得到实例p。

当访问p中的一个非自由属性的时候，就会通过_proto_作为桥梁连接起来的一系列原型、原型的原型、原型的原型的原型直到Object构造函数为止

这个搜索过程中形成的链状关系就是原型链。

如下图↓

原型链搜索搜到 null 为止，搜不到那访问的这个属性就是不存在的：