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：显式原型指向一个包含所有实例共享的属性和方法的对象 最后欢迎批评指正，共同进步

本文章由javascript技术分享原创和收集