说起 JavaScript 当中的 new 关键字,有一段很有趣的历史。其实 JavaScript 创造者 Brendan Eich 实现 new 是为了获得更高的流行度,它是强行学习 Java 的一个残留产出,他想让 JavaScript 成为 Java 的小弟。很多人认为这个设计掩盖了 JavaScript 中真正的原型继承,只是表面上看,更像是基于类的继承。
这样的误会使得很多传统 Java 开发者并不能很好理解 JavaScript。实际上,我们前端工程师应该明白,new 关键字到底做了什么事情。
- step1:首先创建一个空对象,这个对象将会作为执行 new 构造函数() 之后,返回的对象实例
- step2:将上面创建的空对象的原型(
__proto__
),指向构造函数的 prototype 属性 - step3:将这个空对象赋值给构造函数内部的 this,并执行构造函数逻辑
- step4:根据构造函数执行逻辑,返回第一步创建的对象或者构造函数的显式返回值
因为 new 是 JavaScript 的关键字,我们不能直接覆盖,实现一个 newFunc 来进行模拟,预计使用方式:
function Person(name) { this.name = name } const person = new newFunc(Person, 'lucas') console.log(person) // {name: "lucas"}
实现为:
function newFunc(...args) { // 取出 args 数组第一个参数,即目标构造函数 const constructor = args.shift() // 创建一个空对象,且这个空对象继承构造函数的 prototype 属性 // 即实现 obj.__proto__ === constructor.prototype const obj = Object.create(constructor.prototype) // 执行构造函数,得到构造函数返回结果 // 注意这里我们使用 apply,将构造函数内的 this 指向为 obj const result = constructor.apply(obj, args) // 如果造函数执行后,返回结果是对象类型,就直接返回,否则返回 obj 对象 return (typeof result === 'object' && result != null) ? result : obj }
上述代码并不复杂,几个关键点:
- 使用 Object.create 将 obj 的
__proto__
指向为构造函数的原型 - 使用 apply 方法,将构造函数内的 this 指向为 obj
- 在 newFunc 返回时,使用三目运算符决定返回结果
我们知道,构造函数如果有显式返回值,且返回值为对象类型,那么构造函数返回结果不再是目标实例。如下代码:
function Person(name) { this.name = name return {1: 1} } const person = new Person(Person, 'lucas') console.log(person) // {1: 1}
了解这些注意点,对于理解 newFunc 的实现就不再困难。