探索JS的作用域，揭秘变量的有效范围

2023-11-30 11:34:01

JavaScript作用域的奥秘

JavaScript的魅力无穷，而它背后隐秘的作用域更是深不可测。从全局作用域到嵌套函数，让我们踏上探索JavaScript作用域世界的旅程，拨开它神秘的面纱。

词法作用域与动态作用域：双生之舞

作用域，顾名思义，界定了变量和函数在代码中可以被访问的范围。在JavaScript中，作用域分为词法作用域和动态作用域，各有千秋。

词法作用域：静态守护者

词法作用域，也称编译时作用域，在代码编写时就已经确定。它就像一座历史博物馆，记录着函数调用顺序。内部作用域可以访问外部作用域的变量和函数，但反之则不行，保护着内部作用域的秘密。

function outer() {
  const outerVar = "Outer";
  function inner() {
    const innerVar = "Inner";
    console.log(outerVar); // "Outer"
    console.log(innerVar); // "Inner"
  }
  inner();
}
outer();

动态作用域：灵活变幻者

与词法作用域相对应，动态作用域在代码运行时才显现真容。它更像一个实时更新的播报员，随着函数调用顺序的改变而调整作用域。这种灵活性使得内部作用域不仅可以访问外部作用域，外部作用域也能窥探内部作用域。

function outer() {
  const outerVar = "Outer";
  function inner() {
    const innerVar = "Inner";
  }
  inner();
  console.log(innerVar); // ReferenceError: innerVar is not defined
}
outer();

9种作用域类型：万花筒般的风景

JavaScript中琳琅满目的作用域类型，犹如万花筒中转瞬即逝的图案。

1. 全局作用域：脚本之巅

全局作用域傲居脚本之巅，容纳着所有不受任何函数或代码块包裹的变量和函数，是代码的顶层世界。

2. 函数作用域：函数之域

函数作用域是函数内部的专属领地，它呵护着所有函数内部声明的变量和函数，仅对函数内部开放。

3. 块级作用域：花括号中的秘密

使用花括号围起来的代码块，就形成了一块块作用域岛屿，内部变量和函数只允许岛内居民访问。

4. 闭包：跨越时空的联系

闭包，宛如一座横跨时空的桥梁，它可以访问其他函数作用域中的变量，即使桥的另一端函数早已作古。

5. 匿名函数：无名英雄

没有名字的函数，就是匿名的英雄。它们的作用域与所在作用域一脉相承，共享着同一个天地。