JavaScript作用域揭秘：小白也能轻松掌握

2022-11-21 23:23:30

JavaScript作用域：从小白到高手的进阶之路

了解JavaScript作用域的奥秘

作为一名JavaScript初学者，作用域可能会让你大伤脑筋。它就像代码世界的俄罗斯套娃，一层层嵌套，令人难以捉摸。但是，别担心，解开作用域之谜并不是不可能的任务。在这篇博客文章中，我们将携手踏上JavaScript作用域的探索之旅，让你从小白晋升为高手。

1. 全局作用域：代码的无垠之海

想象一下一望无际的大海，这就是全局作用域。在JavaScript中，在这个广阔的空间中声明的变量就像航海家，可以自由自在地游弋整个代码脚本，不受任何限制。

2. 函数体作用域：函数的私有领地

当我们进入一个函数，就仿佛踏上了一个独立的岛屿，这就是函数体作用域。在这个岛屿上，变量只能在函数内部使用，就像守卫森严的宝藏，与外部世界隔绝。

3. 块级作用域：让代码更清晰

ES6引入了块级作用域，就像为代码划分了整齐的区域。在这个区域内声明的变量只能在这个区域内访问，就像一个专属的秘密花园，外人不得入内。

4. 欺骗词法作用域：打破常规的意外之喜

有时，变量会跳出词法作用域的藩篱，这就是欺骗词法作用域。就像一个淘气的孩子，变量偷偷潜入嵌套函数，访问外层函数的私有财产。

5. 变量提升：JavaScript的魔术戏法

JavaScript有个神奇的把戏，叫做变量提升。当解释器读懂代码时，它会将变量声明悄悄挪到代码最顶部。就像舞台上的魔术师，变量突然出现在你面前，让你措手不及。

6. 闭包：变量的持久之谜

闭包就像一个时间胶囊，将变量永久封存。即使函数执行完毕，这些变量仍然可以被访问，就像时光倒流一般，带你回到函数执行时的场景。

代码示例：

// 全局作用域
var globalVariable = "Hello, world!";

// 函数体作用域
function myFunction() {
  var functionVariable = "I'm inside a function!";
}

// 块级作用域
if (true) {
  let blockVariable = "I'm in a block!";
}

// 欺骗词法作用域
function outerFunction() {
  var outerVariable = "I'm the outer variable!";

  function innerFunction() {
    console.log(outerVariable); // 输出 "I'm the outer variable!"
  }

  innerFunction();
}

// 变量提升
console.log(hoistedVariable); // 输出 undefined

var hoistedVariable = "I'm hoisted!";

// 闭包
function createCounter() {
  var counter = 0;

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

const counter = createCounter();
console.log(counter()); // 输出 1
console.log(counter()); // 输出 2