JavaScript核心概念输出——原型链

What

原型链是指通过一个个原型对象将对象的继承关系连接起来的链条⛓️。

通俗易懂的讲就是对一个物品通过设计图纸不断溯源，比如有个锤子我找到锤子的设计图纸，然后找到锤子的设计图纸(纸张)的设计图纸，再找到纸张的设计图纸的设计图纸...最终为了防止无限溯源定义了一个结束顶点原子(null)

Why

原型链的设计目的是为了实现继承和属性查找这两个功能。抽象来讲是指通过原型链不断的为物品绑定他的设计图纸从而可以让物品实现链条上所有设计图纸(继承)所具备的功能和属性(属性查找)。

How

在了解如何实现原型链之前，先给出以下这些概念

原型链是为对象服务；
每个对象都有他的隐式属性 $\[Prototype$ ]，通过__proto__或Object.getPrototypeOf()可以访问；
每个函数都有prototype属性指向他的原型对象(这个构造函数构造出来的实例对象的基本结构)
所有原型链的顶层都是null；
原型是指原型对象，每个设计图纸(构造函数)都有其原型对象，也就是通过这个设计图纸设计出的物品所具备的基本结构；
每个对象(都是被某一设计图纸设计)都可以通过__proto__属性去获取他的设计图纸所能设计出的基本结构；
js中万物皆对象；

由以上概念可以得知

原型链的逻辑结构是这样的

object.proto->Object.prototype(具体实例对象的原型链指向构造这个实例对象的构造函数的原型对象)

Object.prototype.proto->null（当构造函数的原型对象是Object.prototype的时候这个原型对象的原型链指向顶端null，防止陷入无限循环）

show code

js 复制代码

function Animal(){};
Animal.prototype.run = function(){
    console.log('i can run');
}
function Dog(){}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.say = function(){
    console.log('i can say wang!');
}

const dog = new Dog();
dog.run(); //expect 'i can run'继承了他的原型链上dog.__proto__.__proto__上的run方法;
dog.say(); //expect 'i can say wang!';

//dog这个实例的设计图纸是Dog构造函数，因此dog的原型链指向设计图纸所能设计的基本结构也就是原型对象(Dog.prototype)
dog.__proto__ == Dog.prototype; // expect true
// dog设计图纸的基本结构的原型链(dog.__proto__.__proto__)指向这个基本结构(是个对象)的构造函数的设计图纸(Object.prototype)
dog.__proto__.__proto__ == Dog.prototype.__proto__ == Object.prototype; // expect true
// 最终Object.prototype这个原型对象的原型链指向了顶层null，不然对象是由对象的构造函数通过设计图纸(原型对象)设计出来，设计图纸又是对象再去找他的构造函数的设计图纸(原型对象)又是对象将会陷入无限循环。
dog.__proto__.__proto__.__proto__ == Object.prototype.__proto__ == null; //expect true