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 的實例：

var a = new A('B')

但是，一個首要的坑是，構(gòu)造函數(shù)與一個普通函數(shù)并無不同，如果你故意不使用new，或忘記用new，都會得到奇怪的錯誤：

var aa = A('adadada');

這樣調(diào)用，并不會顯式地報錯，但實際上隱患深埋：

1. aa并不是A的實例，而變成了 undefined
2. 多了一個名為 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ù)有顯式返回值時，會代替默認(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ù)雜類型。

隨手一記

前面說過，本該進行 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(); // 直接報錯

因為嚴(yán)格模式下，默認(rèn)的 this 指向 undefined

所以說，有兩點要提一下：

1. 嚴(yán)格模式真不錯
2. 如果你想聲明一個構(gòu)造函數(shù)，那么嚴(yán)格模式是非常必要的
   

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。