JS中作用域的实例解析

在JavaScript中，作用域（Scope）是指访问变量、函数等标识符的范围。JavaScript的作用域基于函数（Function）而非块级作用域（Block Scope），这意味着变量的作用域在代码块 {} 中没有意义，而是在它们所在的函数中定义的。本篇攻略将通过实例来详细讲解JS中作用域的概念。

一、全局作用域

全局作用域（Global Scope）是最外层的作用域，在任何地方都可以访问其中的变量和函数。如下所示：

var a = 1; // 全局变量

function foo() {
  console.log(a); // 可以访问全局变量a
}

foo(); // 1

上述代码中，变量a是在全局作用域中声明的，因此可以在foo函数中访问到。

二、函数作用域

函数作用域（Function Scope）是函数内声明的变量所在的作用域，只能在函数内部访问。如下所示：

function foo() {
  var a = 1; // 函数内部变量
  console.log(a); // 可以访问函数内部变量a
}

foo(); // 1
console.log(a); // a is not defined

上述代码中，变量a是在函数内部声明的，因此只能在函数内部访问。在函数的外部访问a会出现“a is not defined”的错误。

三、块级作用域

块级作用域（Block Scope）在ES6标准中引入，是指通过let、const声明的变量所在的作用域，可以在块级作用域内部访问。如下所示：

if (true) {
  let a = 1; // 块级作用域变量
  const b = 2; // 块级作用域变量
  console.log(a, b); // 可以访问块级作用域变量a和b
}

console.log(a, b); // a is not defined, b is not defined

上述代码中，变量a和b被放在if语句块中声明，因此只能在if语句块内部访问。在if语句块之外访问a和b会出现“a is not defined, b is not defined”的错误。

四、变量查找

在JavaScript中，如果在当前作用域中找不到指定的变量，它会一层一层地向上查找，直到找到全局作用域。如下所示：

var a = 1; // 全局变量

function foo() {
  console.log(a); // 可以访问全局变量a
}

function bar() {
  var a = 2; // 同名变量，屏蔽了全局变量a
  foo(); // 1
}

bar();

上述代码中，函数bar中定义了与全局变量a同名的变量a，因此在foo函数中访问变量a时会访问到全局变量a。

五、闭包

闭包（Closure）是指函数能够访问并使用函数外部的变量，即使函数已经执行完毕并返回了，外部变量的值也不会消失。如下所示：

function outer() {
  var a = 1; // 外部变量

  function inner() { // 内部函数
    console.log(a); // 可以访问外部变量a
  }

  return inner; // 返回内部函数
}

var foo = outer(); // 赋值函数outer的返回值，即内部函数inner
foo(); // 1

上述代码中，函数inner能够访问并使用函数outer内部的变量a，即使outer函数已经执行完毕并返回了，a的值也不会消失。

六、总结

在JavaScript中，作用域是指访问变量、函数等标识符的范围，可以分为全局作用域、函数作用域和块级作用域。变量在查找时会一层一层地向上查找，直到找到全局作用域。闭包能够访问并使用外部变量，即使外部函数已经执行完毕并返回了。掌握JS的作用域规则，能更好的编写出正确的代码。