JS的__proto__和prototype

最近在回顾JS的原型和原型链的知识，熟悉JS的同学都知道JS的继承是靠原型链实现的，那跟原型链相关的属性__proto__和prototype分别有什么作用和区别呢？

先来看定义

__proto__：隐式原型，JS中万物皆对象，所有的对象都有一个__proto__的属性，这个属性会指向此对象构造函数的prototype属性

//构造函数Foo
function Foo(name){
  this.name = name;
}

//我是被Foo创建的实例对象f1
const f1 = new Foo('f1');
//我是被Foo创建的实例对象f2
const f2 = new Foo('f2');

console.log(f1.__proto__ === Foo.prototype); // true
console.log(f2.__proto__ === Foo.prototype); // true

prototype：显式属性，这个属性只有方法（function）上才会有，被构造的实例对象上是不存在这个属性的

console.log(f1.prototype); //undefined
console.log(Foo.prototype); //{constructor,__proto__}

可以看到Foo的prototype有两个属性，constructor为构造函数Foo，__proto__根据上面的解释应该指向Foo.prototype的构造函数的prototype属性，Foo.prototype本身就是个对象，对象的构造函数是Object，所以它应该指向的是Object的prototype，所以下面来看看是不是这样

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

那么先抛出两个问题，大家先思考下，按照我们上面的解释，Foo有没有__proto__属性？Foo的__proto__属性应该指向谁呢？

再看class

接下来我们来看ES6的class，当class作为构造函数时，是否符合我们上述的定义呢？

class People{
  constructor(name){
    this.name = name;
  }
}

//我是被People创建的实例对象LiLei
const LiLei = new People('lilei');

console.log(LiLei.__proto__ === People.prototype)//true

事实证明，class作为构造函数时依然符合我们上述的定义，因为class其实是function的语法糖，如果我们typeof People的话，会得到function的答案

console.log(typeof People)//function

回到问题

这时候我们来回答上面提出的问题，Foo是一个function，但是它依然还是对象，因JS万物皆对象嘛，所以Foo肯定有__proto__，并且按照我们的定义，Foo的__proto__指向Foo的构造函数Function的prototype，来看看是不是这样

console.log(Foo.__proto__ === Function.prototype); //true

那么class People也是function，那它就应该和Foo一样

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

上图

e83bca5f1d1e6bf359d1f75727968c11_r.jpg

这时候看着这张图，再回顾刚才的内容，是不是更好理解了

原型终将有终点

图上已经很清楚了，原型的终点就是Object.prototype.__proto__，也就是null

原型的作用

__proto__：一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法
prototype：显式原型指向一个包含所有实例共享的属性和方法的对象

最后欢迎批评指正，共同进步