前端面試—new操作符的原理解析
博客說明
文章所涉及的資料來自互聯網整理和個人總結，意在於個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！
new實例
JavaScript中new操作符用於創建一個給定構造函數的對象實例
function Person(name, age){
this.name = name;
this.age = age;
}
const res = new Person('Tom', 20)
console.log(res) // Person {name: "Tom", age: 20}
原型，構造函數，實例的關系
- 原型（prototype）:一個簡單的對象，用於實現對象的屬性繼承。可以簡單理解成對象的父親。在火狐和谷歌中，每個js對象中都包含一個proto(非標准)的屬性指向它爹（該對象原型），可obj.__proto__進行訪問。
- 構造函數：可以 通過new來新建一個對象 的函數。
- 實例：通過 構造函數 和 new 創建出來的 對象，就是實例。實例通過proto指向原型，通過constructor指向構造函數。
因此看得出三者的關系
實例.__proto__===原型
原型.constructor === 構造函數
構造函數.prototype === 原型
實例.constructor === 構造函數
new操作符實現原理
- 新生成一個對象
- 鏈接到原型
- 綁定this
- 返回新對象（如果構造函數有自己 retrun 時，則返回該值）
function myNew(constrc, ...args) {
const obj = {}; // 1. 創建一個空對象
obj.__proto__ = constrc.prototype; // 2. 將obj的[[prototype]]屬性指向構造函數的原型對象
const result = constrc.apply(obj, args); // 3.將constrc執行的上下文this綁定到obj上，並執行
return result instanceof Object ? result : obj; //4. 如果構造函數返回的是對象，則使用構造函數執行的結果。否則，返回新創建的對象
}
// 使用的例子：
function Person(name, age){
this.name = name;
this.age = age;
}
const res = myNew(Person, 'Tom', 20)
console.log(res) // Person {name: "Tom", age: 20}
感謝
