一.前言

眾所周知：沒有物件怎麼辦？那就new一個！

那麼在JS中，當我們new一個物件的時候，這個new關鍵字內部都幹了什麼呢？

現在我們就來剖析一下原生JS中new關鍵字內部的工作原理。

二.原始的new

首先，我們先new一個物件看看：

//建立Person建構函式，引數為name,age
function Person(name,age){
　　this.name = name;
　　this.age = age;
　}
//例項化物件小明
xm = new Person('xiaoming',18);
//列印例項化出來的物件小明
console.log(xm);

列印結果：

從列印結果中可以看到：

用new關鍵字例項化物件時，首先建立了一個空物件xm，並且這個空物件包含兩個屬性name和age，分別對應建構函式中的兩個屬性，其次我們也可以知道例項化出來的這個物件xm是繼承自Person.prototype,那麼現在我們就可以總結出new關鍵字在例項化物件時內部都幹了什麼，其實，new關鍵字內部幹了如下三件事（已知建構函式為Func）：

1.建立一個空物件，並使該空物件繼承Func.prototype；

2.執行建構函式，並將this指向剛剛建立的新物件；

3.返回新物件；

三.封裝_new函式

當我們知道new關鍵字的內部原理後，我們就可以封裝一個_new函式，使其用於與new關鍵字同樣的功能。

_new函式需要傳入以下幾個引數：

第一個引數：建構函式名Func；

第二個引數及後面的引數：建構函式的引數

function _new(){
　//1.拿到傳入的引數中的第一個引數，即建構函式名Func
　 var Func = [].shift.call(arguments);
　　//2.建立一個空物件obj,並讓其繼承Func.prototype
　　var obj = Object.create(Func.prototype);
　　//3.執行建構函式，並將this指向建立的空物件obj
　　Func.apply(obj,arguments)
　　//4.返回建立的物件obj
　　return obj
}
 

四.測試_new函式

封裝好後，我們來測試一下封裝的_new函式，看看它是否實現了和原生new關鍵字同樣的功能。

//建立Person建構函式，引數為name,age
function Person(name,age){
　　this.name = name;
　　this.age = age;
} 
function _new(){
　　//1.拿到傳入的引數中的第一個引數，即建構函式名Func
　　var Func = [].shift.call(arguments);
　　//2.建立一個空物件obj,並讓其繼承Func.prototype
　　var obj = Object.create(Func.prototype);
　　//3.執行建構函式，並將this指向建立的空物件obj
　　Func.apply(obj,arguments)
　　//4.返回建立的物件obj
　　return obj
}
xm = _new(Person,'xiaoming',18);
console.log(xm);

測試結果：

從測試結果看到，_new函式的功能與new關鍵字完全一致。

總結

以上所述是小編給大家介紹的原生JS封裝_new函式實現new關鍵字的功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回覆大家的！