5 分钟搞懂JavaScript 原型链

1. 原型链是什么？

简单来说，原型链是 JavaScript 中实现对象继承的一种机制。每个对象都有一个"原型"，当访问对象的属性或方法时，如果对象本身没有，就会去它的原型中查找。如果原型中也没有，就会继续向上查找，直到找到或者到达链的尽头。

举个例子：

let animal = { eats: true };
let rabbit = Object.create(animal); // rabbit 的原型是 animal
console.log(rabbit.eats); // true，从原型链中找到

2. 如何创建原型链？

JavaScript 提供了几种创建原型链的方法：

（1）Object.create()

这是最现代的方式，通过 Object.create() 可以直接指定一个对象的原型。

let animal = { eats: true };
let rabbit = Object.create(animal); // rabbit 的原型是 animal

（2）构造函数和 prototype

这是传统的实现方式，通过构造函数的 prototype 属性来设置原型。

function Animal() {}
Animal.prototype.eats = true;

let rabbit = new Animal(); // rabbit 的原型是 Animal.prototype

（3）ES6 的 class

ES6 的 class 是基于原型链的"语法糖"，本质上仍然是原型链。

class Animal {
  constructor() {
    this.eats = true;
  }
}

let rabbit = new Animal(); // rabbit 的原型是 Animal.prototype

3. 原型链的两个要点

（1）属性覆盖

当对象和原型有同名属性时，对象本身的属性会"覆盖"原型上的属性。

let animal = { eats: true };
let rabbit = Object.create(animal);
rabbit.eats = false; // 覆盖原型上的属性

console.log(rabbit.eats); // false
console.log(animal.eats); // true，原型属性未变

（2）性能问题

原型链过长会影响性能，因为查找属性时需要逐级向上查找。因此，尽量保持原型链短一些。

4. 原型链和作用域链的区别

• • 原型链：用于对象属性的查找。
• • 作用域链：用于变量的查找。

它们的用途不同，不要混淆。

5. 总结

原型链是 JavaScript 的核心机制之一，它通过"链式结构"实现了对象的继承。理解原型链，不仅能帮助你更好地掌握 JavaScript，还能在面试中轻松应对相关问题。

希望这篇文章能帮你快速掌握原型链的核心要点！