您必须知道的 JavaScript 变量范围规则

原文： https://howtodoinjava.com/javascript/javascript-variable-scope-rules/

每种编程语言都有变量，它们只能在特定范围内访问。 使用 JavaScript 时，作用域并不是一个棘手的功能。 它们看起来很简单，但是如果您不知道 javascript 变量的范围是多少，可能会出错。 让我们更详细地了解 javascript 的作用域。

在 JavaScript 中，变量仅通过两种方式限定范围：

1. 全局范围
2. 函数范围

只需记住，当您使用var关键字定义变量时，就声明了 JavaScript 中的作用域。 让我们从简单的一个开始 - Java 中的全局范围变量。

全局范围

在以下情况下，用 javascript 声明的变量将具有全局作用域：

a）在任何函数之外定义的变量

//'foo' is global variable
var foo = 'I am GLOBAL foo';
//'foo' is function local variable
function test() {
    var foo = 'I am LOCAL foo';
}
console.log(foo); //I am GLOBAL foo

在任何函数中定义的变量 - 不使用“var”关键字

//'foo' is function local variable
function test() {
    foo = 'I am GLOBAL foo';
}
console.log(foo); //I am GLOBAL foo
console.log(window.foo); //I am GLOBAL foo

所有全局作用域变量均作为window对象的属性可见。

函数范围

从全局作用域详细信息可以明显看出，函数作用域变量是在函数内部使用“var”关键字声明的。

//'foo' is function local variable
function test() {
    var foo = 'I am LOCAL foo';
    console.log(foo); //I am LOCAL foo
}
console.log(foo); //foo is not defined

请注意， javascript 函数具有自己的作用域，但是块（例如while，if和for语句）则没有。

混合全局变量和函数范围变量

现在，在基本理解之后，我们来看一个示例，在该示例中，我们将在单个页面的不同范围中使用变量foo，然后我们将在其上明确说明 javascript 范围的工作原理。

//Define global scoped 'foo'
var foo = 'I am GLOBAL foo';
//Inside if block foo will refer to global foo
if ( true ) {
    var foo = 'I am GLOBAL foo TOO';
    console.log( foo );         //I am GLOBAL foo TOO
}
//As blocks do not have their own scope
//So foo in if block referred to global scope foo
//foo refer to new value
console.log( foo );              //I am GLOBAL foo TOO
//Inside function - foo has it's own declaration
function test() {
    var foo = 'I am LOCAL foo';
    console.log( foo );          //I am LOCAL foo
}
test();
//Ouside function foo is still globally declared foo
console.log( foo );                //I am GLOBAL foo TOO

了解仅在函数内部声明的foo如何具有自己的作用域，否则所有foo变量都引用全局作用域foo。

提示：无论范围如何，都应始终使用var初始化变量。 这样，您的变量将具有您期望的范围，并且可以避免意外的全局变量。

我希望当我们谈论 javascript 变量的范围时能够使我更加清楚。 将我的问题放在评论部分。

学习愉快！