【Web 前端】什么是JS闭包?

简介: 【4月更文挑战第22天】【Web 前端】什么是JS闭包?

image.png

JavaScript 中的闭包(Closure)是一个非常重要且强大的概念,它在函数式编程和异步编程中起着至关重要的作用。闭包可以让函数访问其外部函数作用域中的变量,即使外部函数已经执行完毕,这些变量仍然可以被内部函数访问和操作。在本文中,我将详细解释闭包的概念、特点、用途以及如何使用闭包,同时提供示例代码片段来帮助读者更好地理解闭包的原理和应用场景。

1. 闭包的概念

闭包是指在 JavaScript 中,一个函数可以访问并操作其词法作用域外部的变量,即使这些变量已经不再函数的执行环境中。换句话说,闭包就是定义在一个函数内部的函数,它可以访问该函数的所有变量和参数,以及其父函数的变量和参数。

2. 闭包的特点

闭包具有以下几个特点:

  • 内部函数访问外部变量:内部函数可以访问其父函数作用域中的变量,即使父函数已经执行完毕。
  • 变量保持活动状态:闭包中引用的外部变量会一直保存在内存中,不会被垃圾回收器回收,直到闭包被销毁。
  • 每次函数调用都会创建新的闭包:每次函数调用都会创建一个新的闭包,闭包之间互相独立,互不影响。

3. 闭包的用途

闭包在 JavaScript 中有着广泛的用途,其中包括但不限于以下几个方面:

  • 封装私有变量和方法:通过闭包可以实现模块化的编程方式,将变量和方法封装在函数内部,外部无法直接访问,从而实现数据的私有性和封装性。
  • 实现柯里化(Currying):柯里化是一种将多参数函数转换为单参数函数的技术,通过闭包可以轻松实现柯里化,从而提高函数的灵活性和复用性。
  • 延迟执行和参数传递:通过闭包可以实现延迟执行和参数传递的效果,例如在事件处理函数中使用闭包来保存事件处理逻辑所需的参数。
  • 异步编程:闭包在异步编程中起着非常重要的作用,可以用来保存回调函数所需的状态和上下文信息,从而实现更加灵活和可控的异步操作。

4. 如何创建闭包

在 JavaScript 中,创建闭包通常有以下几种方式:

  • 函数内部定义函数:在一个函数内部定义另一个函数,并返回该函数,即可创建闭包。
  • 返回函数作为值:将一个函数作为另一个函数的返回值返回,即可创建闭包。
  • 立即执行函数:立即执行函数会立即执行并返回一个函数,闭包就是由这个函数和它引用的外部变量组成。

5. 闭包的示例代码

5.1 封装私有变量和方法

function createCounter() {
   
   
    let count = 0; // 私有变量
    function increment() {
   
   
        count++;
        console.log(count);
    }
    function decrement() {
   
   
        count--;
        console.log(count);
    }
    return {
   
   
        increment,
        decrement
    };
}

let counter = createCounter();
counter.increment(); // 输出 1
counter.increment(); // 输出 2

在上面的示例中,createCounter 函数返回了一个包含 incrementdecrement 方法的对象,这两个方法都可以访问并操作 count 变量,但外部无法直接访问 count 变量,实现了数据的私有性和封装性。

5.2 实现柯里化

function add(x) {
   
   
    return function(y) {
   
   
        return x + y;
    };
}

let add5 = add(5);
console.log(add5(3)); // 输出 8
console.log(add5(7)); // 输出 12

在上面的示例中,add 函数接受一个参数 x,返回一个函数,这个函数接受一个参数 y,并返回 x + y 的结果。通过调用 add 函数并传入参数 5,得到一个新的函数 add5,然后可以用这个新函数来实现对 5 的加法操作。

5.3 延迟执行和参数传递

function createLogger(prefix) {
   
   
    return function(message) {
   
   
        console.log(`[${
     
     prefix}] ${
     
     message}`);
    };
}

let logInfo = createLogger('INFO');
let logError = createLogger('ERROR');

logInfo('User logged in'); // 输出 [INFO] User logged in
logError('Failed to load data'); // 输出 [ERROR] Failed to load data

在上面的示例中,createLogger 函数接受一个 prefix 参数,返回一个函数,这个函数用来输出带有指定前缀的日志信息。通过调用 createLogger 函数并传入不同的 prefix 参数,可以创建不同类型的日志记录器。

5.4 异步编程

function fetchData(url) {
   
   
    return function(callback) {
   
   
        setTimeout(() => {
   
   
            let data = 'Response data from ' + url;
            callback(data);
        }, 1000);
    };
}

let fetchDataFromServer = fetchData('http://example.com/api');
fetchDataFromServer(function(data) {
   
   
    console.log(data); // 输出 Response data from http://example.com/api
});

在上面的示例中,fetchData 函数接受一个 url 参数,返回一个函数,这个函数用来异步获取指定 URL 的数据

,并在数据返回后调用回调函数传递数据。通过调用 fetchData 函数并传入 URL 参数,可以创建一个用来获取指定 URL 数据的函数,并在数据返回后进行处理。

6. 总结

闭包是 JavaScript 中一个非常重要且强大的概念,它可以让函数访问其外部函数作用域中的变量,实现了数据的私有性、封装性和灵活性。闭包在 JavaScript 中有着广泛的应用,包括封装私有变量和方法、实现柯里化、延迟执行和参数传递、异步编程等方面。通过本文的详细解释和示例代码,读者应该能够更好地理解闭包的概念、特点和用法,从而在实际项目中更加灵活地运用闭包。

相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
25天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
22天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
31 6
|
22天前
|
JavaScript
使用Node.js创建一个简单的Web服务器
使用Node.js创建一个简单的Web服务器
|
25天前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
40 4
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
25天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
35 2
|
25天前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
63 1
|
29天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
35 4
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
177 2