面试题：JavaScript 赋值操作符扩展与原型链的交互

Question

创建一个构造函数 `Person`，其原型对象上有一个属性 `age` 初始值为 0。在构造函数内部，通过赋值操作符扩展的方式，给实例对象添加一个新属性 `newAge`，使其值为 `age` 属性值加 5。然后创建两个 `Person` 的实例 `p1` 和 `p2`，在 `p1` 上修改 `age` 属性值为 10，问 `p2.newAge` 的值是多少，并详细解释这里面赋值操作符在原型链相关场景下的工作机制。

Answer 1

1. 代码实现：

function Person() {
    this.newAge = this.age + 5;
}
Person.prototype.age = 0;

const p1 = new Person();
const p2 = new Person();

p1.age = 10;

2. p2.newAge 的值：p2.newAge 的值为 5。

3. 赋值操作符在原型链相关场景下的工作机制解释：

   • 当创建 Person 的实例时，例如 p1 = new Person() 和 p2 = new Person()，在构造函数 Person 内部执行 this.newAge = this.age + 5。此时，this.age 会首先在实例对象上查找，由于实例对象刚开始并没有 age 属性，所以会沿着原型链向上查找，找到 Person.prototype.age，其值为 0。所以 this.newAge 被赋值为 0 + 5 = 5。
   • 当在 p1 上修改 age 属性值为 10 时，这只是在 p1 这个实例对象上创建了一个新的 age 属性，并赋值为 10，这个操作并不会影响 p2 实例。因为 p2 实例的 newAge 属性值是在创建 p2 实例时，基于当时原型链上 age 的值（0）计算得到并赋值的，之后 p1 实例对 age 属性的修改不会影响到 p2 实例已经确定的 newAge 值。每个实例的属性查找和赋值是相对独立的，除非通过原型对象进行修改，才会影响到所有基于该原型创建的实例。