JavaScript中new运算符的实现机制及手写

Posted 2021-10-31 十九万里

官方解释：new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。
总结：创建自定义对象或者构造函数的时候使用

这里我通过几个小问题的方式来解释new运算符

1、怎么创建一个自定义对象呢：

1、通过编写函数，定义对象类型
2、把编写的函数通过mew来创建对象实例

2、new运算符有哪些参数：

1、 construtor：是一个类或者函数 ，作用在于指定对象实例，没有参数一般可以省略为圆括号

2、arguments：列表。被construtor调用，比如construor有多个函数，就需要放在列表中
具体用法：new constructor[(arguments)]

3、new创建的对象和普通对象的区别

1、构造函数不同：普通对象的构造函数是Object，new对象构造函数是自定义的
2、暴露user对象方式不同：new是将uesr对象以原型的方式暴露在window对象中，普通函数是直接把uesr对象暴露在windo对象中（这点我自己还没理解透）
3、this指向不同：使用new的时候函数内部的this是一个新的对象，普通函数this指向就是常见的this指向（具体看this的用法）

4、创建new关键字会执行的操作

1、创建一个空的简单JS对象：（{}）也可以添加属性和名称：new Foo（…）
2、把这个空的对象添加_proto_属性。然后把这个属性连接到构造函数的原型对象中
3、把第一步创建的对象作为this的上下文（这里也就解释了为什么new的this指向是一个新的对象）
5、如果改函数没有返回对象 ，则返回this，有对象则返回对象。

那么重点来了:我在mdn包括红宝书上看了很多解释 我先放出来 然后在根据自己的理解总结一下

4、当new Foo ()执行时会发生以下操作

红宝书版：
1、创建一个新对象
2、将构造函数中的作用域复制给新对象
3、执行构造函数中的代码
4、返回新对象

MDN版：
1、一个继承自Foo.prototype 的新对象被创建
2 使用指定的参数调用构造函数Foo 并将this绑定到新创建的对象， new Foo等同于new Foo（），也就是没有指定参数列表。Foo不带任何参数调用情况
3、由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤1创建的对象。（一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤）

结合这两个版本呢其实也很容易看出了，我就不多做复述了

5、手写一个new操作符

function myNew(){
	//1. 创建一个新对象obj
	let obj = new object();
	//参数第一项为构造函数fn，
	let fn = [] .shift.call(arguments);
	
	//2.将构造函数中的作用域复制给新对象 也就是把obj_proto_连接到构造函数fn原型
	 obj._proto_ = fn.prototype；
	 // 返回执行结果用result接受
	 let result = fn.apply(obj,arguments);
	
	// 2.如果放回对象，则把这个对象放回，否则的话就返回步骤1的对象
	 return typeof  result === 'object'? result:obj;
}