JavaScript閉包與全局變量

Question

哪種最佳實踐可以帶來更好的性能？

更新：jsperf.com報告（a）更快@ http://jsperf.com/closure-vs-global-variable

a）使用閉包

var obj = {
    init: function() {
        var self = this;
        $('#element').click(function() {
            self.clickEvent();
        });
    },
    clickEvent: function() {
        this.miscMethod();
    },
    miscMethod: function() {}
};

b）使用全局變量

var obj = {
    init: function() {
        // removed self=this closure
        $('#element').click(this.clickEvent); // simple method handler
    },
    clickEvent: function() {
        obj.miscMethod(); // global variable used
    },
    miscMethod: function() {}
};

Answer 1

兩者應（幾乎）執行相同的操作。

最佳做法是避免全局變量。

Answer 2

您的關閉代碼的問題是，它不能在所有情況下都起作用。 如果您這樣做：

obj.clickEvent()

這樣就可以了 但是，如果您這樣做：

var f = obj.clickEvent;
//hundreds of lines of code
f();

則不會，因為this不會在該函數調用上引用obj 。 但是，如果您只是立即將obj傳遞給沒有以奇怪的方式使用它的東西，那么您就不會有問題，所以它是“干凈的” ...但是我仍然認為犯錯誤太容易了，因此，我建議使用全局變量方法。

Answer 3

很高興在這里寫有關閉包的內容。

JavaScript閉包-MDC

Answer 4

在大多數瀏覽器中，性能沒有顯着差異。 但是，使用this ，Chrome似乎會出現75％的速度下降 （如果我輸入錯誤，請更正我的快速性能測試）。 可能是主要的最佳做法的問題是，它有時是不清楚哪個對象this指的是。

至於聲明（或使用而不聲明） 自己的全局變量，如果我們使用過多的全局變量，我們將其稱為“全局命名空間”。 這可能導致JavaScript代碼的不同部分相互干擾，避免使用閉包或“命名空間”進行良好的封裝。 最佳做法是僅使用一個或兩個全局變量。 例如，jQuery僅使用兩個： jQuery和$ （如果與另一個庫沖突，則可以關閉后者）。

Answer 5

1）由於全局變量很危險，請考慮將全局變量名稱放在所有大寫形式中 ，以使任何正在閱讀代碼的人（包括您）都可以看到它們。

2）您的第一個代碼段無效。

function obj = {
     // your object stuff
}

應該

var obj = {
    // your object stuff
}

另外，這實際上不是關閉。 這是在Java中實現單例的方式。

var mySingleton = (function () {
    var privateVar = "foo";

    function privateFunction() { //this function can only be accessed by other private 
                                 //and privaleged functions defined in this closure
        // do stuff.
    }

    //stuff to run immediately that will also have access to private variables/functions

    singletonObj = {
         key1:"value1",
         key2:"value2",
         privilgedFunction: function () { // this method is accessible from the outside
             // do stuff. you can access private variables in here
         }
    };

    return singletonObj; //return the object that you just created
}()); //immediately execute the function, returning an object with private variables

我將立即執行的函數的結果分配給變量。 該函數返回一個對象，因此，我將一個對象分配給該變量。 但是該對象也具有私有成員和私有功能。