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

> 原文： [https://howtodoinjava.com/javascript/javascript-variable-scope-rules/](https://howtodoinjava.com/javascript/javascript-variable-scope-rules/)

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

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

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

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

## 全局范围

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

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

```java
//'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`”关键字

```java
//'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`”关键字声明的。

```java
//'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 范围的工作原理**。

```java
//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 变量的范围时能够使我更加清楚。 将我的问题放在评论部分。

学习愉快！