JavaScript 原型中的属性设置与屏蔽机制：深入理解对象属性访问

引言

在 JavaScript 中，原型继承是实现对象间共享属性和方法的核心机制。然而，当我们在对象上设置属性时，可能会遇到一些令人困惑的行为，特别是当原型链上已经存在同名属性时。本文将深入探讨 JavaScript 中的属性设置与屏蔽规则，帮助开发者避免常见的陷阱。

一、原型链基础回顾

JavaScript 中的每个对象都有一个内部链接指向它的原型（[[Prototype]]）。当我们访问一个对象的属性时，如果对象自身没有该属性，引擎会沿着原型链向上查找。

const parent = { name: "Parent" };
const child = Object.create(parent);

console.log(child.name); // "Parent" (来自原型)

二、属性屏蔽的三种情况

当我们在对象上设置一个属性，而该属性已经存在于原型链上时，会出现属性屏蔽现象。根据不同的情况，会产生三种可能的结果：

1. 原型链上的属性未被标记为只读（writable: true）

const proto = { name: "Proto" };
const obj = Object.create(proto);

obj.name = "Obj"; // 成功屏蔽
console.log(obj.name); // "Obj"
console.log(proto.name); // "Proto" (未被修改)

行为分析：

• 在 obj 上直接创建新属性
• 原型上的属性保持不变
• 这是最常见的情况

2. 原型链上的属性被标记为只读（writable: false）

const proto = {};
Object.defineProperty(proto, "name", {
    value: "Proto",
    writable: false
});

const obj = Object.create(proto);
obj.name = "Obj"; // 静默失败（严格模式下会报错）

console.log(obj.name); // "Proto" (未被修改)

行为分析：

• 赋值操作在非严格模式下静默失败
• 在严格模式下会抛出 TypeError
• 不会创建新属性，也不会修改原型属性

3. 原型链上的属性是 setter

const proto = {
    set name(val) {
        console.log(`Setting name to ${val}`);
    },
    get name() {
        return "Proto";
    }
};

const obj = Object.create(proto);
obj.name = "Obj"; // 调用原型上的 setter

console.log(obj.name); // "Proto" (getter 返回值)

行为分析：

• 赋值操作会调用原型上的 setter
• 不会在 obj 上创建新属性
• 如果需要屏蔽 setter，必须使用 Object.defineProperty()

大多数开发者都认为如果向[[Prototype]]链上层已经存在的属性（[[Put]]）赋值，就一定会触发屏蔽，但是如你所见，三种情况只有第一种是这样的。

如果你希望在第二种和第三种情况下也屏蔽foo，那就不能使用=操作符来赋值，而是使用Object.defineProperty(..)来向 obj 添加foo。

三、显式屏蔽原型属性的方法

1. 使用 Object.defineProperty()

const proto = { name: "Proto" };
const obj = Object.create(proto);

Object.defineProperty(obj, "name", {
    value: "Obj",
    writable: true,
    enumerable: true,
    configurable: true
});

console.log(obj.name); // "Obj" (成功屏蔽)

2. 使用 Object.setPrototypeOf() 修改原型链

const proto = { name: "Proto" };
const obj = { name: "Obj" };

Object.setPrototypeOf(obj, proto);
console.log(obj.name); // "Obj" (优先访问自身属性)

四、屏蔽行为的内部原理

JavaScript 引擎在属性赋值时遵循以下步骤：

1. 检查对象自身是否有该属性
   • 有：直接赋值
   • 无：进入步骤2
2. 检查原型链
   • 如果原型链上不存在该属性：在对象上创建新属性
   • 如果原型链上存在：
     • 可写：在对象上创建新属性（屏蔽）
     • 不可写：静默失败/报错
     • 是 setter：调用 setter

五、实际应用中的注意事项

1. 避免意外屏蔽

function Person() {}
Person.prototype.species = "Human";

const p = new Person();
p.species = "Alien"; // 意外修改了实例属性

console.log(p.species); // "Alien"
console.log(new Person().species); // "Human" (原型未受影响)

2. 谨慎使用 for...in 循环

const parent = { parentProp: "value" };
const child = Object.create(parent);
child.childProp = "value";

for (let prop in child) {
    console.log(prop); // 输出 "childProp" 和 "parentProp"
}

// 只遍历自身属性
console.log(Object.keys(child)); // ["childProp"]

3. 性能考虑

频繁的属性屏蔽会导致：

• 对象属性数量增加
• 隐藏类优化失效（在V8引擎中）
• 内存使用增加

六、最佳实践

1. 明确属性来源 ：使用 Object.hasOwnProperty() 区分自身属性和原型属性
2. 避免过度屏蔽：考虑是否需要修改原型设计而非不断屏蔽
3. 优先使用组合而非继承：复杂的原型链容易导致意外的屏蔽行为
4. 严格模式：启用严格模式可以避免静默失败带来的困惑

"use strict";
const proto = {};
Object.defineProperty(proto, "name", { value: "Proto", writable: false });

const obj = Object.create(proto);
obj.name = "Obj"; // TypeError: Cannot assign to read only property

七、总结

JavaScript 中的属性屏蔽机制既是其灵活性的体现，也是潜在问题的来源。理解属性设置的内部规则能够帮助开发者：

1. 避免意外的属性覆盖
2. 正确设计对象继承关系
3. 编写更可预测的代码
4. 有效利用原型继承的优势

记住关键原则：属性访问会遍历原型链，但属性设置（通常）只影响对象本身。掌握这一区别，就能在 JavaScript 的原型系统中游刃有余。