JavaScript global variable declaration syntax - Stack Overflow

admin管理员组

文章数量:1428481

I'm writing a Javascript library that I hope to be able to minify with the Closure Compiler's ADVANCED_OPTIMIZATIONS option. The library has maybe two dozen global variables which set lower and upper range limits, string literals, etc.

To make these variable accessible from other source files and to avoid dead code removal, I have to "export" them. See Advanced Compilation and Externs.

Therefore, rather than declare variables with this syntax:

var fooMinValue = 10;

I plan to use this syntax:

 window['fooMinValue'] = 10;

I've tested this and it seems to work fine. My questions are, is there any downside to using this syntax and is it supported in all browsers released since IE 6? (Or should I be using a pletely different technique altogether?)

I'm writing a Javascript library that I hope to be able to minify with the Closure Compiler's ADVANCED_OPTIMIZATIONS option. The library has maybe two dozen global variables which set lower and upper range limits, string literals, etc.

To make these variable accessible from other source files and to avoid dead code removal, I have to "export" them. See Advanced Compilation and Externs.

Therefore, rather than declare variables with this syntax:

var fooMinValue = 10;

I plan to use this syntax:

 window['fooMinValue'] = 10;

I've tested this and it seems to work fine. My questions are, is there any downside to using this syntax and is it supported in all browsers released since IE 6? (Or should I be using a pletely different technique altogether?)

• javascript
• global-variables
• minify
• google-closure-piler

Share Improve this question Follow edited Oct 26, 2012 at 17:29 bfavaretto 71.9k1818 gold badges117117 silver badges159159 bronze badges asked Oct 26, 2012 at 17:23 KarlKarl 1,86411 gold badge2525 silver badges4040 bronze badges 4

• 1 In global code, you can use this to access the global object. Also if your names are alphanumerics, you don't need the bracket-notation: this.fooMinValue = 10;. – Šime Vidas Commented Oct 26, 2012 at 17:35
• @ŠimeVidas FYI: Closure generates the following warning for this syntax this.fooMinValue = 10; JSC_USED_GLOBAL_THIS: dangerous use of the global this object at line 30 character 0 this.fooMinValue = 10;. Regardless, I can't use this in this case because since the varible is not enclosed in quotes, Closure renames it. Useful (for me) ment, none the less. – Karl Commented Oct 26, 2012 at 17:53
• Hm, I'm not sure what's so dangerous about using the global this... Consider this pattern: (function ( root ){ root['fooMinValue'] = 10; }( this )); So you capture the global object into the root parameter, and then use that parameter to set the global properties. This way, you can still be agnostic about accessing the global object (you don't depend on window). – Šime Vidas Commented Oct 26, 2012 at 17:59
• @ŠimeVidas I was checking out the piler warning and came across this Q Closure-piler-warning-dangerous-use-of-the-global-this-object. – Karl Commented Oct 26, 2012 at 23:40

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Although both are properties of the global object, there is a difference: when you declare the variable with var, its [[Configurable]] internal attribute gets set to false. Therefore, it's not possible to change its attributes with Object.defineProperty (except for [[Value]]). The most notable effect is that such variables cannot be deleted:

​var foo = 'bar';
window['bar'] = 'baz';
console.log(foo); // 'bar'
console.log(bar); // 'baz'
delete foo;       // doesn't work, you can't delete vars
delete bar;       // works, bar is an object property
console.log(foo); // 'bar'
console.log(bar); // ReferenceError

Also, when assigning a variable to a property, you make a COPY of the value instead of referencing the variable. This means external changes to the property don't affect the value of the variable.

(function() {
  var foo = 'bar';
  window['foo2'] = foo; //export foo
  console.log(foo);  // will output 'bar'
  setTimeout(function() { console.log(foo) }, 1000); //will output 'bar'
})();
window['foo2'] = 'baz';
console.log(window['foo2']); // will output 'baz'

The above code will produce the following output:

'bar'
'baz'
'bar'

It is the same except that if your script is not running on a browser it is very probable that window will be undefined.

You are wele!

It will work; it's perfectly valid syntax; and it's supported in IE6 and up.

Demo: http://ie6test.it/?url=http://jsbin./usafeg/2

本文标签： JavaScript global variable declaration syntaxStack Overflow