轻松搞定JS中的prototype、__proto__与constructor

盗图一张，看完内容后再看这张图片不明白你来锤我。。。

什么是构造函数？

function Demo(){};
let d1 = new Demo;
复制代码

用来初始化新创建的对象的函数是构造函数。在上面代码中，Demo()函数是构造函数

什么是实例对象？

function Demo(){};
let d1 = new Demo;
复制代码

通过构造函数的new操作创建的对象是实例对象。可以用一个构造函数，构造多个实例对象，在上面代码中d1就是实例对象

什么是原型对象(prototype)?

  function Demo(){};
  Demo.prototype.a = 666;
  let d1 = new Demo;
  let d2 = new Demo;
  console.log(Demo.prototype.a); //666
  console.log(d1.a); //666
  console.log(d2.a); //666
复制代码

Demo.prototype，指的就是原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。所以经常使用原型对象来实现继承，Object.prototype的原型对象是null

constructor概念

原型对象有一个constructor属性，指向该原型对象对应的构造函数

function Demo(){};
console.log(Demo.prototype.constructor === Demo);//true
复制代码

由于实例对象可以继承原型对象的属性，所以实例对象也拥有constructor属性，并且实例对象的constructor也指向原型对象对应的构造函数

function Demo(){};
let d1 = new Demo;
console.log(d1.constructor === Demo); //true
复制代码

原型链（proto）概念

实例对象有一个proto属性，指向该实例对象对应的原型对象

function Demo(){};
let d1 = new Demo;
console.log(d1.__proto__ === Demo.prototype);//true
复制代码

基本概念介绍完毕下面介绍深入一点的地方

原型对象的深入理解

function Demo(){};
var d1 = new Demo;
console.log(Demo.prototype.__proto__ === Object.prototype);//true
console.log(Demo.prototype.constructor  ===  Object）;//true
复制代码

Demo.prototype是d1的原型对象同时他也可以称作为实例对象，那么作为实例对象它又是怎么来的了？它的原型对象又是什么。实际上，任何对象都可以看做是通过Object()构造函数的new操作实例化的对象，所以，Demo.prototype作为实例对象，它的构造函数是Object()，原型对象是Object.prototype。相应地，构造函数Object()的prototype属性指向原型对象Object.prototype；实例对象Demo.prototype的proto属性同样指向原型对象Object.prototype，实例对象Demo.prototype本身具有constructor属性，所以它会覆盖继承自原型对象Object.prototype的constructor属性

Object.prototype

Object.prototype也可作为实例对象，那么Object.prototype. __ proto __又指向什么了？结果为null， 这也就是到了原型链的尽头啦

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

复制代码

Function对象

先明白一个概念函数也是对象，任何函数都可以看做是通过Function()构造函数的new操作实例化的结果， 如果把函数Demo当成实例对象的话，其构造函数是Function()，其原型对象是Function.prototype；类似地，函数Object的构造函数也是Function()，其原型对象是Function.prototype

functionDemo(){};
var f1 = new Demo（）;
console.log(Demo.__proto__ === Function.prototype);//true
console.log(Object.__proto__ === Function.prototype);//true

复制代码

那么问题又来了，Function 作为实例对象他的proto又是什么了？其实 所有的函数都可以看成是构造函数Function()的new操作的实例化对象所以，如果Function作为实例对象，其构造函数是Function，其原型对象是Function.prototype

转载于:https://juejin.im/post/5c926200f265da612f1b966a