深入理解new运算符

Posted 2021-02-22 jofun

在 javascript 中，new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。创建一个对象很简单，为什么我们还要多此一举使用 new 运算符呢？它到底有什么样的魔力？

认识 new 运算符

通过下面的例子理解 new 运算符：

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

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

var joe = new Person(‘joe‘)

joe.sayHello = function () {
  console.log(‘Hello!‘)
}

joe.getName() // joe
joe.sayHello() // Hello!

Person.sayHello() // Uncaught TypeError: Person.sayHello is not a function

Person 是一个普通的函数，当它与 new 运算符一起使用时，Person 就是一个构造函数。通过 new Person(‘joe‘) 得到的新对象 joe 继承了 Person 的属性，同时，this 也指向 joe 实例。为 joe 添加的属性 sayHello 不会影响 Person，即 joe 是区别与 Person 的一个新对象。

因此，通过 new 创建的实例对象和构造函数之间建立了一条原型链，并通过原型链赋予实例对象继承属性的能力。

new 的原理和实现

通过上面的分析，new 运算符内部做了如下四个操作：

• 创建一个空的简单 JavaScript 对象（即{}）；
• 链接新对象（即设置该新对象的构造函数）到函数对象；
• 将新创建的对象作为 this 的上下文；
• 如果该函数没有返回对象，返回新创建的对象。

new 的实现如下：

function newOperator (ctor, ...args) {
  var obj = {};
  obj.__proto__ = ctor.prototype
  var res = ctor.apply(obj, args)
  return res || obj;
}

优化一下代码：

function newOperator (ctor, ...args) {
  var o = Object.create(ctor.prototype) // 合并第一和第二步：创建一个空的简单 JavaScript 对象（即{}），链接新对象（即设置该新对象的构造函数）到函数对象
  return fn.apply(o, args) || o
}

使用 newOperator 函数测试上面 Person 的例子：

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

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

var joe = newOperator(Person, ‘joe‘)

joe.sayHello = function () {
  console.log(‘Hello!‘)
}

joe.getName() // joe
joe.sayHello() // Hello!

Person.sayHello() // Uncaught TypeError: Person.sayHello is not a function

结果是一致的。

更好的检查方式是：

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

console.log(new Person(‘joe‘)) // @1
console.log(newOperator(Person, ‘joe‘)) // @2

@1 和 @2 在控制台的显示信息是一模一样的。

判断是否使用 new 关键字

在 JavaScript 中，一个实例对象的创建必须使用 new 关键字。但是限于 JavaScript 的语法特征，实际上构造函数同样可以像普通函数那样直接执行。那么构造函数内部如何判断是否使用了 new 关键字？

使用 instanceof 检测

通过理解 new 操作符的原理，可知，在执行 new 操作时，构造函数的 prototype 赋值给了实例的 proto 属性。在 JavaScript 中 instanceof 可以用来检测对象的原型链，如：a instanceof A 用来检测 a 是否是 A 的实例（即 a 的原型链中存在原型对象 A）。

function Person () {
  if (this instanceof Person) {
    console.log(‘new 调用‘)
  } else {
    console.log(‘普通函数调用‘)
  }
}

const foo = new Person() // new 调用
const bar = Person()     // 普通函数调用

使用 new.target 属性

在 ES6 中引入了 new.target 属性，new.target 属性允许你检测函数或构造方法是否是通过 new 运算符被调用的。在通过 new 运算符被初始化的函数或构造方法中，new.target 返回一个指向构造方法或函数的引用。在普通的函数调用中，new.target 的值是 undefined。

function Person () {
  console.log(new.target)
}

const foo = new Person() // ? Person () { console.log(new.target) }
const bar = Person()     // undefined