简单实现
其实new操作符实现还是很简单的，因为Mdn上总共也就是4句话来描述它的作用
- 创建一个空的简单JavaScript对象（即
{}）； - 为步骤1新创建的对象添加属性 proto ，将该属性链接至构造函数的原型对象 ；
- 将步骤1新创建的对象作为
this的上下文 ； - 如果该函数没有返回对象，则返回
this。
我们首先来依次用代码来翻译上面的四句话
function newOperator() {
// 创建对象
const obj = {}
// 创建的对象添加属性__proto__,并指向构造函数的原型对象
obj.__proto__ = Constructor.prototype
// 创建的对象作为this的上下文,并获取返回值
const ret = Constructor.apply(obj, arguments)
// 如果该函数没有返回对象，则返回新创建的对象
return typeof ret === "object" ? ret : obj;
}
上面的代码已经很好的翻译了上面的四句话，但是我们却不能直接用来创建构造函数的实例，因为我们根本没有把构造函数传进去，即上面的代码是无法运行的，因为Constructor并没有定义
代码完善
那么就让我们来重新完善一下上面的代码， 步骤如下：
- 首先新增参数，即需要实例的构造函数
function newOperator(ctor) {}
- 判断ctor参数类型，是否是function类型，否则抛出错误
if (typeof ctor !== "function") {
throw '参数异常，只接收构造函数'
}
- 新建实例和为对象添加__proto，并指向构造函数的原型对象
// 创建对象
const obj = {}
// 创建的对象添加属性__proto__,并指向构造函数的原型对象
obj.__proto__ = Constructor.prototype
// 上面的代码等同于如下代码
const obj = Object.create(ctor.prototype)
- 处理参数
const params = [].slice.call(arguments, 1)
const result = ctor.apply(obj, params)
此处解释一下为什么要处理一下参数
function Dog (name, age) {
this.name = name
this.age = age
}
const maomao = newOperator(Dog, 'maomao', 2)
从上面的代码可以看出来，我们使用newOperator的时候，第一个参数是构造函数，所以需要把第一个参数截取掉，获取到的参数就是['maomao', 2]，这两个才是构造函数的参数
-
改变
this上下文并获取构造的返回结果
const result = ctor.apply(obj, params)
为什么要获取构造的返回结果？？
因为通常来说实现构造函数是不需要return来返回结果的，但是如果真的给构造函数添加return关键字并返回结果，我们也应该返回这个结果,像如下代码
function Cat(name, age) {
return {
name: name,
age: age
}
}
- 判断类型并返回
const isObject = typeof result === 'object'
const isFunction = typeof result === 'function'
if (isFunction || isObject) {
return result
}
return obj
完整代码
function newOperator(ctor) {
if (typeof ctor !== "function") {
throw '参数异常，只接收构造函数'
}
const obj = Object.create(ctor.prototype)
const params = [].slice.call(arguments, 1)
const result = ctor.apply(obj, params)
const isObject = typeof result === 'object'
const isFunction = typeof result === 'function'
if (isFunction || isObject) {
return result
}
return obj
}
