引言
在 JavaScript 中，原型继承是实现对象间共享属性和方法的核心机制。然而，当我们在对象上设置属性时，可能会遇到一些令人困惑的行为，特别是当原型链上已经存在同名属性时。本文将深入探讨 JavaScript 中的属性设置与屏蔽规则，帮助开发者避免常见的陷阱。
一、原型链基础回顾
JavaScript 中的每个对象都有一个内部链接指向它的原型（[[Prototype]]）。当我们访问一个对象的属性时，如果对象自身没有该属性，引擎会沿着原型链向上查找。
javascript
const parent = { name: "Parent" };
const child = Object.create(parent);
console.log(child.name); // "Parent" (来自原型)二、属性屏蔽的三种情况
当我们在对象上设置一个属性，而该属性已经存在于原型链上时，会出现属性屏蔽现象。根据不同的情况，会产生三种可能的结果：
1. 原型链上的属性未被标记为只读（writable: true）
javascript
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）
javascript
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
javascript
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()
javascript
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() 修改原型链
javascript
const proto = { name: "Proto" };
const obj = { name: "Obj" };
Object.setPrototypeOf(obj, proto);
console.log(obj.name); // "Obj" (优先访问自身属性)四、屏蔽行为的内部原理
JavaScript 引擎在属性赋值时遵循以下步骤：
- 检查对象自身是否有该属性
- 有：直接赋值
- 无：进入步骤2
- 检查原型链
- 如果原型链上不存在该属性：在对象上创建新属性
- 如果原型链上存在：
- 可写：在对象上创建新属性（屏蔽）
- 不可写：静默失败/报错
- 是 setter：调用 setter
五、实际应用中的注意事项
1. 避免意外屏蔽
javascript
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 循环
javascript
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引擎中）
- 内存使用增加
六、最佳实践
- 明确属性来源 ：使用
Object.hasOwnProperty()区分自身属性和原型属性 - 避免过度屏蔽：考虑是否需要修改原型设计而非不断屏蔽
- 优先使用组合而非继承：复杂的原型链容易导致意外的屏蔽行为
- 严格模式：启用严格模式可以避免静默失败带来的困惑
javascript
"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 中的属性屏蔽机制既是其灵活性的体现，也是潜在问题的来源。理解属性设置的内部规则能够帮助开发者：
- 避免意外的属性覆盖
- 正确设计对象继承关系
- 编写更可预测的代码
- 有效利用原型继承的优势
记住关键原则：属性访问会遍历原型链，但属性设置（通常）只影响对象本身。掌握这一区别，就能在 JavaScript 的原型系统中游刃有余。