JavaScript：Scope（域）的基本指南

Scope决定了代码中变量，函数和对象的可见性。在这里了解所有细节。

Scope是JavaScript和编程的一个重要方面。Scope限制了整个代码中变量，函数和对象的可见性以及可用性。

这带来了很多好处，其中包括：

在最基本的层面上，JavaScript有两种类型的范围:

当你开始用JavaScript编写代码时，你就已经在全局范围内。任何在全局范围内编写的东西都可以在JavaScript代码中的任何地方访问

var cat = 'Jerry';

function localScopeExample(){
  // LOCAL SCOPE
  console.log(cat); // Jerry
}

// GLOBAL SCOPE
console.log(cat); // Jerry

局部作用域稍微复杂一点。局部作用域变量只能在局部作用域（它们被定义的地方）中可见和可访问。您可以将局部作用域视为您在全局范围内创建的任何新范围。

一个简单的例子就是在使用函数时。用JavaScript编写的每个函数都会创建一个新的局部作用域。这些局部作用域的变量只能在它们定义的函数中访问。

我们来看一个例子。我们将创建一个函数并在该函数中声明变量cat。猫可以访问并且可以在该功能的任何地方使用。但是，在函数之外调用cat将导致Uncaught ReferenceError：

function localScopeExample(){
  // LOCAL SCOPE
  var cat = 'Jerry';
  console.log(cat); // Jerry
}

// GLOBAL SCOPE
console.log(cat); // Uncaught ReferenceError: cat is not defined

由于局部变量只能在其函数中访问，因此可以在_不同的函数中使用相同的变量名称_：

function func1(){
  var cat = 'Jerry';
  console.log(cat); // Jerry
}

function func2(){
  var cat = 'Tom';
  console.log(cat); // Tom
}

学习词法作用域也很重要。词法作用域（也称为静态作用域）是内部函数访问外部函数范围的能力。

我们来看一个例子。在下面的代码中，我们定义了两个函数 - func1在全局范围内，func2在func1范围内声明。由于词汇范围的限制，您可以在_范围2_中访问_全局作用域_和_范围1_中的所有内容：

// GLOBAL SCOPE
var dog = 'Lewis';

function func1(){
  // SCOPE 1
  var cat = 'Jerry';

  var func2 = function(){
    // SCOPE 2
    console.log(cat); // Jerry
    console.log(dog); // Lewis
  }
}

使用var时，变量既可以是全局作用域，也可以局部作用于定义它的函数。块级作用域如if，for，while，{}对var 没有影响。

let & const,另一方面，它们被限定在它们所定义的区块内。我们来看一个例子：

let x = 1;

{
  let x = 2;
  console.log(x); // 2
}

console.log(x); // 1

正如你在上面看到的那样，简单地使用括号来创建一个代码块将在本地范围内在该块内声明的任何变量。相同的概念适用于其他块范围：

let x = 1;

if (x !== 2) {
  let x = 2;
  console.log(x); // 2
}

console.log(x); // 1

但要小心。如果您不小心重新声明具有相同块范围的相同变量，则会出现错误：

{
  let x = 1;
  let x = 2;
}

Uncaught SyntaxError: Identifier 'x' has already been declared