【Javascript】彻底捋清楚javascript中 new 运算符的实现

new 运算符

在js中,new()常被用来创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例

new 关键字会进行如下的操作：

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

重点解析

1.我们先来写一个function

function Constructor(obj){
  if(obj){
    return obj
  }
}

2.使用new得到的实例化对象以及它的__proto__

console.log(new Constructor(123))
console.log(new Constructor({a:123}))
console.log((new Constructor()).__proto__)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IT6ZxVij-1688374144074)(https://raw.githubusercontent.com/AwesomeDevin/blog/master/static/image/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20190428151848.png)]

3.现在我们来尝试实现一个new()

function subNew(){
  var obj = {}
  obj.__proto__ = Constructor.prototype
  var res = Constructor.call(obj,...arguments)
  return typeof(res) === 'object'&&res || obj  
//当构造函数有return时，返回return值,没有则返回obj{}
}

4.使用 subNew() 创建实例并对比new()

var obj1 = new Constructor()
var obj2 = subNew()
console.log(new Constructor(123),subNew(123))
console.log(new Constructor({a:123}),subNew({a:123}))
console.log(obj1.__proto__,obj2.__proto__,Constructor.prototype)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-28cHD8bS-1688374144075)(https://raw.githubusercontent.com/AwesomeDevin/blog/master/static/image/%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20190428151913.png)]
可以发现 我们已经成功创建了new的实例,并且obj1,obj2的__proto__都指向Constructor的prototype

5.手写运算符 New() 实现继承

总结

new 创建的一个对象obj,并将obj的隐式原型__proto__指向构造函数的原型prototype,同时使用call调用父级的构造函数并传参,之后判断call返回值res，若为object类型，则返回res，否则返回obj

如果觉得我的文章对你有帮助,欢迎关注我的blog

相关知识点

【Javascript】深入理解async/await的实现,Generator+Promise = Async/Await
【Javascript】深入理解this作用域问题以及new运算符对this作用域的影响
【Javascript】手写运算符new创建实例并实现js继承

如果开发过程中有遇到问题，可进入此群交流学习。