深入理解JavaScript原型与原型链机制 - 来自You Don't Know JS的启示

原型机制的本质

在JavaScript中，每个对象都有一个内部属性[[Prototype]]，它指向另一个对象，这就是我们所说的原型。这种链接关系构成了JavaScript中独特的原型链机制。

原型链的工作原理

当访问一个对象的属性时，JavaScript引擎会执行以下步骤：

1. 首先检查对象自身是否拥有该属性
2. 如果没有，则沿着[[Prototype]]链向上查找
3. 直到找到该属性或到达原型链末端（通常是Object.prototype）

const parent = { value: 42 };
const child = Object.create(parent);

console.log(child.value); // 42 - 通过原型链查找到

原型链的终点

所有普通对象的原型链最终都会指向Object.prototype。这个内置对象包含了许多基础方法：

• toString()
• valueOf()
• hasOwnProperty()
• isPrototypeOf()

属性屏蔽的三种情况

当给对象赋值一个属性时，如果该属性存在于原型链上，会出现三种不同的行为：

1. 可写属性：在对象上创建新属性，屏蔽原型链上的同名属性
2. 只读属性：严格模式下报错，非严格模式下静默失败
3. 访问器属性：调用setter函数，不会创建新属性

// 情况1示例
const proto = { x: 1 };
const obj = Object.create(proto);
obj.x = 2;  // 创建新属性，屏蔽proto.x
console.log(obj.x); // 2
console.log(proto.x); // 1

类模式的误解

JavaScript中没有真正的类，所谓的"类"实际上是通过函数和原型链模拟出来的模式。

构造函数的真相

当我们使用new操作符调用函数时：

1. 创建一个新对象
2. 将该对象的[[Prototype]]链接到函数的prototype属性指向的对象
3. 执行函数体，绑定this到新对象
4. 如果函数没有返回其他对象，则返回这个新对象

function Foo() {}
const a = new Foo();

// a的[[Prototype]]指向Foo.prototype
Object.getPrototypeOf(a) === Foo.prototype; // true

更清晰的理解方式

与其使用类继承的术语，不如用更准确的描述：

• 委托：对象可以将属性访问委托给原型链上的其他对象
• 链接：对象之间通过[[Prototype]]建立链接关系
• 行为共享：通过原型链实现方法和属性的共享

最佳实践建议

1. 避免属性屏蔽：它会导致代码难以理解和维护
2. 使用Object.create()：直接创建具有指定原型的对象
3. 理解委托机制：不要强迫JavaScript适应类继承的思维模式
4. 谨慎使用++操作符：它可能导致意外的属性屏蔽

// 更好的对象创建方式
const parent = { count: 0 };
const child = Object.create(parent);

// 正确的修改方式
parent.count++;  // 直接修改原型对象

结语

JavaScript的原型机制是其最核心的特性之一，理解它对于掌握这门语言至关重要。通过抛弃类继承的思维定式，转而接受对象委托的概念，开发者可以更自然地编写出符合JavaScript特性的代码。记住，在JavaScript中，对象之间的关系是通过链接而非复制建立的，这种设计带来了极大的灵活性，也要求我们有不同的思维方式。