HTML JavaScript包含文件变量范围

If I include a JavaScript file in my HTML page, do the variables declared in my JavaScript file also have scope in my <script /> tags in my HTML page? For example, in my included JS file, I declare a variable:

如果我在HTML页面中包含JavaScript文件,那么我的JavaScript文件中声明的变量是否也在我的HTML页面的标记中有作用域?例如,在我包含的JS文件中,我声明了一个变量:

var myVar = "test";

Then inside my HTML page, what will this produce (if it's after my include script tag)?

然后在我的HTML页面中,这将产生什么(如果它是在我的include脚本标记之后)?

alert(myVar);

3 个解决方案

#1

If you declare the variable outside of any function as

如果将变量声明为任何函数之外的函数

var myVar = 'test';

or at any location as

或在任何地点

myVar = 'test';

window.myVar = 'test';

It should be added to the Global Object (window) and be available anywhere as

它应该被添加到全局对象(窗口)并随时可用

alert(myVar);

alert(window.myVar);

alert(window['myVar']);

#2

It will produce an alert containing "test".

它将产生一个包含“测试”的警报。

All variables declared at the top level in JavaScript share the same scope. If you want to use variables in one file that won't * with another, then you can use an anonymous function to introduce a new scope:

在JavaScript中*声明的所有变量共享相同的范围。如果要在一个文件中使用不会与另一个文件冲突的变量,则可以使用匿名函数来引入新范围:

var myVar = "something else";
(function () {var myVar = "test"; alert(myVar)})();
alert(myVar);

edit: As BYK points out, you can expand this into something that resembles a full fledged namespace, by assigning an object literal:

编辑:正如BYK指出的那样,您可以通过分配对象文字将其扩展为类似于完整的命名空间的内容:

var MyNamespace = (function () {
  var myVar = "something";
  return { alert: function() { alert(myVar) },
           setVar: function(value) { myVar = value } }
})();

#3

When you declare a variable or a function in your code, you're creating a property of window. Consider these examples:

在代码中声明变量或函数时,您将创建窗口的属性。考虑这些例子:

var a = 'Cow';
alert(window.a); // Cow
alert(this.a); // Cow
alert(a); // Cow

If you declare a variable inside a function, your variable won't be accessible from outside of it unless you add it to the window object:

如果在函数内部声明变量,除非将其添加到窗口对象,否则不能从外部访问变量:

function lalala() {
    alert(a); // still Cow
    a = 'Pig'; // We're tired of cows by now. Let's make it a pig.
    var b = 'Sheep';
}
lalala();
alert(a); // Pig
alert(b); // undefined, since b is declared in the lalala scope

Thus, your example would alert test.

因此,您的示例将提醒测试。

#1