前端 js中new()到底做了什么

1. 原理讲解

function Person(name,age){
  this.name = name
  this.age = age
}
Persion.prototype.sayName = function (){
  console.log(this.name)
}
const person1 = new Person('Tom',20)
console.log(person1) //Persion {name: 'Tom',age:20}
person1.sayName() // 'Tom'

我们可以看到：new创建处理出来的实例，可以访问到构造函数中的属性，也可以访问到构造函数原型链中的属性。

我们在构造函数中返回一个对象。

function Person(name,age){
  this.name = name
  this.age = age
  return { age: 26 }
}
Persion.prototype.sayName = function (){
  console.log(this.name)
}
const person1 = new Person('Tom',20)
console.log(person1) // Persion { age:26 }
console.log(person1.name) // undefined

从上面可以发现，构造函数如果返回值为一个对象，那么这个返回值会被正常使用。

所以我们可以看出，new操作符 的流程为：

1. 创建一个空对象，这个新对象将成为函数的实例
2. 将新对象的原型链接到构造函数的原型对象，这样新对象就可以访问构造函数原型对象中定义的属性和方法
3. 将构造函数的作用域赋给新对象，这样新对象就可以通过this关键字来引用构造函数中的属性和方法
4. 执行构造函数中的代码，构造函数中的代码将用于初始化新对象的属性和方法

2. 手写new操作符

function myNew(Func,...args){
  //1.创建一个新对象
  const obj = {}
  //2.新对象原型指向构造函数原型对象
  obj._proto_ = Func.prototype
  //3.将构造函数的this指向新对象
  let result = Func.apply(obj,args)
  //4.根据返回值判断
  return result instanceof Object ? result : obj
}