声明无var关键字的变量 [英] Declaring variables without var keyword

问题描述

在w3schools中写道：

如果你声明一个变量，而不使用var，变量总是变成GLOBAL。 / p>

在函数内部声明全局变量是否有用？我可以想象在一些事件处理程序中声明一些全局变量，但是它有什么好处？更好地使用RAM？

解决方案

不，没有RAM好处或类似的东西。

w3schools正在讨论的是我称之为 隐性全局的恐怖 。考虑这个函数：

  function foo（）{
 var variable1，variable2; 
 
 variable1 = 5; 
 varaible2 = 6; 
返回variable1 + variable2; 
} 
  

看起来很简单，但它返回 NaN ，而不是 11 ，因为在 varaible2 = 6; 行上有拼写错误。它创建一个带有拼写错误名称的全局变量：



function foo（）{var variable1，variable2; variable1 = 5; varaible2 = 6; return variable1 + variable2;} console.log（foo（））; // NaNconsole.log（varaible2）; // 6？！？！？！

函数赋值给 varaible2 （注意错字），但是 varaible2 没有在任何地方声明。通过JavaScript中的作用域链的机制，这最终成为对全局对象（ ）上的（new）属性的隐式赋值（可以作为 window let ， const 和 class 创建新的全局。）

我的例子是一个错字，但当然，如果您想要的话，您可以故意这样做。毕竟，这是语言中一个明确定义的部分。所以：

  myNewGlobal = 42; 
  

...任意位置 myNewGlobal isn' t声明将创建新的全球。

但我强烈建议不要故意这样做：它使代码难以阅读和维护，并且代码将不兼容使用JavaScript模块时，它们变得更加普遍和普遍。如果你真的需要在运行时从函数内部创建一个全局变量（已经是红旗，但是有合理的理由），通过分配给窗口（或者任何引用你的环境中的全局对象;它在浏览器上的 window ）：

  window.myNewGlobal = 42; 
  

事实上，我建议使用ES5的 strict mode 。严格模式使分配给未声明标识符的错误，而不是静静地创建一个全局。如果我们使用严格模式，上面的 foo 的问题将更容易诊断：

use strict; //开启此编译单元的严格模式foo（）{var variable1，variable2; variable1 = 5; varaible2 = 6; //< === ReferenceError return variable1 + variable2;} console.log（foo（））;

---

有点切线，但总的来说，我建议尽可能避免使用全局变量。全局名称空间在浏览器上已经非常非常混乱。对于大多数具有名称的元素，浏览器为DOM中的每个元素创建一个全局变量，其中 id ，它自己的几个预定义的全局变量（如 title ）很容易与您的代码发生冲突。

你自己一个很好的范围函数，把你的符号放在它里面：

 （function（）{
 var your，symbols， （）{
} 
 
函数doSomethingElse（）{
} 
}） （）; 
  

如果你这样做了，你可能想要启用严格模式：

 （function（）{
use strict; 
 var your，symbols，here，if_theynene，to_be_shared，among_functions; 
 
函数doSomething（）{
} 
 
函数doSomethingElse（）{
} 
}）（）; 
  

......如前所述，它具有将未分配标识符的分配转换为错误的优势与各种其他有用的东西）。

请注意，在JvaScript 模块（在ES2015中添加，但现在才开始寻找它们的方法），默认情况下启用严格模式。 （对于 class 定义也是如此，在ES2015中也是新的。）

At w3schools there is written:

If you declare a variable, without using "var", the variable always becomes GLOBAL.

Is it useful to declare global variable inside the function? I can imagine to declare some global variables in some event handler, but what is it good for? Better usage of RAM?

解决方案

No, there's no RAM benefit or anything like that.

What w3schools is talking about is something I call The Horror of Implicit Globals. Consider this function:

function foo() {
    var variable1, variable2;

    variable1 = 5;
    varaible2 = 6;
    return variable1 + variable2;
}

Seems simple enough, but it returns NaN, not 11, because of the typo on the varaible2 = 6; line. And it creates a global variable with the typo'd name:

function foo() {
    var variable1, variable2;

    variable1 = 5;
    varaible2 = 6;
    return variable1 + variable2;
}
console.log(foo());     // NaN
console.log(varaible2); // 6?!?!?!

This is because the function assigns to varaible2 (note the typo), but varaible2 isn't declared anywhere. Through the mechanics of the scope chain in JavaScript, this ends up being an implicit assignment to a (new) property on the global object (which you can access as window on browsers).

That's just a "feature" of loose-mode JavaScript, assigning to a completely undeclared identifier isn't an error; instead, it creates a propertly on the global object, and properties on the global object are global variables. (Up through ES5, all globals were properties of the global object. As of ES2015, though, a new kind of global was added that isn't a property of the global object. Global-scope let, const, and class create the new kind of global.)

My example is a typo, but of course, you could do it on purpose if you wanted. It's a clearly-defined part of the language, after all. So:

myNewGlobal = 42;

...anywhere that myNewGlobal isn't declared will create the new global.

But I would strongly recommend never doing it in purpose: It makes the code hard to read and maintain, and that code will be incompatible with JavaScript modules when they become more common and widespread. If you really need to create a global variable from within a function at runtime (already a red flag, but there are valid reasons for it), do it explicitly by assigning to a property on window (or whatever refers to the global object in your environment; it's window on browsers):

window.myNewGlobal = 42;

In fact, I'd suggest using ES5's strict mode. Strict mode makes assigning to an undeclared identifier an error rather than silently creating a global. If we'd been using strict mode, the problem with foo above would have been much easier to diagnose:

"use strict"; // Turns on strict mode for this compilation unit

function foo() {
    var variable1, variable2;

    variable1 = 5;
    varaible2 = 6;                 // <=== ReferenceError
    return variable1 + variable2;
}
console.log(foo());

---

Somewhat tangential, but in general I'd recommend avoiding globals wherever possible. The global namespace is already very, very cluttered on browsers. The browser creates a global for every element in the DOM with an id, for most elements with a name, and has several predefined globals of its own (like title) which can easily conflict with your code.

Instead, just define yourself a nice scoping function and put your symbols in it:

(function() {
    var your, symbols, here, if_they_need, to_be_shared, amongst_functions;

    function doSomething() {
    }

    function doSomethingElse() {
    }
})();

And if you do that, you might want to enable strict mode:

(function() {
    "use strict";
    var your, symbols, here, if_they_need, to_be_shared, amongst_functions;

    function doSomething() {
    }

    function doSomethingElse() {
    }
})();

...which, as mentioned, has the advantage of turning assignments to undeclared identifiers into errors (along with various other helpful things).

Note that in a JvaScript module (added in ES2015, but only now beginning to find their way into the wild), strict mode is enabled by default. (This is also the case with class definitions, also new in ES2015.)

这篇关于声明无var关键字的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！