揭秘前端工程师眼中的函数式编程（对话系列六）

2023-11-08 23:59:56

函数式编程与闭包

学生: 老师，我们上一节课讲到闭包，但我不太明白它到底是什么。

老师: 闭包是函数式编程中非常重要的概念。简单来说，闭包就是能够访问其他函数作用域中变量的函数。

学生: 听起来有点绕，能举个例子吗？

老师: 当然，我们先定义一个函数：

function outer() {
  let x = 10;

  function inner() {
    return x;
  }

  return inner;
}

在这个例子中，outer 函数返回了 inner 函数。inner 函数能够访问 outer 函数的作用域，因此它能够访问并返回变量 x 的值。即使 outer 函数已经执行完毕，inner 函数仍然能够访问 x，这就是闭包。

作用域和词法作用域

学生: 原来如此，那么作用域和词法作用域又是什么？

老师: 作用域是指一个函数能够访问的变量的集合。词法作用域是指函数的作用域由其定义时的词法环境决定。在JavaScript中，词法环境由函数所在的块级作用域和所有父级作用域组成。

学生: 这听起来很复杂，能不能再详细解释一下？

老师: 当然，我们还是以上面的例子来说明。inner 函数的作用域包括 inner 函数本身的作用域和 outer 函数的作用域。inner 函数的作用域中没有变量 x，因此它只能在 outer 函数的作用域中查找变量 x。这就是词法作用域的体现。

闭包的实际应用

学生: 老师，闭包有什么实际应用场景吗？

老师: 闭包的应用场景非常广泛，其中一个常见的应用场景是实现私有变量。

function createCounter() {
  let count = 0;

  function increment() {
    count++;
  }

  function getCount() {
    return count;
  }

  return {
    increment,
    getCount
  };
}

const counter = createCounter();
counter.increment();
counter.increment();
console.log(counter.getCount()); // 2

在这个例子中，createCounter 函数返回了一个对象，这个对象包含两个函数：increment 和 getCount。increment 函数的作用域包括 increment 函数本身的作用域和 createCounter 函数的作用域。increment 函数能够访问 createCounter 函数的作用域中的变量 count，并对其进行修改。getCount 函数的作用域也包括 increment 函数本身的作用域和 createCounter 函数的作用域，因此它能够访问并返回变量 count 的值。即使 createCounter 函数已经执行完毕，increment 和 getCount 函数仍然能够访问变量 count，这就是闭包的体现。