JavaScript close versus global variable

Question

What is the best practice that leads to better performance?

UPDATE: jsperf.com reports that (a) is faster @ http://jsperf.com/closure-vs-global-variable

a) using closure

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

b) using a global variable

 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

Both should run (almost) the same way.

Global bindings are best avoided.

Answer 2

The problem with your closing code is that it will not work in all cases. If you do:

 obj.clickEvent() 

then it will work. But if you do this:

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

then it will not, because this will not reference obj to this function call. If you immediately go obj to something that doesn't use it in any weird way, then you won't have this problem, so it’s “cleaner” ... but I still think it's too easy to make mistakes therefore I recommend the global variable approach.

Answer 3

Good write about closing here.

Closing JavaScript - MDC

Answer 4

In most browsers there is no significant difference in performance; however, Chrome seems to suffer 75% slowdown using this (fix my quick performance test if I'm wrong). Probably the main problem is that sometimes it may not be clear which object this refers to.

As for declaring (or using without declaring) your own global variables, we call this global namespace “pollution” if we use too many of them. This can cause different parts of the JavaScript code to interfere with each other, avoiding leaks using closures or "namespacing". Best practice is to use no more than one or two global variables. For example, jQuery uses only two: jQuery and $ (the latter can be disabled if it conflicts with another library).

Answer 5

1) Since global variables are dangerous, think that global variable names should be in all the headers so that they are obvious to everyone (including you) who read the code.

2) your first snipp is invalid.

 function obj = { // your object stuff } 

it should be

 var obj = { // your object stuff } 

Additionally, this is actually not a closure. This is how you implement singleton in Javascript.

 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 

I assign the result to a function that I immediately execute for the variable. This function returns an object, so I assign an object to this variable. BUT this object also has private members and private functions.