JS 原型链：洞悉它，掌握 JS 世界的通行证

2024-02-18 14:52:52

ECMAScript 认识 JS（章二）：跟原型链比划比划

大家好，我是早晚会起风。上一节我们初识了 ECMAScript，这门魔法语言，就是 JavaScript 的标准化表述，这种标准化让浏览器和 JavaScript 引擎能够解析和执行 JavaScript 代码。而今天，我们来比划比划 JavaScript 原型链，揭开它的面纱。快进来康康！

1. JavaScript 原型链：对象世界的血脉传承

在 JavaScript 的世界中，对象是构建应用程序的基础。每个对象都有其自身属性和行为，这些属性和行为被封装在对象内部，通过特定的方式可以访问和操作。当我们创建了一个新的对象时，它并不是凭空而来的，它会继承其原型对象（prototype）的属性和行为。

1.1 原型链的形成：一脉相承的奥秘

原型链是如何形成的呢？这就需要我们了解 JavaScript 中的原型对象。每个 JavaScript 对象都有一个原型对象，原型对象也是一个对象，它包含了该对象所继承的属性和行为。当我们访问对象的属性或方法时，JavaScript 引擎会首先在该对象中查找，如果没有找到，就会沿着原型链向上查找，直到找到该属性或方法。

1.2 原型链的优势：复用与扩展的艺术

原型链的形成为 JavaScript 带来了许多优势。首先，它实现了代码的复用。当我们创建多个对象时，这些对象可以共享同一个原型对象，这可以节省内存并提高代码的可维护性。其次，它提供了扩展的可能性。我们可以通过修改原型对象来为所有继承它的对象添加新的属性和行为。

2. 揭开原型链的神秘面纱

原型链是一个复杂的概念，但我们可以通过几个简单的例子来揭开它的神秘面纱。

2.1 创建对象：实例化原型的第一步

我们可以使用 new 来创建对象。例如：

const person = new Object();

这个语句创建了一个新的对象 person，它的原型对象是 Object.prototype。

2.2 原型的属性和方法：共享的宝藏

我们可以使用点运算符 (.) 来访问对象的属性和方法。例如：

person.name = "John Doe";

这个语句为 person 对象添加了一个新的属性 name，它的值是 "John Doe"。

2.3 原型链上的查找：层层递进的探索

当我们访问对象的属性或方法时，JavaScript 引擎会首先在该对象中查找，如果没有找到，就会沿着原型链向上查找，直到找到该属性或方法。例如：

console.log(person.toString());

这个语句会输出 "[object Object]"。这是因为 person 对象的 toString() 方法被定义在其原型对象 Object.prototype 中。

3. 原型链的实战应用：揭秘 JS 的代码复用与扩展之道

原型链在 JavaScript 中有很多实战应用，其中最重要的是代码复用和扩展。

3.1 代码复用：共享代码，提高效率

我们可以通过原型对象来实现代码的复用。例如，我们可以定义一个 Person 类，该类包含了 person 对象的公共属性和方法。然后，我们可以使用 new 关键字来创建 Person 类的实例。这样，每个 Person 类的实例都会继承 Person 类的属性和方法，而不用重复编写代码。

3.2 扩展：赋能对象，拓展功能

我们可以通过修改原型对象来为所有继承它的对象添加新的属性和行为。例如，我们可以为 Person 类的原型对象添加一个 speak() 方法，该方法可以输出 person 对象的姓名。这样，所有 Person 类的实例都可以使用 speak() 方法来输出自己的姓名。

4. 原型链与 ES5：传统与现代的交织

原型链的概念在 ECMAScript 5 中得到了进一步的扩展和完善。ES5 引入了新的特性，如 getter 和 setter，以及 Object.create() 方法，这些特性可以帮助我们更好地利用原型链。

4.1 getter 和 setter：属性访问的控制与封装

getter 和 setter 允许我们控制和封装对象的属性访问。我们可以使用 getter 来获取属性的值，使用 setter 来设置属性的值。例如：

const person = {
  get name() {
    return this._name;
  },
  set name(value) {
    this._name = value;
  }
};

person.name = "John Doe";
console.log(person.name); // 输出 "John Doe"

4.2 Object.create()：创建对象的利器

Object.create() 方法可以创建一个新的对象，该对象继承另一个对象的属性和行为。例如：

const person = {
  name: "John Doe"
};

const employee = Object.create(person);
employee.job = "Software Engineer";

console.log(employee.name); // 输出 "John Doe"
console.log(employee.job); // 输出 "Software Engineer"