JS實現new關鍵字的功能
阿新 • • 發佈:2019-01-05
一.前言
眾所周知:沒有物件怎麼辦?那就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關鍵字的功能,希望對大家有所幫助,如果大家有任何疑問歡迎給我留言,小編會及時回覆大家的!