聊透原型prototype

聊聊JavaScript的原型

很多次别人让我聊聊JavaScript的原型的时候都支支吾吾的说不完整，自己还会绕进去，在这里系统的总结一下原型和原型链

以下我们都以浏览器为测试环境

什么是原型？

每一个对象都有一个__propto__ 的属性，咱们也可以叫他为隐式原型；每一个构造函数都有一个 prototype 属性，咱们也可以叫他为显示原型。其实构造函数也是有一个 __proto__ 属性，这个后面再详细讲。

补充：获取一个对象的原型可以用Object.getPrototypeOf()

隐式原型和显示原型有什么关系？

//main.js
//这里我们创建一个对象
const obj = new Object();
console.log(obj.__proto__)
console.log(Object.prototype)
console.log(obj.__proto__ === Object.prototype)

在html文件中引入main.js文件，在浏览器运行html文件；

控制台打印

obj对象是通过构造函数 Object new 出来的，这里obj.__proto__ 和 Object.prototype 所指向的是同一个原型对象，这里就可以做一个总结，一个对象的隐式原型是指向其构造函数的显示原型。

现在我们来自己定义构造函数

//main.js
function Person (name, age) {
  this.name = name
  this.age = age
}
const p = new Person('lilei', 19)
console.log(p.__proto__ === Person.prototype)//true

p 是通过 Person new 出来的，咱们之前就证实过这一点了，所以p.__proto__ === Person.prototype 结果为 true，毋庸置疑。

如果你是初学者就很可能问原型有什么作用，他的作用就是能够在原型上定义公共的方法。（其实作用还是很多的，JavaScript中的继承就是通过原型来实现的）

接下就是比较绕的问题了

在JavaScript中的构造函数也是对象

咱们怎么证实这一点呢，看接下来的代码

console.log(Person.__proto__)

你会发现这个其实是有值的，也就是说，构造函数他也是一个对象，那么他是哪里来的呢？

console.log(Person.__proto__ === Function.prototype)//true

这里看出，构造函数实际上就是 Function 构造函数 new 出来的

• 那再看一段代码

console.log(p.__proto__.__proto__ === Object.prototype)
console.log(Function.__proto__ === Function.prototype)
console.log(Object.__proto__ === Function.prototype)

这里三个打印的都是true

• 第一个，p的隐式原型是一个原型对象，所以他的隐式原型对象的隐式原型对象是指向Object的显示原型对象的；
• 第二个，Function最为一个构造函数，他有隐式原型，也有显示原型，前面说了构造函数的隐式原型是指向Function的显示原型的，所以这里也就能够解释通了；
• 第三个，Object最为一个构造函数，所以他的隐式原型指向Function的显示原型。

Object的prototype的隐式原型为null，这也就是原型链的顶端了

最后放一张经典的原型链图，相信你一定能够看的懂的！