JS编程建议——62:在循环体和异步回调中慎重使用闭包

简介: 62:在循环体和异步回调中慎重使用闭包

建议62:在循环体和异步回调中慎重使用闭包
闭包在开发中具有重要的应用价值,由于闭包具有持久性,生成的闭包不会立即被销毁,因此它会持续占用系统资源。如果大量使用闭包,将会造成系统资源紧张,甚至导致内存溢出等错误。另外,闭包在回调函数中会带来负面影响,因此在使用时应该慎重。
下面的示例利用闭包来存储变量所有变化的值。
function f( x ){

var a = [];
for ( var i = 0; i < x.length; i ++ ){
    var temp = x[i];
    a.push( function(){
        alert( temp + ' ' + x[i] )
    });
}
return a;

}
function e(){

var a = f( ["a", "b", "c"] );
for ( var i = 0; i < a.length; i ++ ){
    a[i]();
}

}
e(); // 调用函数e
在这个示例中,函数f的功能是:把数组类型的参数中每个元素的值分别封装在闭包结构中,然后把闭包存储在一个数组中,并返回这个数组。但是,在函数e中调用函数f,并向其传递一个数组(["a", "b", "c"]),然后遍历函数f返回数组,此时会发现,数组中每个元素的值都是“c undefined”。
原来闭包中的变量temp并不是固定的,它会随时根据函数运行环境中的变量temp的值变化而更新,这样会导致临时数组元素的值都是字符“c”,而不是“a”、“b”、“c”,同时,由于循环变量i递增之后,最后的值是3, x[3]超出了数组的长度,所以结果就是undefined。
解决闭包存在缺陷问题的方法是:为闭包再包裹一层函数,然后运行该函数,并把外界动态值传递给它,这个函数接收这些值后传递给内部的闭包函数,从而阻断了闭包与最外层函数的实时联系。
function f( x ){

var a = [];
for ( var i = 0; i < x.length; i ++ ){
    var temp = x[i];
    a.push(
        ( function( temp, i ){
            return function(){
                alert( temp + ' ' + x[i] )
            }
        })( temp, i )
    );
}
return a;

}
function e(){

var a = f( ["a", "b", "c"] );
for ( var i = 0; i < a.length; i ++ ){
    a[i]();
}

}
e();
同一个闭包通过分别引用能够在当前环境中生成多个闭包。例如:
function f( x ){

var temp = x;
return function( x ){
    temp += x;
    alert( temp );
}

}
var a = f( 50 )
var b = f( 100 )
a( 5 ) //55
b( 10 ) //110

相关文章
|
8月前
|
JavaScript 前端开发 Java
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
236 24
JavaScript:编程宇宙的多面闪耀之星-揭秘 JavaScript,编程界的全能霸主如何炼成?-优雅草卓伊凡
|
10月前
|
Web App开发 JavaScript 前端开发
如何在JavaScript中确定异步操作之间的依赖关系?
如何在JavaScript中确定异步操作之间的依赖关系?
235 58
|
10月前
|
前端开发 JavaScript
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
有没有方法可以保证在JavaScript中多个异步操作的执行顺序?
432 58
|
8月前
|
存储 JavaScript 前端开发
|
10月前
|
自然语言处理 JavaScript 前端开发
当面试官再问我JS闭包时,我能答出来的都在这里了。
闭包(Closure)是前端面试中的高频考点,广泛应用于函数式编程中。它不仅指函数内部定义的函数,还涉及内存管理、作用域链和垃圾回收机制。闭包可以让函数访问其外部作用域的变量,但也可能引发内存泄漏等问题。通过合理使用闭包,可以实现模块化、高阶函数和回调函数等应用场景。然而,滥用闭包可能导致代码复杂度增加、调试困难以及潜在的性能问题。为了避免这些问题,开发时应谨慎处理闭包,避免不必要的嵌套,并及时清理不再使用的变量和监听器。
429 16
当面试官再问我JS闭包时,我能答出来的都在这里了。
|
9月前
|
JavaScript Ubuntu Linux
如何在阿里云的linux上搭建Node.js编程环境?
本指南介绍如何在阿里云Linux服务器(Ubuntu/CentOS)上搭建Node.js环境,包含两种安装方式:包管理器快速安装和NVM多版本管理。同时覆盖全局npm工具配置、应用部署示例(如Express服务)、PM2持久化运行、阿里云安全组设置及外部访问验证等步骤,助你完成开发与生产环境的搭建。
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
10月前
|
JavaScript 前端开发 IDE
【编程向导】Js与Ts差异详解:选择与权衡
JavaScript 一直是 Web 开发的基石,以其灵活性和动态性著称,但其松散类型可能导致大型项目中出现难以调试的错误。TypeScript 作为 JavaScript 的超集,通过引入静态类型系统,提供了更高的类型安全性和更好的工具支持,尤其适合大型团队和复杂项目。本文详细对比了 JavaScript 和 TypeScript 的优缺点,并提供了实际代码示例,帮助开发者根据项目需求选择合适的工具。
1288 2
|
9月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
9月前
|
缓存 自然语言处理 JavaScript
JavaScript中闭包详解+举例,闭包的各种实践场景:高级技巧与实用指南
闭包是JavaScript中不可或缺的部分,它不仅可以增强代码的可维护性,还能在模块化、回调处理等场景中发挥巨大作用。然而,闭包的强大也意味着需要谨慎使用,避免潜在的性能问题和内存泄漏。通过对闭包原理的深入理解以及在实际项目中的灵活应用,你将能够更加高效地编写出简洁且功能强大的代码。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~