深入聊一聊JS中new的原理与实现

1. 前言

在 JavaScript 中，new 关键字是用来创建对象的最常用方式之一。但是，我们在使用 new 关键字的时候，很少会考虑到它是如何工作的。本文将试图解释 new 关键字的工作原理，以及如何手动实现 new 的功能。

2. new的原理

在执行 new 操作符时，它做了以下几件事情：

1. 创建一个新对象。
2. 将新对象的原型链接到构造函数的原型对象上。
3. 将构造函数的 this 指向新对象并调用该构造函数。
4. 如果构造函数没有返回对象，则返回该新对象。

具体来说，可以使用函数表达式来模拟 new 操作符的行为。下面是一个示例代码：

function myNew(Con, ...args) {
  // 创建一个新对象
  let obj = {}
  // 将新对象的原型链接到构造函数的原型对象上
  obj.__proto__ = Con.prototype
  // 将构造函数的 this 指向新对象并调用该构造函数
  let result = Con.call(obj, ...args)
  // 如果构造函数没有返回对象，则返回该新对象
  if (result && (typeof result === 'object' || typeof result === 'function')) {
    return result
  }
  return obj
}

这里使用了 rest operator 来处理构造函数的参数，并将它们传递给构造函数。最后使用了 call 方法来调用构造函数，并且使用条件语句来判断构造函数是否返回了一个对象。如果构造函数返回了一个对象，则返回该对象，否则返回新创建的对象。

3. 示例说明

3.1 创建一个对象

下面是一个使用 new 操作符创建对象的示例代码：

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

let person = new Person('Bob', 30)

console.log(person) // Person { name: 'Bob', age: 30 }

使用 new 操作符创建了一个 Person 对象，该对象具有 name 和 age 属性。

接下来，我们可以使用手动实现的 myNew 函数来创建同样的对象：

let person = myNew(Person, 'Bob', 30)

console.log(person) // { name: 'Bob', age: 30 }

这里使用 myNew 函数来创建一个 Person 对象，该对象具有 name 和 age 属性。

3.2 创建一个继承自其它对象的对象

下面是一个使用 new 操作符创建继承自其它对象的对象的示例代码：

function Parent() {
  this.name = 'parent'
}

Parent.prototype.getName = function() {
  return this.name
}

function Child() {
  Parent.call(this)
  this.type = 'child'
}

Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

let child = new Child()

console.log(child.getName()) // parent

使用 new 操作符创建了一个继承自 Parent 的 Child 对象，该对象具有 name 和 type 属性。并且调用了 Child 对象的 getName 方法，返回了 parent。

接下来，我们可以使用手动实现的 myNew 函数来创建同样的对象：

function Parent() {
  this.name = 'parent'
}

Parent.prototype.getName = function() {
  return this.name
}

function Child() {
  Parent.call(this)
  this.type = 'child'
}

Child.prototype = Object.create(Parent.prototype)
Child.prototype.constructor = Child

let child = myNew(Child)

console.log(child.getName()) // parent

这里使用 myNew 函数来创建一个继承自 Parent 的 Child 对象，该对象具有 name 和 type 属性。并且调用了 Child 对象的 getName 方法，返回了 parent。