JavaScript作用域:打破砂砾箱的藩篱

2023-11-27 15:33:34

JavaScript作用域指南：理解变量的生存范围

词法作用域：你的变量在源代码中的位置

在JavaScript中，变量作用域就像一个虚拟的盒子，它规定了变量的可访问性。JavaScript采用词法作用域，这意味着变量的作用域由其在源代码中的位置决定。换句话说，变量在嵌套代码块中声明的位置决定了它的作用域。

举个例子

function outerFunction() {
  let outerVariable = "Outer Scope";
  
  function innerFunction() {
    let innerVariable = "Inner Scope";
    console.log(outerVariable); // "Outer Scope"
    console.log(innerVariable); // "Inner Scope"
  }

  innerFunction();
}

outerFunction();

在这个例子中，outerVariable的作用域是outerFunction()内部，而innerVariable的作用域是innerFunction()内部。当innerFunction()被调用时，它可以在其词法作用域中访问outerVariable，因为outerFunction()包含在innerFunction()的代码块中。

闭包：让你的变量超越函数返回

闭包是JavaScript中一个强大的工具，它允许函数访问其定义时存在的变量，即使函数已经执行完毕。闭包由函数及其周围环境（即其局部变量）共同构成。

代码示例

function createCounter() {
  let counter = 0;

  return function() {
    return counter++;
  };
}

const myCounter = createCounter();
console.log(myCounter()); // 0
console.log(myCounter()); // 1

在这个例子中，createCounter()返回一个闭包函数，它可以访问其父函数createCounter()中的变量counter。即使createCounter()已经执行完毕，myCounter变量仍然可以访问counter，并将其值递增。

变量声明：管理你的变量

JavaScript提供三种不同的变量声明方式：var、let和const。每个声明方式定义了变量的作用域和特性。

var： 全局或函数作用域
let： 块级作用域（花括号{}内的代码块）
const： 只读变量，必须在声明时初始化

代码示例

// 全局作用域
var globalVariable = "Global";

// 函数作用域
function myFunction() {
  let functionVariable = "Function";

  {
    // 块级作用域
    const blockVariable = "Block";
  }
}

myFunction();
console.log(globalVariable); // "Global"
console.log(functionVariable); // ReferenceError: functionVariable is not defined
console.log(blockVariable); // ReferenceError: blockVariable is not defined