Java Script中的__proto__和prototype属性举例与说明

   __proto__和prototype是Java Script中两个非常有意思的属性，也让许多的初学者头疼不已(包括我），本文使用举例和图示法来介绍一下他们，为了加深理解，在文末弄了一个小练习，希望对学习JS的同学们有所帮助。     为了方便描述，在这里我们先举一个最简单例子：

function Person(){}; let per = new Person();

  上述的代码创建了一个名为Person()的构造函数并用new关键字实例化该构造函数得到一个实例化对象per。它们的__proto__属性和prototype属性可以见下图。初看可能有些复杂，不过不用担心下文会对改图进行详细解释。

1、prototype属性

  prototype属性是构造函数所特有的，它表示的是构造函数func的原型对象。比如说Person.prototype指的是构造函数Person()的原型对象。请注意只有函数才有prototype属性。   在之前举的例子中，自然只有构造函数Object、Person、Function才有prototype属性了。

2、__proto__属性

  __proto__在ECMAScript标准中应当被称为[[Prototype]]。someObject.[[Prototype]]符号是用于指向someObject的原型。在早期浏览器为了实现它，弄出了__proto__属性。比如说per.__proto__指向per的原型也就是Person.prototype。需要注意的是__proto__属性是对象所独有的。

  由于函数也同样是对象，所以它们同样拥有__proto__属性。它们指向的是构造函数的函数原型也就是Function.prototype。而prototype同样是对象，它也有__proto__属性，它们一般指向Object.prototype，如下图。

3、一个小练习

function Person(name, age){ this.name = new String(name); //手动装箱 this.age = new Number(age); this.sayHello = function(){ console.log("Hello" + this.name); } } let per = new Person(xxt,22); //试着回答下列输出结果 //实例 console.log(per.__proto__); console.log(per.name.__proto__); console.log(per.age.__proto__); console.log(per.sayHello.__proto__); console.log(per.sayHello.prototype.__proto__); //构造函数 console.log(Person.__proto__);

答案

console.log(per.__proto__ == Person.prototype); //true console.log(per.name.__proto__ == String.prototype); //true console.log(per.age.__proto__ == Number.prototype); //true console.log(per.sayHello.__proto__ == Function.prototype); //true //sayHello是一个函数,它也拥有prototype属性 //per.sayHello.prototype和其他构造函数的性质是一样的 //它们的__proto__属性都指向Object.prototype console.log(per.sayHello.prototype.__proto__ == Object.prototype); console.log(per.sayHello.prototype.__proto__ == Function.prototype.__proto__);//true console.log(per.sayHello.prototype.__proto__ == Person.prototype.__proto__); //true console.log(Person.__proto__ == Function.prototype);//true

  本文到此就结束了，希望对各位刚开始学习JS的同学们有一些帮助。

参考文献： https://blog.csdn.net/cc18868876837/article/details/81211729 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain