原生JS封裝_new函數(shù)實(shí)現(xiàn)new關(guān)鍵字的功能

發(fā)布時間：2020-08-24 07:04:59 來源：腳本之家閱讀：281 作者：難涼熱血，前端菜雞！欄目：web開發(fā)

一.前言

眾所周知：沒有對象怎么辦？那就new一個！

那么在JS中，當(dāng)我們new一個對象的時候，這個new關(guān)鍵字內(nèi)部都干了什么呢？
現(xiàn)在我們就來剖析一下原生JS中new關(guān)鍵字內(nèi)部的工作原理。

二.原始的new

首先，我們先new一個對象看看：

 //創(chuàng)建Person構(gòu)造函數(shù)，參數(shù)為name,age
 function Person(name,age){
 　　this.name = name;
 　　this.age = age;
 　}
 //實(shí)例化對象小明
 xm = new Person('xiaoming',18);
 //打印實(shí)例化出來的對象小明
 console.log(xm);

打印結(jié)果：

原生JS封裝_new函數(shù)實(shí)現(xiàn)new關(guān)鍵字的功能

從打印結(jié)果中可以看到：

用new關(guān)鍵字實(shí)例化對象時，首先創(chuàng)建了一個空對象xm，并且這個空對象包含兩個屬性name和age，分別對應(yīng)構(gòu)造函數(shù)中的兩個屬性，其次我們也可以知道實(shí)例化出來的這個對象xm是繼承自Person.prototype,那么現(xiàn)在我們就可以總結(jié)出new關(guān)鍵字在實(shí)例化對象時內(nèi)部都干了什么，其實(shí)，new關(guān)鍵字內(nèi)部干了如下三件事（已知構(gòu)造函數(shù)為Func）：

1.創(chuàng)建一個空對象，并使該空對象繼承Func.prototype；

2.執(zhí)行構(gòu)造函數(shù)，并將this指向剛剛創(chuàng)建的新對象；

3.返回新對象；

三.封裝_new函數(shù)

當(dāng)我們知道new關(guān)鍵字的內(nèi)部原理后，我們就可以封裝一個_new函數(shù)，使其用于與new關(guān)鍵字同樣的功能。

_new函數(shù)需要傳入以下幾個參數(shù)：

第一個參數(shù)：構(gòu)造函數(shù)名Func；

第二個參數(shù)及后面的參數(shù)：構(gòu)造函數(shù)的參數(shù)

 function _new(){
　　//1.拿到傳入的參數(shù)中的第一個參數(shù)，即構(gòu)造函數(shù)名Func
 　 var Func = [].shift.call(arguments);
 　　//2.創(chuàng)建一個空對象obj,并讓其繼承Func.prototype
 　　var obj = Object.create(Func.prototype);
 　　//3.執(zhí)行構(gòu)造函數(shù)，并將this指向創(chuàng)建的空對象obj
 　　Func.apply(obj,arguments)
 　　//4.返回創(chuàng)建的對象obj
 　　return obj
 }

四.測試_new函數(shù)

封裝好后，我們來測試一下封裝的_new函數(shù)，看看它是否實(shí)現(xiàn)了和原生new關(guān)鍵字同樣的功能。

 //創(chuàng)建Person構(gòu)造函數(shù)，參數(shù)為name,age
 function Person(name,age){
 　　this.name = name;
 　　this.age = age;
 } 
 function _new(){
 　　//1.拿到傳入的參數(shù)中的第一個參數(shù)，即構(gòu)造函數(shù)名Func
 　　var Func = [].shift.call(arguments);
 　　//2.創(chuàng)建一個空對象obj,并讓其繼承Func.prototype
 　　var obj = Object.create(Func.prototype);
 　　//3.執(zhí)行構(gòu)造函數(shù)，并將this指向創(chuàng)建的空對象obj
 　　Func.apply(obj,arguments)
 　　//4.返回創(chuàng)建的對象obj
 　　return obj
 }
 xm = _new(Person,'xiaoming',18);
 console.log(xm);

測試結(jié)果：

原生JS封裝_new函數(shù)實(shí)現(xiàn)new關(guān)鍵字的功能

從測試結(jié)果看到，_new函數(shù)的功能與new關(guān)鍵字完全一致。

總結(jié)

以上所述是小編給大家介紹的原生JS封裝_new函數(shù)實(shí)現(xiàn)new關(guān)鍵字的功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！

向AI問一下細(xì)節(jié)

原生JS封裝_new函數(shù)實(shí)現(xiàn)new關(guān)鍵字的功能

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽