浅谈JavaScript作用域

当我们了解JavaScript时，作用域是一个十分重要的概念。它是指 JavaScript 中变量的可访问性。本文将浅谈 JavaScript 的作用域及其相关概念，并通过两个例子来说明作用域的不同。

全局作用域

在 JavaScript 中，最顶层的作用域被称为全局作用域。全局作用域中的变量和函数在代码的任何地方都是可访问的。可以通过以下代码来定义一个全局变量：

var globalVar = 'This is global variable';

全局变量是在最外层声明的变量。由于它对于代码的任何部分都是可访问的，因此要尽量减少全局变量的使用。因为全局变量越多，就越容易发生变量互相覆盖的问题。

函数作用域

在 JavaScript 中，每个函数都有它自己的作用域，被称为函数作用域。这意味着函数作用域中声明的变量和函数只能在函数内部访问。

下面是一个简单的函数作用域的示例：

function myFunction() {
  var localVar = 'This is local variable';
  console.log(localVar);
}

在这个示例中，localVar 是在函数中声明的变量。只有在函数内部才有权访问这个变量。如果在函数外部访问该变量，就会得到一个未定义的错误。这是因为 localVar 只在 myFunction 函数内部存在。

块级作用域

在 ES6（ECMAScript 2015）中，JavaScript 引入了一个新概念 - 块级作用域。块级作用域是指在代码块内定义的变量和函数，在代码块外部是不可访问的。块级作用域可以使用 let 和 const 声明。

以下示例演示了块级作用域的概念：

if (true) {
  let localVar = 'This is local variable';
  console.log(localVar);
}

console.log(localVar); // 报错，localVar 不是一个定义过的变量

上面的代码中，当 if 语句执行时，它内部的代码块里声明了一个名为 localVar 的变量。但是在该代码块外部，该变量就不存在了，因此最后的 console.log(localVar); 会报错。

闭包

闭包是 JavaScript 中一个重要的概念，也是很多初学者难以理解的概念。在 JavaScript 中，每个函数都会形成自己的作用域。而当函数内部存在另一个函数时，内部函数就会形成一个闭包。每个闭包都可以访问它外部作用域中的变量和函数，在某些情况下，闭包可以用来创建私有变量和私有方法。

以下是一个使用闭包来创建私有变量的示例：

function counter() {
  var count = 0;

  function add() {
    count++;
    console.log('Count: ', count);
  }

  return add;
}

var addFunc = counter();
addFunc(); // 输出 "Count: 1"
addFunc(); // 输出 "Count: 2"

在上面的示例中，counter 函数只在一次调用中执行，但其返回的 add 函数和 count 变量形成了一个闭包。每次调用 addFunc 时，都能访问到该闭包中的 count 变量，并增加它的值。

示例1

以下示例演示了函数嵌套产生的闭包的概念：

function parentFunc() {
  var parentVal = 100;

  function childFunc() {
    var childVal = 50;
    console.log(parentVal + childVal);
  }

  return childFunc;
}

var childFunc = parentFunc();
childFunc(); // 输出 "150"

在上面的示例中，childFunc 函数的内部访问了 parentVal 变量。由于 childFunc 是在 parentFunc函数内部定义的，所以 childFunc 形成了一个闭包，能够访问 parentVal 变量。

示例2

以下示例演示了重复声明变量导致作用域覆盖的概念：

var globalVal = 'This is global variable';

function myFunction() {
  var globalVal = 'This is local variable';
  console.log(globalVal);
}

myFunction(); // 输出 "This is local variable"
console.log(globalVal); // 输出 "This is global variable"

在上面的示例中，globalVal 变量被重复声明两次。函数内部的变量 globalVal 覆盖了全局作用域中的同名变量，因此在函数内部打印 globalVal 时输出了 "This is local variable" 。而在函数外部依然可以访问全局作用域的 globalVal，它的值为 "This is global variable"。