溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一.前言
眾所周知：沒有對象怎么辦？那就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關鍵字的功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
