你不知道的Javascript(上卷) 第一部分 | 第三章：函数作用域和块作用域

前言：为什么作用域如此重要？

各位掘金的小伙伴们好！今天我们来深入探讨JavaScript中一个既基础又关键的概念------作用域。作为一名前端开发者，我最开始学习JavaScript时，对作用域的理解仅限于"函数内外的变量访问"，直到阅读了《你不知道的JavaScript》这本书，才发现作用域的世界如此丰富多彩！

作用域就像是你代码中的"房地产法则"------它决定了变量和函数在哪里"居住"，谁能"访问"谁，以及它们的"生命周期"。理解作用域不仅能帮你写出更健壮的代码，还能避免很多莫名其妙的bug。

一、函数作用域：JavaScript的传统领地

1.1 函数作用域的基本概念

在JavaScript中，每声明一个函数都会为其自身创建一个作用域。这意味着：

javascript 复制代码

function foo() {
  var a = 1;
  console.log(a); // 1
}
foo();
console.log(a); // ReferenceError: a is not defined

这里，变量a被"困"在foo函数的作用域内，外部无法访问。这种特性让我们能够实现：

隐藏内部实现：只暴露必要的接口，其他细节对外不可见
避免命名冲突：不同函数中的同名变量不会互相干扰
管理变量生命周期：函数执行完毕，内部变量通常会被垃圾回收

1.2 函数作用域的进阶用法

1.2.1 立即执行函数表达式(IIFE)

IIFE(Immediately Invoked Function Expression)是我刚学JavaScript时觉得最"魔法"的语法之一：

javascript 复制代码

(function() {
  var secret = "掘金是个好平台！";
  console.log(secret); // 可以访问
})();

console.log(secret); // ReferenceError

这种模式在jQuery时代被广泛使用，用来创建独立的作用域，避免污染全局命名空间。

进阶技巧：传递参数

javascript 复制代码

(function(global) {
  global.juejin = "awesome!";
})(window);

console.log(window.juejin); // "awesome!"

1.2.2 命名函数表达式 vs 匿名函数表达式

我曾经犯过一个错误，以为这两种写法完全等价：

javascript 复制代码

// 匿名函数表达式
setTimeout(function() {
  console.log("1秒后执行");
}, 1000);

// 命名函数表达式
setTimeout(function timeoutHandler() {
  console.log("1秒后执行");
}, 1000);

实际上，命名函数表达式有以下优势：

调试时栈追踪更有意义
方便递归调用（不再需要arguments.callee）
代码可读性更好

建议：总是给函数表达式命名是个好习惯！

二、块作用域：ES6带来的新世界

2.1 为什么需要块作用域？

在ES5时代，JavaScript只有函数作用域，这导致了一些奇怪的现象：

javascript 复制代码

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出5个5！
  }, 100);
}

这是因为var声明的i被提升到了函数作用域顶部，整个循环共享同一个变量。

2.2 ES6的块作用域解决方案

2.2.1 let关键字

let将变量绑定到所在的任意块作用域中：

javascript 复制代码

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 0,1,2,3,4
  }, 100);
}

let的特点：

不会变量提升（TDZ暂时性死区）
禁止重复声明
每次迭代都会创建一个新的绑定

2.2.2 const关键字

const同样创建块作用域变量，但值不可变：

javascript 复制代码

const PI = 3.1415926;
PI = 3.14; // TypeError

const obj = { name: "掘金" };
obj.name = "稀土掘金"; // 允许！
obj = {}; // TypeError

注意：const保证的是变量指向的内存地址不变，而非值不变。

2.3 块作用域的经典案例

2.3.1 条件语句中的块作用域

javascript 复制代码

if (true) {
  let flag = "visible";
  const MAX = 100;
}
console.log(flag); // ReferenceError
console.log(MAX); // ReferenceError

2.3.2 switch语句中的块作用域

javascript 复制代码

switch (action) {
  case "add":
    let result = x + y;
    break;
  case "subtract":
    let result = x - y; // SyntaxError: 重复声明
    break;
}

解决方案是为每个case创建块：

javascript 复制代码

switch (action) {
  case "add": {
    let result = x + y;
    break;
  }
  case "subtract": {
    let result = x - y;
    break;
  }
}

三、作用域的应用实践

3.1 模块模式

利用函数作用域实现模块：

javascript 复制代码

var MyModule = (function() {
  var privateVar = "私有变量";
  
  function privateMethod() {
    console.log("私有方法");
  }
  
  return {
    publicMethod: function() {
      console.log(privateVar);
      privateMethod();
    }
  };
})();

MyModule.publicMethod(); // 可以访问
MyModule.privateMethod(); // TypeError

3.2 循环中的块作用域

经典面试题解决方案：

javascript 复制代码

// 旧方案：IIFE
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 100);
  })(i);
}

// 新方案：let
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

3.3 性能优化

块作用域可以让引擎更早回收变量：

javascript 复制代码

function process(data) {
  // 处理数据...
}

{
  let hugeData = getHugeData(); // 只在块内有效
  process(hugeData);
}

// hugeData在这里已经被回收

四、常见误区与最佳实践

4.1 误区一：认为var和let/const完全可互换

javascript 复制代码

if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); // 1
console.log(b); // ReferenceError

4.2 误区二：过度使用IIFE

有了let/const后，很多IIFE场景可以简化：

javascript 复制代码

// 旧方式
(function() {
  var tmp = "...";
  // ...
})();

// 新方式
{
  let tmp = "...";
  // ...
}

4.3 最佳实践

常量使用const，需要重新赋值时才用let
避免使用var，除非有特殊需求
保持作用域最小化，变量声明尽量靠近使用位置
合理命名，提高代码可读性

结语：掌握作用域，写出更专业的代码

作用域是JavaScript的基础概念，深入理解它可以帮助我们：

避免变量污染和命名冲突
更好地管理内存和性能
写出更清晰、更模块化的代码
理解框架和库的设计原理

记住《你不知道的JavaScript》中的这句话："代码是写给人看的，只是顺便能让计算机执行。"良好的作用域管理正是这一理念的完美体现。

希望这篇笔记能帮助大家更好地理解JavaScript的作用域机制！如果有任何问题或见解，欢迎在评论区交流讨论。