返回

JavaScript深潜：prototype和__proto__之间的关系

前端

一、prototype：函数的默认属性

JavaScript中的每个函数都拥有一个名为prototype的默认属性。prototype是一个对象，它包含了该函数创建的所有实例共享的方法和属性。这使得实例对象可以访问和使用函数中定义的共有成员。

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John', 30);
const person2 = new Person('Mary', 25);

person1.greet(); // Hello, my name is John and I am 30 years old.
person2.greet(); // Hello, my name is Mary and I am 25 years old.

在上面的示例中，Person函数的prototype属性是一个对象，它包含了一个名为greet的方法。当创建person1和person2这两个实例对象时，它们都继承了Person.prototype上的greet方法，并可以通过this访问和使用该方法。

二、proto：对象的内部属性

每个JavaScript对象都包含一个名为__proto__的内部属性，该属性指向创建该对象的函数的prototype属性。这意味着实例对象可以通过__proto__访问和使用函数prototype上的共有成员。

console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

上面的示例表明，person1和person2的__proto__属性都指向Person.prototype。这使得这两个实例对象可以访问和使用Person.prototype上的greet方法。

三、prototype和__proto__的关系

prototype和__proto__之间的关系可以总结为以下几点：

  • prototype是函数的默认属性，指向所有实例共享的方法和属性。
  • __proto__是对象的内部属性，指向创建该对象的函数的prototype属性。
  • 实例对象可以通过__proto__访问和使用函数prototype上的共有成员。

四、应用场景

1. 对象创建

prototype和__proto__在对象创建中发挥着重要作用。当使用new运算符创建实例对象时，该对象的__proto__属性将指向创建该对象的函数的prototype属性。这使得实例对象可以继承函数prototype上的共有成员。

2. 继承

prototype和__proto__是实现JavaScript继承的机制。当一个函数的prototype属性指向另一个函数的prototype属性时，前者的实例对象就可以继承后者的共有成员。这使得JavaScript可以实现多重继承和原型链的概念。

3. 属性访问

当实例对象访问一个属性时，JavaScript引擎会首先在该对象的自身属性中查找该属性。如果找不到，则会沿着对象的__proto__属性指向的原型链向上查找，直到找到该属性或到达原型链的末端。

4. 方法调用

当实例对象调用一个方法时，JavaScript引擎会首先在该对象的自身方法中查找该方法。如果找不到，则会沿着对象的__proto__属性指向的原型链向上查找，直到找到该方法或到达原型链的末端。

总结

prototype和__proto__是JavaScript中密切相关的重要概念，理解它们之间的关系是成为JavaScript开发专家的关键。通过掌握prototype和__proto__，您可以更深入地理解JavaScript的运行机制，并编写出更加健壮和可维护的代码。