原生JS封裝 new函式,實現new關鍵字的功能

2021-08-19 02:36:45 字數 1615 閱讀 1142

眾所周知:沒有物件怎麼辦?那就new乙個!

那麼在js中,當我們new乙個物件的時候,這個new關鍵字內部都幹了什麼呢?

首先,我們先new乙個物件看看:

//建立person建構函式,引數為name,age

function person(name,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函式需要傳入以下幾個引數:

第乙個引數:建構函式名func;

第二個引數及後面的引數:建構函式的引數

function _new()

//建立person建構函式,引數為name,age

function person(name,age)

function _new()

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

console.log(xm);

測試結果:

從測試結果看到,_new函式的功能與new關鍵字完全一致。

完。

原生js封裝函式

原理是對元素的所有的子節點做乙個遍歷。然後做乙個判斷,如果是子元素節點 nodetype 1 則遍歷該子元素的所有的子節點,用遞迴檢查是否包含空白節點 如果處理的子節點是文字節點 nodetype 3 則檢查是否是純粹的空白節點,如果是,就將它從xml物件中刪除。1 function removew...

js 原生ajax 封裝函式

1 開啟伺服器wampserver 2 將檔案放置在wampserver的www資料夾下 3 開啟時網頁位址列為localhost www下的位址。eg http localhost myworld 5.19ajax index.html?hbt 1495158145298 4 呼叫方式 函式為 a...

原生JS 封裝call apply 函式

var value window var obj function show name,age 改變this指向的原理大概是這個樣子的 obj.show show obj.show delete obj.show 很簡單的過程,應該都能明白在函式的原型鏈上封裝兩個函式 封裝call函式 functi...