JS new的原理|极客笔记

JS new的原理

在JavaScript中，我们经常使用new关键字来创建对象。那么，new关键字究竟是如何工作的呢？本文将详细解释new关键字的工作原理并提供示例代码。

1. `new`关键字的作用

在JavaScript中，new关键字用于创建一个对象实例。它执行以下几个步骤：

创建一个空对象。
将该对象的原型指向构造函数的 prototype 属性。
将构造函数的作用域赋给新对象（因此 this 关键字指向新对象）。
执行构造函数，将属性和方法添加到新对象中。
返回新对象。

2. 示例代码

让我们通过一个简单的示例代码来理解new关键字的工作原理：

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

var person1 = new Person("Alice", 25);
console.log(person1);

在这个示例中，我们定义了一个 Person 构造函数，它接受两个参数 name 和 age。构造函数内部使用this关键字将属性 name 和 age 添加到新对象中。

接下来，我们使用new关键字创建了一个名为 person1 的对象实例。该对象实例继承了 Person.prototype 的属性和方法，同时构造函数内部的属性也被添加到该实例中。

最后，我们通过 console.log(person1) 将 person1 对象实例输出到控制台：

Person { name: 'Alice', age: 25 }

3. 原理解析

了解了示例代码的执行过程，让我们更详细地了解new关键字的原理。

当我们使用 new 关键字调用构造函数时，以下操作发生在后台：

创建一个空对象，该对象的原型指向构造函数的 prototype 属性。
将构造函数的作用域（也就是 this 关键字）赋给新对象。
执行构造函数，将属性和方法添加到新对象中。
如果构造函数没有明确返回一个对象，则返回新对象。

要更好地理解这个过程，让我们使用以下代码来模拟new关键字的执行：

function myNew(constructor, ...args) {
  // 创建一个空对象，继承构造函数的原型
  var obj = Object.create(constructor.prototype);

  // 将构造函数的作用域赋给新对象
  var result = constructor.apply(obj, args);

  // 如果构造函数没有明确返回一个对象，则返回新对象
  return result instanceof Object ? result : obj;
}

// 使用上述自定义的myNew函数来模拟new操作符
var person2 = myNew(Person, "Bob", 30);
console.log(person2);

在这个示例中，我们定义了一个名为 myNew 的函数来模拟new关键字的执行过程。该函数接受构造函数和参数列表作为参数。

在函数内部，我们使用Object.create()方法创建了一个空对象 obj，并将该对象的原型指向构造函数的 prototype 属性。

接下来，我们使用 constructor.apply(obj, args) 将构造函数的作用域赋给新对象，并将参数传递给构造函数。

最后，我们根据构造函数是否明确返回一个对象来返回新对象或构造函数的返回值。