Javascript中構(gòu)造函數(shù)要注意的一些坑
前言
最近在家看書:《你不知道的Javascript》,看到構(gòu)造函數(shù)調(diào)用時會綁定this,就順便打開控制臺輸了一些代碼,詳細測試了一下。
構(gòu)造函數(shù)簡單的講,即定義出來專供new 式調(diào)用的函數(shù)。
如:
function A(b) {
this.b = b || 'bbb';
}
然后你就可以通過new ,來構(gòu)建一個 A 的實例:
var a = new A('B')
但是,一個首要的坑是,構(gòu)造函數(shù)與一個普通函數(shù)并無不同,如果你故意不使用new,或忘記用new,都會得到奇怪的錯誤:
var aa = A('adadada');
這樣調(diào)用,并不會顯式地報錯,但實際上隱患深埋:
- aa并不是A的實例,而變成了 undefined
- 多了一個名為 b 的全局變量,值是 ‘a(chǎn)dadada'
這就是無new 調(diào)用構(gòu)造函數(shù)的坑。
下面說其他的:
構(gòu)造函數(shù)自身有返回值
比如:
function A(b) {
this.b = b || 'bbb';
return {b: '0000'};
}
這個時候,無論是否使用new來調(diào)用A,得到的結(jié)果都會相同,即得到一個普通對象:{b:'0000′}
當(dāng)然,此時是否帶 new 調(diào)用,還是有一個不同點的,即:不帶new時,依然會莫名聲明一個 叫 b 的全局變量。
既然,構(gòu)造函數(shù)有顯式返回值時,會代替默認應(yīng)該返回的this,成為返回值,那么,是不是所有返回值都能覆蓋this呢?
測試顯式返回值
眾所周知,函數(shù)都是有返回值的,只是如果沒有 return,則會返回undefined.
那么,我就在構(gòu)造函數(shù)里顯式返回一個undefined,會怎么樣?
var a = function (){this.b = 'b'; return undefined};
new a(); // {b:'b'}
顯式返回一個 undefined ,并不能阻止構(gòu)造函數(shù)式調(diào)用的默認行為。
下圖是更多測試:

簡單的總結(jié):
顯式的返回以下值:undefined, null, boolean, number等基礎(chǔ)類型,并不會代替 new 式調(diào)用的默認行為。
但顯式返回以下值:{},[],RegExp, Date, Function,均會代替 new 調(diào)用的默認返回值 this.
大家都看到了,后者,全都是 對象,是復(fù)雜類型。
隨手一記
前面說過,本該進行 new 式調(diào)用的構(gòu)造函數(shù),被當(dāng)作普通函數(shù)調(diào)用,那么,如果函數(shù)體中,有 this.x = xxx 這樣的賦值語句,則會被賦值給全局對象(即 windows),從而變成一個全局變量。
原因相信大家都知道,而本書中也專門講過:函數(shù)調(diào)用時,默認的this就是綁定至全局對象。
而本書還提到:如果函數(shù)體是嚴格模式,則不會綁定 this 至全局對象,如:
var a = function (){'use strict';this.b = 'b'; return /111/g};
a(); // 直接報錯
因為嚴格模式下,默認的 this 指向 undefined
所以說,有兩點要提一下:
- 嚴格模式真不錯
- 如果你想聲明一個構(gòu)造函數(shù),那么嚴格模式是非常必要的
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
相關(guān)文章
JavaScript關(guān)閉當(dāng)前頁面(窗口)不帶任何提示
這篇文章主要介紹了JavaScript關(guān)閉當(dāng)前頁面(窗口)不帶任何提示的具體實現(xiàn),需要的朋友可以參考下2014-03-03
利用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能
vue數(shù)據(jù)雙向綁定是通過數(shù)據(jù)劫持結(jié)合發(fā)布者-訂閱者模式的方式來實現(xiàn)的,下面這篇文章主要給大家介紹了關(guān)于如何利用js實現(xiàn)Vue2.0中數(shù)據(jù)的雙向綁定功能的相關(guān)資料,需要的朋友可以參考下2021-07-07
微信小程序使用GoEasy實現(xiàn)websocket實時通訊
這篇文章主要介紹了微信小程序使用GoEasy實現(xiàn)websocket實時通訊的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05

