前端面试题 | new 操作符的原理 |（对象的原型及其用途）

问题：new操作符具体干了什么？

总结：

在JavaScript中，new操作符用于创建一个新的对象实例。

作用是 ①创建一个空对象 ②将这个新对象的隐式原型指向构造函数的显式原型 ③它将构造函数的this指向这个新对象，并执行构造函数中的代码，初始化这个新对象 ④返回对象。

在使用new操作符时，需要注意构造函数必须使用new操作符来调用，否则this将指向全局对象。同时，构造函数中

不需要显式地返回一个对象----》new操作符会自动返回新创建的对象，即obj；

要显式返回一个对象-----》返回 return后面的内容/引用类型，即 res，也就是 Fun.apply(obj)

new 操作符的原理/执行过程

（1）创建了一个新的空对象 ---> let obj = {};

（2）将空对象和构造函数通过原型连接起来

（3）将构造函数中的 this 绑定给新对象

（4）返回对象

实现 new 操作符（几种写法）

其他知识点

对象的原型

（1）隐式原型

（2）显式原型

原型的用途

this指向

new 操作符的原理/执行过程

（1）创建了一个新的空对象 ---> let obj = {};

（2）将空对象和构造函数通过原型连接起来

<---> 将 构造函数的显示原型 赋值给 对象的隐式原型

<---> obj._proto_ = Fun.prototype，即将对象的 _proto_属性指向构造函数的 prototype对象

设置新对象的 constructor 属性为构造函数的名称，设置新对象的 proto 属性指向构造函数的 prototype 对象； obj._proto_ = Fun.prototype; ----> 扩展了新对象的原型链。

（3）将构造函数中的 this 绑定给新对象

即将构造函数的 this 指向创建的对象

方法：构造函数.call(新对象) 或构造函数.apply(新对象，参数)

即 let res = Fun.call(obj) 或 Fun.apply(obj, args)

new 操作符会调用指定的构造函数，并将新创建的对象作为构造函数的 this 上下文

----> 构造函数内部可以使用 this 来访问和修改新对象的属性。

（4）返回对象

几种说法：

若构造函数没有返回空对象，那么自动返回创建出来的新对象。
判断函数的返回值类型，若为值类型，则返回创建的对象；若为引用类型，则返回这个引用类型的对象。
构造函数一般没有显示返回，new操作符自动返回新创建的对象作为结果；若构造函数显示返回，返回对象会覆盖默认返回的新对象。
返回 this 指针。当存在显示的返回时，返回 return 后面的内容。新建的空对象作废。

即 return res instanceof Object ? res : obj

----》☆ 存在显式返回，为引用类型，返回 res；不存在显式返回，为值类型，返回 obj

实现 new 操作符（几种写法）

const _new = function(Fun,...args) {
    // 1. 创建空对象  
    let obj = Object.create(null)
    // 2. 将对象与构造函数通过原型连接
    // 将 构造函数的显式原型 赋值给 对象的隐式原型
    // 等价于 obj._proto_ = Fun.prototype
    Object.setPrototypeOf(obj, Fun.prototype)
    // 3. 将构造函数的this指向对象，并向函数传参
    let res = Fun.apply(obj, args)
    // 4. 确保返回的是一个对象
    return res instanceof Object ? res : obj
}

const _new = function(Fun,...args) {
    let obj = {}
    obj._proto_ = Fun.prototype
    let res = Fun.apply(obj, args)
    return res instanceof Object ? res : obj
}

const _new = function(Fun,...args) {
    let obj = Object.create(Fun.prototype)
    let res = Fun.apply(obj, args)
    return res instanceof Object ? res : obj
}