JavaScript中的 [[prototype]]、prototype、proto 关系

在JavaScript中，[[prototype]]、prototype和__proto__是三个与原型相关的概念。它们之间有一些相互联系和区别。在本文中，我们将详细介绍它们的含义和关系。

[[prototype]]

[[prototype]]是每个JavaScript对象内部都有的一个属性，它指向该对象的原型。原型可以被看作是对象的一个模板，用于定义对象的属性和方法。当我们访问一个对象的属性或方法时，如果对象本身没有定义相应的属性或方法，JavaScript将会沿着原型链查找，直到找到匹配的属性或方法或到达原型链的顶端Object.prototype为止。[[prototype]]属性是JavaScript引擎内部的一个特殊属性，对于我们来说是不可见的。

prototype

prototype是函数对象独有的属性，它指向一个原型对象。当我们使用关键字new创建一个实例时，实例对象的[[prototype]]属性会被设置为构造函数的prototype属性的值。也就是说，实例对象通过[[prototype]]属性可以访问构造函数原型上定义的属性和方法。

function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log("Hello, " + this.name);
}

var person1 = new Person("Alice");
person1.sayHello(); // 输出 "Hello, Alice"

在上述代码中，我们创建了一个Person构造函数，并将其原型上定义了一个sayHello方法。通过new关键字创建的person1对象的[[prototype]]属性指向了Person.prototype，并且可以访问到sayHello方法。

proto

__proto__是每个JavaScript对象都有的一个属性，用于指向该对象的原型。它是非标准的，但在大部分现代浏览器中都得到了支持，并可以通过该属性来访问或设置对象的原型。__proto__是一个访问器属性，可以通过其getter和setter方法来操作。

var obj = {};
var proto = { name: "Alice" };

obj.__proto__ = proto;

console.log(obj.name); // 输出 "Alice"

在上述代码中，我们创建了一个空对象obj，并将其__proto__属性设置为proto对象。这样，obj就可以访问proto对象上定义的属性name。

关系

在JavaScript中，原型链是通过[[prototype]]，prototype和__proto__三者之间的关系实现的。

• 对象obj的__proto__属性指向其构造函数Person的prototype属性。
• 对象obj的[[prototype]]属性指向Person的prototype属性。
• Person的prototype属性是一个对象，它通过__proto__指向Object.prototype，因为Person是通过关键字new创建的一个实例。
• Object.prototype是所有JavaScript对象的顶级原型，它的[[prototype]]属性为null。

通过上述关系链，我们可以沿着原型链从一个对象访问到另一个对象上定义的属性和方法。这就是JavaScript中原型继承的核心机制。

结论

在JavaScript中，[[prototype]]、prototype和__proto__是三个与原型相关的概念。[[prototype]]是对象内部的属性，用于指向对象的原型；prototype是函数对象的属性，用于指向原型对象；__proto__是对象的属性，用于指向对象的原型。它们通过一定的关系链组成了JavaScript中的原型链，实现了原型继承的机制。理解这些概念和关系将有助于更好地理解JavaScript中的对象和原型的工作原理。

本文来自极简博客，作者：清风细雨，转载请注明原文链接：JavaScript中的 [[prototype]]、prototype、proto 关系