构造函数与原型：`new` 操作符的执行过程

好的，各位未来的代码大师们，欢迎来到今天的“构造函数与原型：new 操作符的奥秘”讲座！我是你们的向导，今天就带你们拨开 JavaScript 中 new 操作符的迷雾，揭开构造函数和原型链的神秘面纱。

准备好了吗？让我们开始这场精彩的代码探险吧！🚀

开场白：new，你这磨人的小妖精！

在 JavaScript 的世界里，new 操作符就像一个磨人的小妖精，它常常让新手们感到困惑。你可能会想：“它到底做了些什么？为什么我有时候用 new 创建的对象能调用某些方法，有时候又不行？构造函数和原型到底是什么关系？”

别担心！今天，我们就来彻底驯服这只小妖精，让它乖乖听话，为你所用。

第一幕：什么是构造函数？

首先，我们要明确一个概念：构造函数。

在 JavaScript 中，任何函数都可以作为构造函数使用。但通常，我们会将那些用来创建特定类型对象的函数称为构造函数。

想象一下，你是一位建筑师，构造函数就是你的蓝图，而通过 new 操作符，你就能根据蓝图建造出一栋栋房子（对象）。

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
}

// 使用构造函数创建对象
const john = new Person("John", 30);
john.greet(); // 输出: Hello, my name is John and I am 30 years old.

在这个例子中，Person 就是一个构造函数。它接受 name 和 age 两个参数，并将它们赋值给新创建对象的属性。

注意点：构造函数通常首字母大写，这是一种约定俗成的规范，能够提醒我们这是一个构造函数，需要用 new 来调用。

第二幕：new 操作符的执行过程：抽丝剥茧

现在，我们进入正题，也是今天讲座的重中之重：new 操作符到底做了些什么？

new 操作符的执行过程可以分为以下四个步骤，就像一个精密的魔术表演：

创建一个新的空对象： 就像变魔术一样，new 操作符首先会创建一个全新的、空空如也的 JavaScript 对象。你可以把它想象成一块空白的画布，等待着被构造函数赋予生命。
```
// 相当于: const obj = {};
```
将构造函数的 this 指向新对象： 这一步是关键！new 操作符会将构造函数内部的 this 关键字指向刚刚创建的新对象。这意味着，在构造函数内部，你可以使用 this 来设置新对象的属性和方法。
```
// 相当于: Person.call(obj, "John", 30);
```
执行构造函数中的代码： 现在，构造函数开始执行，它会根据你定义的逻辑，给新对象添加属性和方法。就像建筑师根据蓝图，一点一点地建造房子。
```
// 在 Person 构造函数中:
// obj.name = "John";
// obj.age = 30;
// obj.greet = function() { ... };
```
返回新对象： 如果构造函数没有显式地返回任何值，new 操作符会默认返回新创建的对象。但如果构造函数显式地返回了一个对象，那么 new 操作符会返回这个显式返回的对象，而不是新创建的对象。如果返回的是原始类型，则忽略，仍然返回新对象。
```
// 如果 Person 构造函数没有 return 语句，则返回 obj;
// 否则，如果 Person 构造函数返回一个对象，则返回该对象。
```

表格总结：new 操作符的四步曲

为了方便大家记忆，我们用一个表格来总结 new 操作符的执行过程：

步骤	描述	代码示例 (伪代码)
1	创建一个新的空对象。	`const obj = {};`
2	将构造函数的 `this` 指向新对象。	`Person.call(obj, "John", 30);`
3	执行构造函数中的代码，给新对象添加属性和方法。	`obj.name = "John";` `obj.age = 30;` `obj.greet = function() { ... };`
4	如果构造函数没有显式地返回任何值，则返回新对象；如果构造函数显式地返回一个对象，则返回该对象（如果返回的是原始类型，则忽略，仍然返回新对象）。	`if (typeof returnValue === 'object' && returnValue !== null) {` `return returnValue;` `} else if (typeof returnValue === 'function') {` `return returnValue;` `} else {` `return obj;` `}`

第三幕：原型：对象的共享资源库

现在，我们来聊聊原型。原型是 JavaScript 中实现继承机制的关键。

每个 JavaScript 对象都有一个原型对象，可以通过 __proto__ 属性（非标准，不推荐直接使用）或者 Object.getPrototypeOf() 方法访问。

构造函数也有一个原型对象，可以通过 prototype 属性访问。

关键点：

构造函数的 prototype 属性指向原型对象。
通过构造函数创建的对象的 __proto__ 属性指向构造函数的 prototype 属性。

是不是有点绕？没关系，我们来举个例子：

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

Animal.prototype.sayHello = function() {
  console.log(`Hello, I am ${this.name}.`);
};

const dog = new Animal("Dog");
dog.sayHello(); // 输出: Hello, I am Dog.

console.log(dog.__proto__ === Animal.prototype); // 输出: true (注意: __proto__ 非标准)
console.log(Object.getPrototypeOf(dog) === Animal.prototype); // 输出: true

在这个例子中，Animal.prototype 指向 Animal 构造函数的原型对象。我们在 Animal.prototype 上定义了 sayHello 方法。

通过 new Animal("Dog") 创建的 dog 对象，它的 __proto__ 属性指向 Animal.prototype，因此 dog 对象可以访问 sayHello 方法。

原型链：沿着 __proto__ 向上查找

当试图访问一个对象的属性或方法时，JavaScript 引擎会按照以下步骤进行查找：

首先，在对象自身查找该属性或方法。
如果对象自身没有找到，则沿着 __proto__ 属性向上查找，直到找到为止。
如果一直查找到原型链的顶端（Object.prototype 的 __proto__ 为 null），仍然没有找到，则返回 undefined。

这个查找过程就叫做原型链。原型链就像一条链子，将对象和它的原型对象连接起来，形成一个查找属性和方法的路径。

优点：

节省内存： 通过原型，我们可以将一些通用的方法定义在原型对象上，让所有实例共享，而不需要为每个实例都创建一份副本。
实现继承： 原型链是 JavaScript 实现继承的核心机制。

第四幕：模拟实现 new 操作符

为了更深入地理解 new 操作符的执行过程，我们可以尝试自己模拟实现一个 new 操作符。

function myNew(constructor, ...args) {
  // 1. 创建一个新的空对象
  const obj = {};

  // 2. 将新对象的 __proto__ 属性指向构造函数的 prototype 属性
  Object.setPrototypeOf(obj, constructor.prototype);

  // 3. 将构造函数的 this 指向新对象，并执行构造函数
  const result = constructor.apply(obj, args);

  // 4. 如果构造函数返回一个对象，则返回该对象；否则返回新对象
  return (typeof result === 'object' && result !== null) || typeof result === 'function' ? result : obj;
}

// 使用自定义的 myNew 函数
const john = myNew(Person, "John", 30);
john.greet(); // 输出: Hello, my name is John and I am 30 years old.

在这个 myNew 函数中，我们手动实现了 new 操作符的四个步骤。

第五幕：总结与升华

恭喜各位，经过今天的学习，我们已经成功驯服了 new 操作符这只小妖精，并揭开了构造函数和原型链的神秘面纱。

让我们再次回顾一下今天的重点：

构造函数： 用来创建特定类型对象的函数。
new 操作符： 创建对象并执行构造函数的过程。
原型： 对象的共享资源库，用于实现继承。
原型链： 查找属性和方法的路径。

掌握了这些概念，你就能更好地理解 JavaScript 的对象创建机制，编写出更健壮、更高效的代码。

尾声：代码之路，永无止境

学习代码就像攀登一座高峰，需要不断地学习、实践和思考。希望今天的讲座能帮助你更上一层楼，在代码的道路上越走越远！

记住，代码的世界充满乐趣，只要保持好奇心和热情，你就能创造出无限的可能！💪

感谢大家的参与，我们下次再见！👋

发表回复 取消回复

发表回复取消回复