2015-06-22 64 views
0

AirBnb Javascript Style Guide建議模塊下面的代碼模式:函數(全局){...}(this)如何工作?

// fancyInput/fancyInput.js 

!function(global) { 
    'use strict'; 

    var previousFancyInput = global.FancyInput; 

    function FancyInput(options) { 
     this.options = options || {}; 
    } 

    FancyInput.noConflict = function noConflict() { 
     global.FancyInput = previousFancyInput; 
     return FancyInput; 
    }; 

    global.FancyInput = FancyInput; 
}(this); 

但是,一旦你比如運行:

FancyInput({a: 1, b: 2}); 

控制檯上顯示這個錯誤「遺漏的類型錯誤:無法設置的未定義的屬性‘選項’」 。

我想明白爲什麼這裏面的FancyInput函數是Window。到目前爲止,我可以在開始時擴展這個模塊模式。我應該以另一種方式綁定它嗎?

+1

難道你不應該用'var x = new FancyInput({...})'調用它嗎? –

回答

2

它的要點是全球範圍內的this在瀏覽器中是window。在其他環境中(主要是node.js),它不是window,而是一個不同的全局對象,但在很多方面我們關心它的行爲是相同的。

您的代碼不工作,因爲你需要使用new關鍵字來實例化結構:

new FancyInput({a: 1, b: 2}); 

這將創建一個新的對象,這樣的類方法中this.作品&構造。

+0

謝謝,真的很好的解釋 – raulricardo21