💻 JavaScript闭包和作用域链详解

喵~ 闭包和作用域链是 JavaScript 中最重要也最容易混淆的概念之一。作为前端开发中绕不开的核心话题，今天猫娘就用最通俗的方式，结合代码示例来帮大家彻底搞懂它们喵~

🌳 一、什么是作用域

作用域（Scope）就是变量的可访问范围。在 JavaScript 中，作用域主要分为三种：

全局作用域：代码最外层，任何地方都能访问
函数作用域：每个函数内部创建的独立作用域
块级作用域：由 let/const 关键字创建（ES6 新增）

// 作用域示例
const globalVar = '我是全局变量'

function example() {
  const funcVar = '我是函数作用域变量'

  if (true) {
    const blockVar = '我是块级作用域变量'
    console.log(globalVar) // 可以访问
    console.log(funcVar)   // 可以访问
  }

  // console.log(blockVar) // 报错！超出块级作用域
}

example()
// console.log(funcVar) // 报错！超出函数作用域

🔗 二、作用域链

当 JavaScript 执行一段代码时，会创建一个变量对象（VO），里面存储着当前作用域的所有变量。如果在当前作用域找不到某个变量，就会沿着作用域链向上一级查找，直到找到全局作用域为止，这个过程就是作用域链喵~

// 作用域链示例
const a = '全局'

function level1() {
  const b = '第一层'
  function level2() {
    const c = '第二层'
    console.log(a) // 沿着作用域链找到全局的 a
    console.log(b) // 沿着作用域链找到上一层的 b
    console.log(c) // 在当前作用域找到 c
  }
  return level2
}

小猫咪娘小贴士：作用域链是在函数定义时就确定的，不是在调用时才创建的哦！这就是所谓的"静态作用域"喵~

🔒 三、什么是闭包

闭包（Closure）是指一个函数能够"记住"并访问其所在的词法作用域，即使该函数在其词法作用域之外执行。简单来说：函数 A 返回了一个函数 B，函数 B 引用了 A 的变量，这就形成了闭包喵~

// 经典闭包示例
function createCounter() {
  let count = 0
  return function() {
    count++
    return count
  }
}

const counter = createCounter()
console.log(counter()) // 1
console.log(counter()) // 2
console.log(counter()) // 3

在这个例子中，counter 函数记住了 count 变量，即使 createCounter 已经执行完毕，count 依然存活。这就是闭包的力量——让变量"长生不老"喵~

💡 四、闭包的实际应用

4.1 数据私有化

使用闭包可以模拟私有变量，外部无法直接访问：

function createBankAccount(initialBalance) {
  let balance = initialBalance
  return {
    deposit(amount) {
      balance += amount
      return balance
    },
    withdraw(amount) {
      if (balance >= amount) {
        balance -= amount
        return balance
      }
      return '余额不足'
    }
  }
}

const account = createBankAccount(1000)
console.log(account.deposit(500))  // 1500
console.log(account.withdraw(200)) // 1300

4.2 函数柯里化

利用闭包可以将多参数函数转化为单参数函数：

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args)
    }
    return function(...moreArgs) {
      return curried.apply(this, [...args, ...moreArgs])
    }
  }
}

const add = (a, b, c) => a + b + c
const curriedAdd = curry(add)
console.log(curriedAdd(1)(2)(3)) // 6
console.log(curriedAdd(1, 2)(3)) // 6

4.3 防抖和节流

闭包在实现防抖（debounce）和节流（throttle）时也是核心：

// 防抖函数
function debounce(fn, delay) {
  let timer = null
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(() => {
      fn.apply(this, args)
    }, delay)
  }
}

⚠️ 五、使用闭包的注意事项

闭包会导致内存占用增加，因为被引用的变量不会被回收
在循环中使用闭包时要注意变量共享问题
及时释放不再需要的闭包引用，避免内存泄漏

💡 小猫咪娘经验：理解闭包的关键是记住一句话—— "函数是第一等公民，它可以携带自己的创建环境一起旅行"喵~

🎯 总结

作用域决定了变量的可访问范围，作用域链是变量查找的路径，而闭包则是函数能够跨越作用域访问变量的机制。掌握了这三者，你就掌握了 JavaScript 最核心的运行机制之一喵~

💻🐱✨ 理解闭包，从这里开始喵~ ✨🐱💻