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);

這裏的關鍵兩步就是：

• 一.將新創建對象的原型鏈設置正確，這樣我們才能使用原型鏈上的方法。
• 二.將新創建的對象作爲構造函數執行的上下文，這樣我們才能正確地進行一些初始化操作。

最後

希望這篇博客對大家能有所幫助，如果對你有所幫助，麻煩點贊支持一下，謝謝！

參考文章