Javascript中構(gòu)造函數(shù)要注意的一些坑
前言
最近在家看書:《你不知道的Javascript》,看到構(gòu)造函數(shù)調(diào)用時會綁定this,就順便打開控制臺輸了一些代碼,詳細(xì)測試了一下。
構(gòu)造函數(shù)簡單的講,即定義出來專供new 式調(diào)用的函數(shù)。
如:
function A(b) { this.b = b || 'bbb'; }
然后你就可以通過new ,來構(gòu)建一個 A 的實(shí)例:
var a = new A('B')
但是,一個首要的坑是,構(gòu)造函數(shù)與一個普通函數(shù)并無不同,如果你故意不使用new,或忘記用new,都會得到奇怪的錯誤:
var aa = A('adadada');
這樣調(diào)用,并不會顯式地報(bào)錯,但實(shí)際上隱患深埋:
- aa并不是A的實(shí)例,而變成了 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)用,還是有一個不同點(diǎn)的,即:不帶new時,依然會莫名聲明一個 叫 b 的全局變量。
既然,構(gòu)造函數(shù)有顯式返回值時,會代替默認(rèn)應(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)用的默認(rèn)行為。
下圖是更多測試:
簡單的總結(jié):
顯式的返回以下值:undefined, null, boolean, number等基礎(chǔ)類型,并不會代替 new 式調(diào)用的默認(rèn)行為。
但顯式返回以下值:{},[],RegExp, Date, Function,均會代替 new 調(diào)用的默認(rèn)返回值 this.
大家都看到了,后者,全都是 對象,是復(fù)雜類型。
隨手一記
前面說過,本該進(jìn)行 new 式調(diào)用的構(gòu)造函數(shù),被當(dāng)作普通函數(shù)調(diào)用,那么,如果函數(shù)體中,有 this.x = xxx
這樣的賦值語句,則會被賦值給全局對象(即 windows),從而變成一個全局變量。
原因相信大家都知道,而本書中也專門講過:函數(shù)調(diào)用時,默認(rèn)的this就是綁定至全局對象。
而本書還提到:如果函數(shù)體是嚴(yán)格模式,則不會綁定 this 至全局對象,如:
var a = function (){'use strict';this.b = 'b'; return /111/g}; a(); // 直接報(bào)錯
因?yàn)閲?yán)格模式下,默認(rèn)的 this 指向 undefined
所以說,有兩點(diǎn)要提一下:
- 嚴(yán)格模式真不錯
- 如果你想聲明一個構(gòu)造函數(shù),那么嚴(yán)格模式是非常必要的
總結(jié)
以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。
- JavaScript字符串轉(zhuǎn)數(shù)字的5種方法及遇到的坑
- 使用PHP json_decode可能遇到的坑與解決方法
- 基于js粘貼事件paste簡單解析以及遇到的坑
- JavaScript代碼編寫中各種各樣的坑和填坑方法
- JavaScript中使用typeof運(yùn)算符需要注意的幾個坑
- JS大坑之19位數(shù)的Number型精度丟失問題詳解
- JS面試題大坑之隱式類型轉(zhuǎn)換實(shí)例代碼
- 對象題目的一個坑 理解Javascript對象
- 弱類型語言javascript開發(fā)中的一些坑實(shí)例小結(jié)【變量、函數(shù)、數(shù)組、對象、作用域等】
相關(guān)文章
three.js 實(shí)現(xiàn)露珠滴落動畫效果的示例代碼
這篇文章主要介紹了three.js 實(shí)現(xiàn)露珠滴落動畫效果的示例代碼,非常不錯,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-03JavaScript高級程序設(shè)計(jì) 讀書筆記之八 Function類及閉包
Function類及閉包,學(xué)習(xí)js的朋友可以參考下2012-02-02實(shí)用的js 焦點(diǎn)圖切換效果 結(jié)構(gòu)行為相分離
行為層是由js來實(shí)現(xiàn)的,這里的工作只是搭建了一個簡單的骨架,如果要讓效果圖美觀些并符合設(shè)計(jì)要求,就要發(fā)揮css的強(qiáng)大作用了。2010-06-06