前端面試—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}

 

感謝

以及勤勞的自己，個人部落格，GitHub