轻松搞定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