JavaScript继承机制之原型（Prototype）：一场轻松诙谐的技术讲座

大家好，欢迎来到今天的JavaScript技术讲座！今天我们要探讨的是JavaScript中非常重要的一个概念——原型（Prototype）。如果你觉得JavaScript的继承机制让你头晕目眩，别担心，我会用轻松诙谐的方式带你一步步理解这个看似复杂但其实非常有趣的主题。

1. 什么是原型（Prototype）？

首先，让我们从最基础的问题开始：什么是原型？

在JavaScript中，每个对象都有一个特殊的属性叫做[[Prototype]]（注意，这是内部属性，你不能直接访问它）。这个属性指向另一个对象，我们通常称之为该对象的“原型”。你可以把原型想象成一个“模板”或“蓝图”，它定义了对象的行为和属性。

举个例子，假设你有一个Car对象，它有一些属性和方法，比如start()、stop()等。现在你想创建一个新的SportsCar对象，它不仅继承了Car的所有功能，还可以有一些额外的功能，比如turboBoost()。这时，SportsCar的[[Prototype]]就会指向Car，这样SportsCar就可以继承Car的所有属性和方法。

代码示例 1：简单的原型链

function Car() {
  this.start = function() {
    console.log("Engine started!");
  };
}

function SportsCar() {
  this.turboBoost = function() {
    console.log("Turbo boost activated!");
  };
}

// 让 SportsCar 继承 Car 的原型
SportsCar.prototype = Object.create(Car.prototype);

const myCar = new SportsCar();
myCar.start(); // 输出: Engine started!
myCar.turboBoost(); // 输出: Turbo boost activated!

在这个例子中，SportsCar的[[Prototype]]指向了Car.prototype，因此SportsCar可以调用Car中的start()方法。

2. 原型链（Prototype Chain）

接下来，我们来聊聊原型链。原型链是JavaScript中实现继承的核心机制。当你尝试访问一个对象的属性时，JavaScript会先检查该对象本身是否有这个属性。如果没有找到，它会沿着原型链向上查找，直到找到该属性或到达链的顶端（即null）。

代码示例 2：原型链的查找过程

function Animal() {}
Animal.prototype.eat = function() {
  console.log("I am eating.");
};

function Dog() {}
Dog.prototype.bark = function() {
  console.log("Woof!");
};

// 让 Dog 继承 Animal 的原型
Dog.prototype = Object.create(Animal.prototype);

const myDog = new Dog();
myDog.bark(); // 输出: Woof!
myDog.eat();  // 输出: I am eating.

在这个例子中，myDog是一个Dog实例，但它可以通过原型链访问Animal.prototype中的eat()方法。

表格：原型链的查找顺序

对象	属性查找顺序
myDog	1. myDog自身 2. Dog.prototype 3. Animal.prototype 4. Object.prototype 5. null

当我们在myDog上调用eat()时，JavaScript会按照上述顺序查找eat属性，最终在Animal.prototype中找到它。

3. Object.prototype：所有对象的祖先

在JavaScript中，所有的对象最终都会继承自Object.prototype。Object.prototype是原型链的终点，它提供了许多常用的方法，比如toString()、hasOwnProperty()等。

代码示例 3：Object.prototype的作用

const obj = {};
console.log(obj.toString()); // 输出: [object Object]
console.log(obj.hasOwnProperty('toString')); // 输出: false

在这个例子中，obj是一个普通的对象，它并没有自己的toString()方法，但通过原型链，它可以访问Object.prototype中的toString()方法。

4. 构造函数与new关键字

在JavaScript中，构造函数是一种特殊的函数，用于创建对象。当我们使用new关键字调用构造函数时，JavaScript会执行以下步骤：

1. 创建一个新对象。
2. 将新对象的[[Prototype]]设置为构造函数的prototype属性。
3. 执行构造函数的代码，给新对象添加属性和方法。
4. 返回新对象。

代码示例 4：构造函数的工作原理

function Person(name) {
  this.name = name;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name}`);
};

const alice = new Person('Alice');
alice.greet(); // 输出: Hello, my name is Alice

在这个例子中，alice是一个Person对象，它的[[Prototype]]指向Person.prototype，因此它可以调用greet()方法。

5. class语法糖与原型

ES6引入了class语法糖，让JavaScript的继承看起来更像其他面向对象语言。但实际上，class只是对原型继承的一种简化写法。

代码示例 5：class与原型的关系

class Animal {
  constructor(name) {
    this.name = name;
  }

  eat() {
    console.log(`${this.name} is eating.`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.name} says woof!`);
  }
}

const myDog = new Dog('Buddy');
myDog.eat();  // 输出: Buddy is eating.
myDog.bark(); // 输出: Buddy says woof!

在这个例子中，Dog类继承了Animal类，实际上Dog.prototype的[[Prototype]]指向了Animal.prototype，因此myDog可以调用eat()方法。

6. 原型的陷阱与注意事项

虽然原型继承非常强大，但也有一些需要注意的地方：

• 不要修改内置对象的原型：修改Array.prototype或Object.prototype可能会导致意想不到的副作用。
• 避免过多的原型链层级：过长的原型链会影响性能，因为每次访问属性时都需要逐层查找。
• 使用Object.create(null)创建无原型的对象：如果你不需要继承任何东西，可以使用Object.create(null)来创建一个没有原型的对象。

代码示例 6：无原型的对象

const obj = Object.create(null);
console.log(Object.getPrototypeOf(obj)); // 输出: null

7. 总结

好了，今天的讲座就到这里啦！我们回顾一下今天学到的内容：

• 原型（Prototype）是JavaScript中实现继承的核心机制。
• 每个对象都有一个[[Prototype]]属性，指向它的原型。
• 原型链是JavaScript查找属性的过程，直到找到属性或到达null。
• Object.prototype是所有对象的最终祖先，提供了许多常用方法。
• 构造函数和new关键字用于创建对象，并设置其原型。
• class语法糖简化了原型继承的写法，但底层依然是基于原型的。

希望今天的讲解能让你对JavaScript的原型继承机制有更清晰的理解。如果你还有任何疑问，欢迎在评论区留言，我们下期再见！ 😊

---

引用：

• MDN Web Docs: "JavaScript objects are dynamic ‘bags’ of properties."
• ECMAScript Specification: "Every object has a link to a prototype object."