JS面试题之详解new操作符

讲解例子

function Object(name, age){
	this.name = name;
	this.age = age;
}
const obj = new Person('cly', 20)
console.log(obj)  // Object {name: "cly", age: 20}

一 new执行过程

• 1.创建一个对象，即let obj = {}
• 2.将构造函数的作用域赋给新对象，此时this指向新对象
  即obj._ proto _ = Person.prototype，this = obj
• 3.执行构造函数中的代码，为新对象添加属性
  即调用函数Object(),但此时函数内的this为obj，故为obj添加了name和age属性
• 4.返回对象
  若构造函数没有返回非原始值（即不是引用类型的值），则返回该新建的对象obj（默认会添加return this），否则，返回引用类型的值。

二 自己实现new

function myNew(constructor, ...args) {
    const obj = {}; // 1. 创建一个空对象
    obj.__proto__ = constructor.prototype; // 2. 将obj的[[prototype]]属性指向构造函数的原型对象
     let value = constructor.apply(obj,orgs) ; // 3.将constructor执行的上下文this绑定到obj上(此时this指向新对象)，并执行(为obj添加属性)
     return (value instanceof Object) ? value : obj;//4.若构造函数没有返回非原始值（即不是引用类型的值），则返回该新建的对象obj（默认会添加return this），否则，返回引用类型的值。
}
 
// 举例
function Object(name, age){
	this.name = name;
	this.age = age;
}
const obj = myNew(Person, 'cly', 20);

这里的关键两步就是：

• 一.将新创建对象的原型链设置正确，这样我们才能使用原型链上的方法。
• 二.将新创建的对象作为构造函数执行的上下文，这样我们才能正确地进行一些初始化操作。

最后

希望这篇博客对大家能有所帮助，如果对你有所帮助，麻烦点赞支持一下，谢谢！

参考文章