js封裝_new函數以及實作new關鍵字的方法（附程式碼測試）

這篇文章帶給大家的內容是關於js封裝_new函數以及實作new關鍵字的方法（附程式碼測試），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

一、前言

眾所周知：沒有物件怎麼辦？那就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的繼承方式有哪些？ js實作繼承的幾種方式介紹

js如何操作來實現點擊小圖展示出大圖的效果？ （程式碼範例）

js中淺拷貝與深拷貝的簡單介紹以及實作方法

以上是js封裝_new函數以及實作new關鍵字的方法（附程式碼測試）的詳細內容。更多資訊請關注PHP中文網其他相關文章！