JavaScript 中闭包是什么？有哪些应用场景？

原创

前端面试题库助手 2023-12-01 12:18:17 博主文章分类：前端面试题 ©著作权

文章标签 javascript 开发语言 ecmascript 执行上下文作用域 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者前端面试题库助手的原创作品，请联系作者获取转载授权，否则将追究法律责任

闭包是什么？

闭包是指一个函数可以访问并操作其词法作用域外的变量的能力。
闭包就是能够读取其他函数内部变量的函数。
例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。
在本质上，闭包是将函数内部和函数外部连接起来的桥梁。

特点：函数嵌套，并返回子函数，子函数访问了外变量。

//外部函数
function outerFunction() {
    //内部函数外的变量
    var outerVariable = 'I am from outer function'; 
    
    //返回内部函数
    function innerFunction() { 
        console.log(outerVariable); 
    } 
    return innerFunction; 
} 

// outerFunction执行完之后被销毁，但是outerVariable被引用着所以仍然活着
var closure = outerFunction(); 

closure(); // 输出：I am from outer function

闭包的作用？

封装私有变量：闭包可以用于创建私有变量和方法。通过在函数内部定义变量，并返回一个内部函数，外部无法直接访问这些变量，从而实现了封装的效果。这样可以避免全局变量的污染，提高代码的可维护性和安全性。
延迟执行：闭包可以用于实现延迟执行的效果。通过在函数内部定义一个定时器或事件监听器，并返回一个内部函数，可以在需要的时候触发执行。
记忆化/保持状态：闭包可以用于实现记忆化的效果，即将函数的计算结果缓存起来，以便在后续调用时直接返回缓存的结果，提高函数的执行效率。
回调函数：闭包可以用于实现回调函数。通过将一个函数作为参数传递给另一个函数，并在内部函数中调用该函数，可以实现异步操作的回调机制。
模块化开发：闭包可以用于实现模块化开发。通过将一组相关的变量和方法封装在一个闭包中，可以避免全局命名空间的污染，实现模块的独立性和复用性。

闭包的缺陷？

内存占用：闭包会导致外部函数的变量无法被垃圾回收，从而增加内存占用。如果闭包会长时间存在，那么外部变量将无法被释放，可能导致内存泄漏。
性能损耗：闭包涉及到作用域链的查找过程，会带来一定的性能损耗。在性能要求高的场景下，需要注意闭包的使用。

闭包的应用场景？

参考链接： js闭包的6种应用场景！！！这下会用了

1. 自执行函数（可以实现单例模式）

let say = (function(){
  let val = 'hello world';
  function say(){
    console.log(val);
  }
  return say;
})()

var Singleton = (function () {
        var instance;

        function createInstance() {
          var object = new Object("I am the instance");
          return object;
        }

        return {
          getInstance: function () {
            if (!instance) {
              instance = createInstance();
            }
            return instance;
          },
        };
      })();

2. 防抖节流

// 节流函数封装
function throttle(func, delay) {
  let timer = null;
  return function () {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, arguments);
        timer = null;
      }, delay);
    }
  };
}

// 防抖函数封装
function debounce(func, delay) {
  let timer = null;
  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, arguments);
    }, delay);
  };
}

3. 函数柯里化

//柯里化前
function add(a, b, c) {
  return a + b + c;
}
console.log(add(1, 2, 3)); //6

//柯里化后
function addCurried1(a) {
  return function (b) {
    return function (c) {
      return a + b + c;
    };
  };
}

//箭头函数简写
const addCurried2 = (a) => (b) => (c) => a + b + c;
console.log(addCurried1(1)(2)(3)); //6
console.log(addCurried2(1)(2)(3)); //6

4. 发布订阅

function createPubSub() {
  // 存储事件及其对应的订阅者
  const subscribers = {};

  // 订阅事件
  function subscribe(event, callback) {
    // 如果事件不存在，则创建一个新的空数组
    if (!subscribers[event]) {
      subscribers[event] = [];
    }
    // 将回调函数添加到订阅者数组中
    subscribers[event].push(callback);
  }

  // 发布事件
  function publish(event, data) {
    // 如果事件不存在，则直接返回
    if (!subscribers[event]) {
      return;
    }
    // 遍历订阅者数组，调用每个订阅者的回调函数
    subscribers[event].forEach((callback) => {
      callback(data);
    });
  }

  // 返回订阅和发布函数
  return {
    subscribe,
    publish,
  };
}

// 使用示例
const pubSub = createPubSub();

// 订阅事件
pubSub.subscribe("event1", (data) => {
  console.log("订阅者1收到事件1的数据:", data);
});

pubSub.subscribe("event2", (data) => {
  console.log("订阅者2收到事件2的数据:", data);
});

// 发布事件
pubSub.publish("event1", "Hello");
// 输出: 订阅者1收到事件1的数据: Hello

pubSub.publish("event2", "World");
// 输出: 订阅者2收到事件2的数据: World

5. 迭代器

function createIterator(arr) {
  let index = 0;

  return {
    next: function() {
      if (index < arr.length) {
        return {
          value: arr[index++],
          done: false
        };
      } else {
        return {
          done: true
        };
      }
    }
  };
}

const myIterator = createIterator([1, 2, 3]);

console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { done: true }

如何释放闭包？

释放闭包通常是通过解除对闭包的引用来实现的。当不再需要使用闭包时，可以将闭包所在的变量设置为 null 或者将闭包所在的变量赋予其他值，从而断开对闭包的引用。这样，JavaScript 引擎在下一次垃圾回收时会判断闭包不再被引用，从而释放闭包占用的内存空间。

相关概念

函数的词法作用域（也叫静态作用域/闭包作用域）

是指在函数定义时确定的作用域，而不是在函数调用时确定的作用域。它是由函数在定义时所处的上下文环境决定的，与函数的调用位置无关。

规则

函数内部可以访问函数外部的变量
函数内部的变量在函数外部不可访问
函数内部可以访问函数外部的函数
函数内部的函数可以访问外部函数的变量

词法作用域的优势在于它提供了更可靠和可预测的变量访问方式。在函数定义时，就确定了函数内部可以访问的变量，不会受到函数调用位置的影响。这种静态作用域的特性使得代码更易于理解和维护，并且可以实现一些高级的编程技巧，如闭包和模块化开发。

执行上下文

每当 JavaScript 代码执行时，都会创建一个执行上下文（是 JavaScript 引擎内部的一种数据结构，用于管理代码的执行环境、变量的作用域），并按照特定的规则进行管理和销毁。

执行上下文可以分为三种类型：

全局执行上下文（Global Execution Context）：全局执行上下文是在整个脚本文件执行时创建的，它是最外层的执行上下文。在全局执行上下文中，变量和函数声明会被提升，并且会创建全局对象（如浏览器环境中的 window 对象）和全局变量。
函数执行上下文（Function Execution Context）：每当函数被调用时，都会创建一个函数执行上下文。函数执行上下文中包含了函数的参数、局部变量、函数内部的变量和函数声明。每个函数执行上下文都有自己的作用域链和 this 值。
Eval 执行上下文（Eval Execution Context）：在使用 eval（) 函数执行代码时，会创建一个 eval 执行上下文。它与全局执行上下文类似，但是它有自己的词法作用域。

执行上下文的生命周期包括以下阶段：

创建阶段（Creation Phase）：在这个阶段，JavaScript 引擎会创建执行上下文，并进行变量和函数的声明。变量会被初始化为 undefined，函数会被存储在内存中。
执行阶段（Execution Phase）：在这个阶段，JavaScript 引擎会按照代码的顺序执行语句，给变量赋值，执行函数调用等操作。