JavaScript 之 new 的原理

[myLightLin]

疑问

现在有以下 JavaScript 代码：

function Foo(name) {
  this.name = name
}
Foo.prototype.getName = function() {
  console.log(this.name)
}

const foo = new Foo('张三')
console.log(foo.name)  // 张三

在这段代码里，当执行 const foo = new Foo('张三') 的时候，new 做了什么事情？

解答

在 JS 里，new 的作用是创建对应构造函数对象的一个实例，这个实例可以访问构造函数原型上的属性和方法。那它是怎么实现这个功能的呢？具体来说，做了以下几件事：

1. 创建一个空对象，假设是 obj
2. 获取构造函数，将 1 中对象的原型链接到构造函数的 prototype
3. 执行构造函数，假设结果是 ret
4. 判断 ret 是否是对象？如果是，返回 ret ；如果不是，返回第一步创建的 obj

代码实现

function mockNew() {
  const obj = {}   // 创建空对象
  const constructor = [].shift.call(arguments)  // 获取传入的构造函数
  obj.__proto__ = constructor.prototype   // 设置原型
  const ret = constructor.apply(obj, arguments)  // 执行构造函数
  return typeof ret === 'object' ? ret : obj   // 判断返回结果
}

测试

function Foo(name) {
  this.name = name
}
Foo.prototype.getName = function() {
  console.log(this.name)
}

const foo = mockNew(Foo, '张三')
console.log(foo.name)  // 张三