JavaScript 原型链：核心机制、工作原理、继承与应用

原型链（Prototype Chain）是 JavaScript 中实现继承的核心机制。它通过对象的 __proto__ 属性（或 Object.getPrototypeOf() 方法）将对象与其原型对象连接起来，形成一个链式结构。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法，或者到达原型链的顶端（null）。

1. 原型链的基本概念

• 原型对象（Prototype）：每个 JavaScript 对象（除了 null）都有一个原型对象，原型对象也是一个对象，它包含了可以被继承的属性和方法。
• __proto__ 属性：每个对象都有一个 __proto__ 属性，指向它的原型对象。
• 构造函数（Constructor）：构造函数通过 new 关键字创建对象时，会将新对象的 __proto__ 指向构造函数的 prototype 属性。

2. 原型链的工作原理

• 当访问一个对象的属性或方法时，JavaScript 引擎会首先在该对象自身查找。
• 如果找不到，则会沿着 __proto__ 链向上查找，直到找到该属性或方法，或者到达原型链的顶端（null）。
• 如果最终没有找到，则返回 undefined。

3. 示例代码

// 定义一个构造函数
function Person(name) {
  this.name = name;
}

// 在构造函数的原型上添加方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 创建一个实例
const person1 = new Person('Alice');

// 访问实例的属性和方法
console.log(person1.name); // 输出: Alice
person1.sayHello(); // 输出: Hello, my name is Alice

// 原型链的查找过程
console.log(person1.__proto__ === Person.prototype); // 输出: true
console.log(Person.prototype.__proto__ === Object.prototype); // 输出: true
console.log(Object.prototype.__proto__ === null); // 输出: true

4. 原型链的继承

• 原型继承：通过将子类的原型指向父类的实例，实现继承。
• 组合继承：结合构造函数继承和原型继承，解决原型继承中引用类型共享的问题。

// 父类
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};

// 子类
function Dog(name, breed) {
  Animal.call(this, name); // 调用父类构造函数
  this.breed = breed;
}

// 设置子类的原型为父类的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 添加子类特有的方法
Dog.prototype.bark = function() {
  console.log(`${this.name} barks.`);
};

// 创建子类实例
const dog1 = new Dog('Rex', 'German Shepherd');
dog1.speak(); // 输出: Rex makes a noise.
dog1.bark(); // 输出: Rex barks.

5. 原型链的应用场景

• 继承：通过原型链实现对象之间的继承关系。
• 方法共享：将方法定义在原型上，所有实例共享同一个方法，节省内存。
• 扩展内置对象：通过修改内置对象的原型，扩展其功能。

6. 注意事项

• 原型链过长：过长的原型链会影响性能，应尽量避免。
• 原型污染：修改内置对象的原型可能会导致意外的行为，应谨慎使用。
• __proto__ 的兼容性：虽然 __proto__ 是大多数现代浏览器支持的属性，但在某些环境下可能不可用，建议使用 Object.getPrototypeOf() 和 Object.setPrototypeOf() 代替。

总结

原型链是 JavaScript 中实现继承和共享方法的核心机制。理解原型链的工作原理对于掌握 JavaScript 的面向对象编程至关重要。通过合理使用原型链，可以构建出高效、可维护的代码结构。