你不知道的js—原型

前面的文章提到了很多次原型链，它到底是什么？

我各人认为它是JavaScript这个语言最、最、最重要的技术点。如果不理解它，你好意思称自己在做前端？？？

[[Prototype]]

JavaScript所有的对象都有一个特殊的[[Prototype]]内置属性。打印一个对象看看：

字面量声明对象

const obj = {
    a: 1
}
console.log(obj)
console.log(obj.a) // 1

使用new Object创建

我们发现obj.proto 和 Object.prototype是相等的。

const obj = new Object();
obj.a = 1
console.log(obj.__proto__)
console.log(Object.prototype)
console.log(Object.prototype.__proto__) // null
console.log(obj.__proto__ === Object.prototype) // true

Object.create

使用Object.create创建一个对象会怎么样？

const obj = {
    a: 1
}
const obj2 = Object.create(obj)
console.log(obj2)
console.log(obj2.a) // 1

我发现了两个现象：

1. 打印obj2.proto、图片中的obj2的[[Prototype]]、obj三者是一样的；
2. obj2没有a属性，问什么也能访问到a；

console.log(obj2.__proto__)
console.log(obj2.__proto__ === obj) // true

总结

1. 代码中使用__proto__能访问到图片中的[[Prototype]]；
2. 使用Object.create创建对象就是把参数对象赋值给新对象的__proto__；
3. 当对象在自身找不到key时，就会沿着__proto__向里逐层查找，尽头就是js原生类Object的prototype。因为Object.prototype.proto 是null。链式访问就是原型链。

   平时定义{}、[]，等于是new Object() new Array()，这样{}的__proto__就是Object.prototype，[]的__proto__就是Array.prototype。

重点：Array.prototype.__proto__和Object.prototype相等，所有的对象原型链终点都是Object.prototype。所以任何对象都能访问到Object.prototype上的方法。

js原生构造函数Array、String、Number等等，和项目中自定义的构造函数都是在Object的基础上进行功能的扩展。