如何進行new操作符的原理解析

本篇文章給大家分享的是有關如何進行new操作符的原理解析，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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

以上就是如何進行new操作符的原理解析，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。