【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__)

image

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)

image
可以发现 我们已经成功创建了new的实例,并且obj1,obj2的proto都指向Constructor的prototype

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

总结

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