让人哭笑不得，拍案惊奇的js一大难点——原型、原型链

前言

又是一年的金三银四，令人头疼的原型、原型链是否成为了你面试路程上的一大难关，今天我们就一起来分析下这个晦涩难懂的知识点。

一、原型

1. 在js中每一个函数都有一个对象类型的属性叫做prototype，该属性在函数创建时由js引擎自动生成，被称作为显示原型。prototype有一个不可枚举的属性constructor，constructor的值为该函数本身。

2. 在js中每一个对象实例都有一个对象类型的属性叫做__proto__，被称作为对象的隐式原型。__proto__的值为生成该对象实例，或者叫做构造该对象实例的构造函数（类）的显示原型(prototype)。

3. js中函数本身也是对象，所以函数同时拥有显示原型(prototype)和隐式原型(__proto__)

注意：在实际开发时我们并不鼓励使用__proto__，因为它并不是ECMA规范中提出来的。

二、函数Foo

1. 函数Foo有一个显示原型对象（prototype），在Foo被创建的时候，由js引擎自动生成。
   Foo.prototype包含了一个不可枚举的属性constructor，constructor的值为函数Foo本身。

function Foo() {}
console.log("Foo的显示原型prototype：", Foo.prototype)

2. 函数对象Foo有一个隐式原型对象（__proto__），在Foo被创建时，被赋值为他的构造函数Function的prototype属性。
   即Foo.__proto__ = Function.prototype

console.log(Foo.__proto__ === Function.prototype);  // ture

三、构造函数Function

1. 函数Function有一个显示原型对象（prototype），在Function被创建的时候，由js引擎自动生成。Function.prototype包含了一个不可枚举的属性constructor，constructor的值为函数Function本身，以及一些其他的属性或方法（如call，apply等）。

2. 函数对象Function有一个隐式原型对象（__proto__），在Function被创建时，被赋值为他的构造函数Function的prototype属性。
   即Function.__proto__ = Function.prototype

console.log(Function.__proto__ === Function.prototype); // true（这一个特例，在js中只有构造函数Function的隐式原型和显示原型相等）

四、构造函数Object

1. 函数Object有一个显示原型对象（prototype），在Object被创建的时候，由js引擎自动生成。Object.prototype包含了一个不可枚举的属性constructor，constructor的值为函数Object本身，以及一些其他的属性或方法（如valOf，isPropertyOf等）。

console.log("Object的显示原型prototype：", Object.prototype)

2. 函数对象Object有一个隐式原型对象（__proto__），在Object被创建时，被赋值为他的构造函数Function的prototype属性。即Object.__proto__ = Function.prototype

console.log(Object.__proto__ === Function.prototype);  // true

五、Foo的实例对象objFoo

const objFoo = new Foo()

对象objFoo有一个隐式原型对象（__proto__），在objFoo被创建时，被赋值为他的构造函数Foo的prototype属性。
即objFoo.__proto__ = Foo.prototype

console.log("objFoo的隐式原型__proto__：", objFoo.__proto__)
console.log(objFoo.__proto__ === Foo.prototype); // true

六、prototype

属性prototype是一个对象。

在不涉及继承的情况下，除了构造函数Object以为的每个构造函数的prototype都是由构造函数Object创建的，

也就是上文中的Foo.prototype.__proto__ = Object.prototype，Function.prototype.__proto__ = Object.prototype。

特别的Object的prototype 是指向null的，即 Object.prototype.__proto__ = null

console.log(Foo.prototype.__proto__ === Object.prototype); // true
console.log(Function.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__ === null); // true

七、原型链

通过以上分析我们可以得出

1. 对象objFoo的隐式原型(__proto__)指向Foo的显示原型(prototype)
2. Foo的显示原型(prototype)的隐式原型(__proto__)指向Object的显示原型(prototype)
3. Object的显示原型(prototype)的隐式原型(proto)指向null

console.log(objFoo.__proto__.__proto__.__proto__ === null); // true

原型链，我觉得更应该叫做隐式原型链，其实就是从一个对象的隐式原型开始，不断的获取隐式原型直到顶端Object的__proto__，也就是null。这个一路向上查找的过程就形成了一个链路，也就是原型链。

所以当一个对象想要获得某个属性的值时，如果对象自身没有该属性，就会沿着原型链一路查找。如果一直到顶端也没有找到就会返回undefined。

八、JS中的名画

结语

以上就是我对原型、原型链的理解，一个出自js小白的学习记录，不对的地方欢迎指正。