126.《js 手撕 new》

手撕 new

new 的作用就是通过构造函数来创造一个实例

1.new过程发生了什么？

1. 创建了一个空对象
2. 将空对象的原型指向构造函数的原型
3. 将空对象的原型作为构造函数的执行上下文
4. 对构造函数的返回值做了特殊处理
   • 返回值若为 基本数据类型 则直接过滤，直接忽略
   • 返回值若为 对象 则直接返回

究竟是否完成了以上四个步骤，就让我们们一一验证

1.创建空对象

new 是否创建了一个空对象，首先要实例化一个构造函数，注意：构造函数的首字母要大写

function Fun(){	}
console.log(new Fun()) // {}

这里 我们 new 了一个实例，结果发现输出的是一个空对象 {} ，所以第一步验证通过

2.将空对象原型指向构造函数的原型

直接上代码

function Fun(){

}
console.log(Fun.prototype === new Foo().__proto__)   //  true

从结果可以看出 空对象的原型确实 等于 构造函数的原型，测试通过

3.将空对象作为构造函数的上下文

这个需要看构造函数中的 this 是否指向于 实例化，所以许需要在构造函数中输出一下 this

function Foo(name, age){
	this.name = name
    this.age = age
    console.log(this) // this 指向于实例化
}
console.log(new Foo('张三', 18))  // { name: '张三', age: 18 }

理论上 函数中的 this 应该指向 window ，但是实际 this 竟然指向的是实例化 new Foo(), 由此可以看出 新建的空对象的执行上下文为成为了构造函数的执行上下文，此步骤验证通过

4.对构造函数的返回值做了特殊处理

既然对 构造函数 的返回值做了处理，那么我们可以 对构造函数的返回值 写死 看看是否经过处理

// 情况一：返回值写死为 基本数据类型
function Foo1(name, age){
	this.name = name
	this.age = age
	return 1111
}
console.log(new Foo1('张三', 18))  // { name: '张三', age: 18 }
// 情况二：返回值为 引用数据类型
function Foo2(name, age){
	this.name = name
	this.age = age
	return { 111 }
}
console.log(new Foo2('name', 18)) // { 111 }

由此可以看出，构造函数的返回值如果为 基本数据类型 ，那么构造函数会直接忽略，如果构造函数返回值为 引用数据类型，定义的什么 就返回什么

由此，new 操作符的四个步骤演示完毕！！！

2.如何实现 new 操作符？

模拟实现

function Foo(name, age){
	this.name = name
	this.age = age
}
function realize(fn, ...args) {
	// 1.创建一个空对象
	let obj = Object.create({})
	// 2.空对象的原型指向构造函数的原型
	Object.setPrototypeOf(obj, args)
	// 3. 将空对象作为构造函数的执行上下文
	let res = fn.apply(obj, args)
	return res instanceof Object ? res : obj
}
console.log(realize(fn, '张三', 18))  // { name: '张三', age: 18 }