图文并茂🌈聊聊原型与原型链

蓝本与蓝本链做为JavaScript的两个核心理念习题，其必要性不必多说了。但我注意到许多文件格式讲义或者书柜，对蓝本与蓝本链的叙述虽多但并非很明晰，对个人真的不太难剖析和认知。

这首诗主要就是透过要量的形式去把蓝本与蓝本链的此基础文本给叙述确切，OK，接下去就已经开始吧~

蓝本

一般来说，他们写两个缺省都是这种：

function Person () { //… } 拷贝标识符

他们无此那个缺省里写任何人标识符，当我们在应用程序控制面板透过console.dir列印出那个缺省时，能看见它被加进了两个特性prototype。

缺省Person透过prototype特性就能出访到它的蓝本第一类，Person.prototype是蓝本第一类

当他们须要透过Person缺省建立两个示例时，一般来说是那么写：

function Person () { //… } const person = new Person() // 透过new操作符建立两个示例 console.log(person instanceof Person) // true 拷贝标识符

那么person示例能出访Person缺省的蓝本第一类吗? 显然是能的。

透过new建立的示例上有两个__proto__特性（注意⚠前后是两个下划线）能直接出访蓝本第一类Person.prototype。一般来说，他们将__proto__特性称为隐式蓝本特性。

如下图所示

在蓝本上定义的特性和方法，在示例上能够继承这些特性和方法。

function Person () { //… } Person.prototype.sayHi = Hi const person = new Person() // 通过new操作符建立两个示例 console.log(person.sayHi) // Hi console.log(person.__proto__ === Person.prototype) // true 拷贝标识符

此外，如果蓝本第一类Person.prototype须要出访它原来的缺省能透过constructor特性，如下图所示

function Person () { //…} Person.prototype.sayHi =Hi const person = new Person() // 透过new操作符建立两个示例 console.log(person.sayHi) // Hi console.log(person.__proto__ === Person.prototype)// true console.log(Person.prototype.constructor === Person) // true 拷贝标识符

蓝本链

当他们须要读取示例上的特性时，JS会先在当前示例上查找是否有该特性，如果没有则透过__proto__出访蓝本去查找是否有该特性，如果有的话就能直接使用，没有的话，就会再透过__proto__去出访蓝本的蓝本，因为蓝本也是两个第一类嘛。

Person.prototype能看做是Object的示例，这种的话Person.prototype透过__proto__出访的是Object的蓝本Object.prototype，Object.prototype也有两个__proto__特性，只不过这次不套娃了，它指向的是null。

总结一下：当他们出访两个示例（例如person）的特性或方法时，会先在当前示例上查找，若查找不到，会到蓝本上查找，若蓝本上查找不到，就到蓝本的蓝本上查找，若还是查找不到就指向null。

如下图所示：

上面提到的：Person.prototype能看做是Object的示例。

其实他们在JS中建立的第一类都是Object的示例，他们都会继承Object蓝本第一类上的特性和方法，并且建立的第一类.__proto__ === Object.prototype

const obj = {} console.log(obj.__proto__ === Object.prototype) // true console.log(obj.toString) // ƒ toString() { [native code] }，toString是继承Object.prototype上的方法 const obj2 = new Object() console.log(obj2.__proto__ ===Object.prototype) // true console.log(obj2.toString) // ƒ toString() { [native code] } 拷贝标识符

既然Person.prototype能看做是Object的示例。那么就能在Object处引出两个箭头指向Person.prototype，表示透过new建立两个示例第一类。

最后，再把节点和连线调整一下，最终得到的图如下所示

下面来看一段标识符来加深一下对上图的认知吧

// 父类：相当于上图中的Person缺省 function Father() { this.property = true} Father.prototype.getFatherValue =function () { return this.property } // 子类：相当于上图中的延伸部分… function Son() { this.sonProperty =false } //继承 Father Son.prototype = new Father() Son.prototype.getSonVaule = function () { return this.sonProperty } var instance = new Son() console.log(instance.getFatherValue()) // true 继承父类Father上的方法 console.log(instance.toString) // ƒ toString() { [native code] } 继承Object蓝本上的方法拷贝标识符

对应的图如下：