图解 JS 原型链中的三角恋

理解原型链的三角恋

在 JavaScript 中，原型链是一个非常重要的概念，它决定了对象之间的继承关系，也是理解面向对象编程的关键。原型链中的 "三角恋" 指的是构造函数、原型对象和 proto 属性之间的关系。这三个属性共同作用，构建了 JavaScript 的继承机制。

构造函数

构造函数是用来创建对象的函数，它是对象的蓝图。构造函数在被调用时会创建一个新的对象，并将其作为函数的返回值。新对象会自动继承构造函数的原型对象中的属性和方法。

原型对象

原型对象是构造函数的属性，它是一个普通的 JavaScript 对象，存储着构造函数的共享属性和方法。当创建新对象时，该对象会自动获得对原型对象的引用，并可以访问原型对象中的属性和方法。

proto 属性

proto 属性是对象的内部属性，它指向对象的原型对象。proto 属性允许对象访问原型对象中的属性和方法。需要注意的是，proto 属性是只读的，无法直接修改。

三角恋关系图解

为了更直观地理解这三个属性之间的关系，我们绘制了一张三角恋关系图解：

构造函数（Function）
       / \
      /   \
     /     \
原型对象（Object）    __proto__（指向原型对象）
     \     /
      \   /
       \ /
        对象（Object）

步骤分析

接下来，我们通过一个例子来分析这三个属性之间的相互作用。

1. 创建构造函数

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

2. 创建原型对象

Person.prototype = {
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
};

3. 创建对象

const person1 = new Person('John');

4. 分析对象的属性和方法

console.log(person1.name); // John
person1.sayHello(); // Hello, my name is John.

通过分析，我们可以发现：

• person1 对象的 proto 属性指向构造函数 Person 的原型对象。
• person1 对象可以访问原型对象中的属性和方法，如 name 属性和 sayHello() 方法。
• person1 对象也可以访问构造函数 Person 本身的方法，如 constructor 属性。

总结

原型链是 JavaScript 中一种重要的继承机制，通过构造函数、原型对象和 proto 属性之间的相互作用，实现了对象之间的继承。理解原型链对于掌握 JavaScript 的面向对象编程至关重要。