你不知道的Javascript new操作符内部实现

基本描述：new运算符 创建一个用户定义的对象数据类型的实例或者具有构造函数内置对象的实例（{} 或 new Object()）

内部实现我总结为以下5个步骤

1. 创建一个空对象（即 {} 或 newObject）
2. 把构造函数的原型（prototype）赋值给新对象的原型（proto）
3. 执行构造函数并且把this指向新对象（即 构造函数.call或apply(新对象，参数)
4. 判断构造函数执行后返回的数据类型是否为对象（对象包括object，array，function，不包括null）
5. 如果构造函数执行后如果用户手动返回对象则返回该对象否则返回第一步创建的新对象

实例1

function User(){         //该构造函数没有手动返回任何东西
    this.name = name;      
}

User.prototype.show = function(){
    console.log(this.name)
}

let user = new User('小明')

//console.log(user) =>  {name:"小明"}  没有返回数据正常得到实例对象

实例2

function User(){
    this.name = name;
    return '我是字符串' //该构造函数手动返回基本类型（string number undefined boolean）或null
}

User.prototype.show = function(){
	console.log(this.name)
}

let user = new User('小明')

//console.log(user) => 返回 {name:"小明"}  
//构造函数虽然返回了数据，但是由于返回的是基本类型(或null)，
//因此也被忽略了，所以也是可以正常得到实例对象

实例3

function User(){
      this.name = name;
      return [1,2,3] //该构造函数手动返回复合类型（Array Object Function）
}

User.prototype.show = function(){
    console.log(this.name)
}

let user = new User('小明')

//console.log(user) => [1,2,3] 

//构造函数返回了数据且是复合类型，所以得到得是手动返回的数据

实现自定义_new操作符

function _new(Con,...args){
    const obj = {};
    Object.setPrototypeOf(obj,Con.prototype);//关联构造函数原型
    const newObj = Con.apply(obj,args)//绑定构造函数的this为obj
    return newObj instanceof Object? newObj:obj 
    //如果构造函数执行的返回值是对象那么就是用户手动返回的对象，
    //则应当顺应用户的返回值，否则返回新创建的对象
}

使用_new

function User(){
    this.name = name;
}

User.prototype.show = function(){
    console.log(this.name)
}

let user = _new(User,'小明')

//console.log(user) => 返回 {name:"小明"}

总结

总结了以下…

哈哈哈！感谢阅读