JS重学系列之聊聊new操作符

2020-11-27 来源：飒榕旅游知识分享网

通过以上几个例子，相信大家也大致了解了 new 操作符的作用了，接下来我们就来尝试自己实现 new 操作符。

自己实现 new 操作符

首先我们再来回顾下 new 操作符的几个作用

new 操作符会返回一个对象，所以我们需要在内部创建一个对象

这个对象，也就是构造函数中的 this，可以访问到挂载在 this 上的任意属性

这个对象可以访问到构造函数原型上的属性，所以需要将对象与构造函数链接起来

返回原始值需要忽略，返回对象需要正常处理

回顾了这些作用，我们就可以着手来实现功能了

function create(Con, ...args) {
 let obj = {}
 Object.setPrototypeOf(obj, Con.prototype)
 let result = Con.apply(obj, args)
 return result instanceof Object ? result : obj
}

这就是一个完整的实现代码，我们通过以下几个步骤实现了它：

首先函数接受不定量的参数，第一个参数为构造函数，接下来的参数被构造函数使用

然后内部创建一个空对象 obj

因为 obj 对象需要访问到构造函数原型链上的属性，所以我们通过 setPrototypeOf 将两者联系起来。这段代码等同于 obj.__proto__ = Con.prototype

将 obj 绑定到构造函数上，并且传入剩余的参数

判断构造函数返回值是否为对象，如果为对象就使用构造函数返回的值，否则使用 obj，这样就实现了忽略构造函数返回的原始值

接下来我们来使用下该函数，看看行为是否和 new 操作符一致

function Test(name, age) {
 this.name = name
 this.age = age
}
Test.prototype.sayName = function () {
 console.log(this.name)
}
const a = create(Test, 'yck', 26)
console.log(a.name) // 'yck'
console.log(a.age) // 26
a.sayName() // 'yck'

虽然实现代码只有寥寥几行，但是结果很完美

最后

我们通过这篇文章重学了 new 操作符，

显示全文

全部栏目

JS重学系列之聊聊new操作符