手把手教你用 JS 实现 new，小白也能轻松掌握

2023-02-25 22:18:02

new JavaScript 中创造对象的奥秘

在 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.`);
  };
}

在这个例子中，Person 构造函数定义了一个名为 name 的属性、一个名为 age 的属性以及一个名为 greet 的方法。当使用 new 关键字调用此构造函数时，就会创建一个新对象，并将 name 和 age 属性以及 greet 方法赋予该对象。

原型继承：属性和方法的共享

在 JavaScript 中，对象之间存在着原型继承的关系。每个对象都有一个原型对象，而原型对象又可能有自己的原型对象，如此层层递进。当访问一个对象的属性或方法时，如果对象本身没有该属性或方法，就会沿着原型链向上查找，直到找到为止。这种机制保证了对象的属性和方法能够被继承和共享。

const person1 = new Person('John', 30);
person1.greet(); // "Hello, my name is John and I am 30 years old."

在上面的例子中，person1 对象继承了 Person 构造函数的原型，其中包含 greet 方法。这就是 person1 对象能够访问 greet 方法的原因，即使该方法不是在 person1 对象本身定义的。

this：指向当前对象的指针

this 是一个指向当前执行上下文的特殊变量。在构造函数内部，this 指向新创建的对象。这意味着你可以在构造函数中使用 this 来访问和修改新对象的属性和方法。

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 person1 = new Person('John', 30);
person1.name; // "John"
person1.age; // 30

在这个例子中，this 指向新创建的 person1 对象。这就是 person1 对象能够访问和修改 name 和 age 属性的原因。

new 的魔法：创造新对象的步骤

当你使用 new 关键字调用构造函数时，它会执行以下步骤：

创建一个新对象。
将新对象的原型指向构造函数的原型。
将 this 指向新对象。
执行构造函数。
如果构造函数返回一个对象，则返回该对象；否则返回新对象。

高级技巧

除了以上介绍的基本概念之外，new 关键字还有一些高级技巧，可以让你更加灵活地创建对象：

构造函数可以不使用 new ：虽然 new 关键字是构造函数的常用调用方式，但你也可以不使用它来调用构造函数。不过，这可能会导致一些问题，比如无法正确设置 this 的值。因此，建议你在使用构造函数时始终使用 new 关键字。
构造函数可以返回一个对象 ：如果你想让构造函数返回一个对象，那么你需要在构造函数中使用 return 语句。这样，new 关键字就会返回该对象，而不是新创建的对象。
可以继承多个构造函数 ：JavaScript 支持多重继承，这意味着一个构造函数可以继承多个父构造函数。这可以通过使用 Object.create() 方法或 ES6 中的 class 关键字来实现。

常见问题解答

为什么 new 关键字在构造函数之前？

new 关键字在构造函数之前，是为了确保在执行构造函数之前创建一个新对象。这很重要，因为我们需要将新对象的原型指向构造函数的原型，并在 this 指向新对象之前执行构造函数。
this 变量在构造函数中总是指向新对象吗？

是的，在构造函数内部，this 总是指向新创建的对象。这是 new 关键字的魔力之一，它确保 this 指向正确的对象。
什么时候不应该使用 new 关键字？

你不应该在不准备创建新对象的情况下使用 new 关键字。例如，如果你只想调用构造函数本身，而不创建新对象，那么你不应该使用 new 关键字。
构造函数可以有多个原型吗？

不，构造函数只能有一个原型。原型链可以有多个层级，但每个构造函数只能有一个原型。
构造函数可以返回基本类型吗？

不，构造函数不能返回基本类型（如数字、字符串、布尔值）。如果构造函数返回一个基本类型，则 new 关键字将忽略该返回值，并返回新创建的对象。