So confused about why vars work sometimes with or without var?
I am really confused as to why sometimes vars will not work when "var" is declared in front of them when used in a namespaced object. Isn't adding "var" in front of e开发者_Python百科very variable the correct thing to do to keep it outside the global namespace?
Or would creating any var without declaring "var" first in my namespaced object, ensure of this, so I don't eed to worry about "var"?
Here's an example of my code:
MYNAME.DoStuff = {
initialize: function() {
var var1 = 'name'; //1
var2 = 'name'; //2
this.var3 = 'name'; //3
var $var4 = $('#' + name); //4
$var5 = $('#' + name); //5
this.$var6 = $('#' + name); //6
},
linkStuff: function() {
// then use the vars from the init above in here
}
}
MYNAME.DoStuff.initialize();
Can someone tell me which number (1, 2, or 3) is correct? Are there cases where I would use more than one or all? How about when I need to do DOM references with jQuery? Which way is correct (4, 5, or 6)?
The var
statement will bind the variable to the scope of the current function, in your example var1
is accessible only within initialize
.
Your second example, var2 = 'name';
is simply an assignment made to a -possibly- undeclared identifier.
This is an anti-pattern, and should be avoided. If the identifier is not resolvable higher in the scope chain, var2
will end up being a property of the global object -an implied global, since most of the time you actually try to avoid globals-.
Moreover, the new ECMAScript 5 Strict Mode, completely disallows this kind of assignments, please avoid them...
The third example, this.var3
will create a property in the current object, in your example the this
value of initialize
will refer to MYNAME.DoStuff
because you invoke the initialize method by MYNAME.DoStuff.initialize();
.
In this third example you can access this kind of properties on your linkStuff
function, just by this.var3
- if you invoke that linkStuff
function properly, e.g. MYNAME.DoStuff.linkStuff();
-.
Based on what it looks like you're trying to do in the linkStuff
method, you might try this:
var DoStuff = {
firstVar: null,
secondVar: null,
initialize: function() {
// set initial values
this.firstVar = 'name';
this.secondVar = 'name2';
},
linkStuff: function() {
alert(this.firstVar); // 'name'
}
};
var myname = DoStuff;
myname.initialize();
myname.linkStuff();
As @CMS pointed out, var
sets up a variable in the current scope. That's why you do var variablename
outside of functions to create globals and var variablename
inside functions to create locals.
But in the context of objects, there's more going on. Javascript has a feature called closures, which enables very powerful tricks like private, public and privileged methods (I don't normally like linking to Crockford because he's a bit of an arrogant knob, but sometimes he's a smart knob).
The other thing to watch out for is that Javascript objects are actually very different from objects in most other languages. In Javascript, you don't define them, you build them. If you do something like this:
function stuff() {
// Do init code here
this.linkStuff = function() {
// Do linkstuff code here
}
}
... you can do myname.dostuff = new stuff()
and your initialization code will run automatically. That is also the point to fetch a jQuery object and assign it to a variable for later use.
精彩评论