js封裝_new函數(shù)以及實(shí)現(xiàn)new關(guān)鍵字的方法（附代碼測(cè)試）

一、前言

眾所周知：沒有對(duì)象怎么辦？那就new一個(gè)！

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

二、原始的new

首先，我們先new一個(gè)對(duì)象看看：

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

打印結(jié)果：

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

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

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

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

3. 返回新對(duì)象；

三、封裝_new函數(shù)

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

_new函數(shù)需要傳入以下幾個(gè)參數(shù)：
第一個(gè)參數(shù)：構(gòu)造函數(shù)名Func；
第二個(gè)參數(shù)及后面的參數(shù)：構(gòu)造函數(shù)的參數(shù)

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

四、測(cè)試_new函數(shù)

封裝好后，我們來測(cè)試一下封裝的_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ù)中的第一個(gè)參數(shù)，即構(gòu)造函數(shù)名Func
　　var Func = [].shift.call(arguments);
　　//2.創(chuàng)建一個(gè)空對(duì)象obj,并讓其繼承Func.prototype
　　var obj = Object.create(Func.prototype);
　　//3.執(zhí)行構(gòu)造函數(shù)，并將this指向創(chuàng)建的空對(duì)象obj
　　Func.apply(obj,arguments)
　　//4.返回創(chuàng)建的對(duì)象obj
　　return obj
}

xm = _new(Person,'xiaoming',18);

console.log(xm);

測(cè)試結(jié)果：

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com