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

简介: JavaScript 中闭包是什么?有哪些应用场景?

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:web前端面试题库

闭包是什么?

  • 闭包是指一个函数可以访问并操作其词法作用域外的变量的能力。
  • 闭包就是能够读取其他函数内部变量的函数。
  • 例如在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

闭包的作用?

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

闭包的缺陷?

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

闭包的应用场景?

参考链接: 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 引擎内部的一种数据结构,用于管理代码的执行环境、变量的作用域),并按照特定的规则进行管理和销毁。

执行上下文可以分为三种类型:
  1. 全局执行上下文(Global Execution Context):全局执行上下文是在整个脚本文件执行时创建的,它是最外层的执行上下文。在全局执行上下文中,变量和函数声明会被提升,并且会创建全局对象(如浏览器环境中的 window 对象)和全局变量。
  2. 函数执行上下文(Function Execution Context):每当函数被调用时,都会创建一个函数执行上下文。函数执行上下文中包含了函数的参数、局部变量、函数内部的变量和函数声明。每个函数执行上下文都有自己的作用域链和 this 值。
  3. Eval 执行上下文(Eval Execution Context):在使用 eval() 函数执行代码时,会创建一个 eval 执行上下文。它与全局执行上下文类似,但是它有自己的词法作用域。
执行上下文的生命周期包括以下阶段:
  1. 创建阶段(Creation Phase):在这个阶段,JavaScript 引擎会创建执行上下文,并进行变量和函数的声明。变量会被初始化为 undefined,函数会被存储在内存中。
  2. 执行阶段(Execution Phase):在这个阶段,JavaScript 引擎会按照代码的顺序执行语句,给变量赋值,执行函数调用等操作。
观察和理解执行上下文

执行上下文的管理和切换由 JavaScript 引擎自动完成,开发者可以通过了解执行上下文的概念和规则,更好地理解代码的执行过程,以及变量和函数的作用范围。

尽管无法直接访问或输出执行上下文,但我们可以通过一些间接的方式来观察和理解执行上下文的行为和特性:

  1. 使用 console.log():可以在代码中使用 console.log() 方法输出变量的值、函数的执行结果等信息,从而间接观察到执行上下文的影响。
  2. 使用调试工具:现代的浏览器和开发工具提供了强大的调试功能,可以在代码执行过程中查看执行上下文的变化、变量的值以及调用栈等信息。
  3. 使用闭包:通过创建闭包,我们可以间接地观察到执行上下文的作用。闭包可以让内部函数访问外部函数的变量,从而形成一个包含外部执行上下文的闭包执行上下文。

给大家推荐一个实用面试题库

1、前端面试题库 (面试必备)            推荐:★★★★★

地址:web前端面试题库

相关文章
|
19天前
|
自然语言处理 JavaScript 前端开发
JavaScript中闭包:概念、用途与潜在问题
【4月更文挑战第22天】JavaScript中的闭包是函数及其相关词法环境的组合,允许访问外部作用域,常用于数据封装、回调函数和装饰器。然而,不恰当使用可能导致内存泄漏和性能下降。为避免问题,需及时解除引用,减少不必要的闭包,以及优化闭包使用。理解并慎用闭包是关键。
|
4天前
|
前端开发 JavaScript
闭包在JavaScript中有许多应用场景
闭包在JavaScript中发挥关键作用,如封装私有变量和函数提升安全性,维护变量生命周期,实现高阶函数,模拟块级作用域,支持回调函数以处理异步操作,以及促进模块化编程,增强代码组织和管理。闭包是理解和掌握JavaScript高级特性的重要一环。
20 7
|
11天前
|
自然语言处理 JavaScript 前端开发
【JavaScript技术专栏】深入理解JavaScript作用域与闭包
【4月更文挑战第30天】了解JavaScript的关键在于掌握作用域和闭包。作用域决定变量和函数的可访问范围,分为全局(在`window`或`global`对象中)和局部(函数内部)。闭包则允许函数访问其创建时的作用域,即使在其他地方调用。它通过作用域链保存对外部变量的引用,常用于实现私有变量、模块化和柯里化。然而,不当使用闭包可能导致内存泄漏和性能下降。理解这些概念能提升代码质量,但也需谨慎处理潜在问题。
|
12天前
|
自然语言处理 前端开发 JavaScript
【Web 前端】什么是JS闭包?
【4月更文挑战第22天】【Web 前端】什么是JS闭包?
|
13天前
|
自然语言处理 JavaScript 前端开发
闭包对于javascript中有什么作用
JavaScript中的闭包有多种用途,如数据封装和私有化、函数工厂及保持状态。闭包能创建私有变量和函数,防止外部访问,实现清晰的代码接口。
|
16天前
|
测试技术
js_防抖与节流(闭包的使用)
js_防抖与节流(闭包的使用)
18 0
|
18天前
|
设计模式 JavaScript 前端开发
js开发:请解释闭包(closure)是什么,以及它的用途。
【4月更文挑战第23天】闭包是JavaScript中的一个重要概念,允许函数访问并操作外部作用域的变量,常用于实现私有变量、模块化和高阶函数。私有变量示例展示了如何创建只在特定函数内可访问的计数器。模块化示例演示了如何封装变量和函数,防止全局污染。最后,高阶函数示例说明了如何使用闭包创建接受或返回函数的函数。
16 0
|
19天前
|
存储 缓存 前端开发
< 今日份知识点:Javascript本地存储的方式有哪些?区别及应用场景? >
在前端开发中,偶尔需要存储一些如: 用户信息、登录状态、历史记录等常量数据。用于后续二次调用,并且避免刷新后丢失。这时,就需要用到本地存储了。 在`JavaScript` 中,提供了四种可用的本地存储方式: **`cookie`** ,**`sessionStorage`**, **`localStorage`**, **`indexedDB`** ( 已废除的 `WebSQL` )。四种方式各有千秋,接下来,就由小温带各位卷王了解一下,`Javascript` 中的本地存储吧
< 今日份知识点:Javascript本地存储的方式有哪些?区别及应用场景? >
|
19天前
|
JavaScript 前端开发
JavaScript中高阶函数与闭包的实际应用
【4月更文挑战第22天】JavaScript中的高阶函数和闭包是强大的工具,常用于抽象、复用和构建组合逻辑。高阶函数如回调、数组方法和函数组合能提高代码灵活性。闭包则用于封装私有变量、创建函数工厂和在异步编程中保留上下文。两者结合使用,如`createAccumulator`函数,能创建更灵活的代码结构。
|
27天前
|
自然语言处理 前端开发 JavaScript
深入理解JavaScript中的闭包
闭包是JavaScript中一个常见但也容易令人困惑的概念。本文将深入探讨闭包的本质、用途和实际应用,帮助读者更好地理解和运用闭包。