JavaScript中的__proto__、prototype和constructor的理解

1. __proto__

首先来说一下__proto__属性，在js中除了null和undefine，其余的数据类型都有这个属性。它的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的那个对象里（p0）继续查找这个属性，如果在p0上也不存在这个属性，则会继续往p0对象的__proto__属性所指向的那个对象（p1）里找，如果仍然没有找到，则继续往上找，直到找到这个属性或者原型链的顶端null为止（根据定义，null 没有原型，并作为这个原型链中的最后一个环节。），如果到了原型链的顶端还是没有找到，则返回undefined，通过__proto__属性将对象连接起来的这条链路就是原型链。我们把一个对象的__proto__属性所指向的对象，叫做这个对象的原型；我们可以修改一个对象的原型来让这个对象拥有某种属性，或者某个方法。

let obj = {}
obj.__proto__.name = 'My name is obj.'
console.log(obj.name) // My name is obj.

这里需要特别注意的是，__proto__这个属性虽然被大多数的浏览器支持，但是其实它仅在ECMAScript 2015 规范中被准确的定义， 目的是为了给这个传统的功能定制一个标准，以确保浏览器之间的兼容性。通过使用__proto__属性来修改一个对象的原型是非常慢且影响性能的一种操作。 所以，现在如果我们想要获取一个对象的原型，推荐使用Object.getPrototypeOf或者Reflect.getPrototypeOf，设置一个对象的原型推荐使用Object.setPrototypeOf或者是Reflect.setPrototypeOf。

2. prototype

接下来我们来说一下prototype属性，我们要记住的是它是函数对象所独有的，只要是能够作为构造器的函数，他们都包含这个属性。也就是说，只要这个函数能够通过使用new关键字来生成一个新的对象，那么这个函数肯定具有prototype属性。因为我们自定义的函数都可以通过new操作符生成一个对象，所以我们自定义的函数都有prototype这个属性。

// 自定义函数的 prototype
let f = function () {}
console.log(f.prototype) // {constructor: ƒ}
// 内置函数（对象）的 prototype
console.log(Date.prototype) // 
{constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}
// Math 不是一个构造器，不能通过 new 关键字来生成一个新的对象，所以它不含有 prototype 属性
console.log(Math.prototype) // undefined

作用：函数通过使用new关键字生成的一个对象， 这个对象的原型(也就是__proto__)指向该函数的prototype属性，归根结底也就是让该函数所实例化的对象们都可以找到公用的属性和方法。那么__proto__和prototype之间的关系就显而易见了，关系如下所示：

// 其中F表示一个自定义的函数或者是含有prototype属性的内置函数
new F().__proto__ === F.prototype // true

以下是一些便于加深理解的表达式：

// 因为Object是一个函数，函数的构造器都是Function
Object.__proto__ === Function.prototype // true

// 通过函数字面量定义的函数的__proto__属性都指向Function.prototype
(function(){}).__proto__ === Function.prototype // true

// 通过对象字面量定义的对象的__proto__属性都是指向Object.prototype
({}).__proto__ === Object.prototype // true

// Object函数的原型的__proto__属性指向null
Object.prototype.__proto__ === null // true

// 因为Function本身也是一个函数，所以Function函数的__proto__属性指向它自身的prototype
Function.__proto__ === Function.prototype // true

// 因为Function的prototype是一个对象，所以Function.prototype的__proto__属性指向Object.prototype
Function.prototype.__proto__ === Object.prototype // true

3. constructor

constructor表示一个对象的构造函数，除了null和undefined，js中所有数据类型都有这个属性，我们可以通过下面的代码来验证一下：

null.constructor // Uncaught TypeError: Cannot read property 'constructor' of null ...
undefined.constructor // Uncaught TypeError: Cannot read property 'constructor' of undefined ...

(true).constructor // ƒ Boolean() { [native code] }
(1).constructor // ƒ Number() { [native code] }
"hello".constructor // ƒ String() { [native code] }

一个对象的constructor属性确切地说并不是存在这个对象上面的； 而是存在这个对象的原型上面的(如果是多级继承需要手动修改原型的constructor属性)，我们可以使用下面的代码来解释一下：

const F = function () {}
// 当我们定义一个函数的时候，这个函数的prototype属性上面的constructor属性指向自己本身
F.prototype.constructor === F // true

// 所以由F实例化的对象的原型的constructor也指向F
new F().__proto__.constructor === F // true

值得注意的是Function这个对象比较特殊，它的构造函数就是它自己（Function可以是一个函数，也可以是一个对象），所有函数和对象最终都是由Function构造函数得来，所以constructor属性的终点就是Function这个函数。可以用如下代码来解释：

// Function函数的原型的构造函数指向他自己本身
Function.prototype.constructor === Function // true

// 所有的函数都是由Function构造得来
const f = function () {}
f.__proto__.constructor === Function // true

4. 原型链

以下是加深原型链理解例子：

// 函数的原型链
let f = function () {}
console.log('f.__proto__ === Function.prototype', f.__proto__ === Function.prototype) // true
console.log('Function.prototype.__proto__ === Object.prototype', Function.prototype.__proto__ === Object.prototype) // true
console.log('Object.prototype.__proto__ === null', Object.prototype.__proto__ === null) // true
// 结论：函数都继承于Function.prototype(Function.prototype 中包含 call, bind等方法)，原型链如下：f ---> Function.prototype ---> Object.prototype ---> null

// 对象的原型链
let o = {
	a: 1
}
console.log('o.__proto__ === Object.prototype', o.__proto__ === Object.prototype) // true
console.log('Object.prototype.__proto__ === null', Object.prototype.__proto__ === null) // true
// 原型链如下：o ---> Object.prototype ---> null

// 数组的原型链
let a = ['I', 'am', 'obj']
console.log('a.__proto__ === Array.prototype', a.__proto__ === Array.prototype) // true
console.log('Array.prototype.__proto__ === Object.prototype', Array.prototype.__proto__ === Object.prototype) // true
console.log('Object.prototype.__proto__ === null', Object.prototype.__proto__ === null) // true
// 结论：数组都继承于Array.prototype(Array.prototype 中包含 indexOf, forEach 等方法)，原型链如下：a ---> Array.prototype ---> Object.prototype ---> null

5. 总结

• __proto__和constructor属性是对象所独有的。
• prototype属性是函数所独有的，但是由于js中函数也是一种对象，所以函数也拥有__proto__和constructor属性.
• __proto__属性的作用就是当访问一个对象的属性时，如果该对象内部不存在这个属性，那么就会去它的__proto__属性所指向的原型对象里面找，如果仍未找到则会继续层层向上查找，直到找到该属性或者查找到顶端null为止；通过__proto__属性将对象连接起来的这条链路就是原型链。
• prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法，即(new F()).__proto__ === F.prototype。
• constructor表示一个对象的构造函数，js的数据类型中除了null跟undefined都有这个属性，所有函数（此时看成对象了）最终的构造函数都指向Function。

参考：
https://blog.csdn.net/cc18868876837/article/details/81211729
https://github.com/dreamapplehappy/blog/blob/master/2018/12/30/README.md
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain