搜索
首页web前端js教程前端开发必须知道的JS之闭包及应用_javascript技巧

在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了。本文讲的是函数闭包,不涉及对象闭包(如用with实现)。如果你觉得我说的有偏差,欢迎拍砖,欢迎指教。
一. 闭包的理论
  首先必须了解以下几个概念:

  执行环境
  每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境。函数总是在自己的执行环境中执行,如读写局部变量、函数参数、运行内部逻辑。创建执行环境的过程包含了创建函数的作用域,函数也是在自己的作用域下执行的。从另一个角度说,每个函数执行环境都有一个作用域链,子函数的作用域链包括它的父函数的作用域链。关于作用域、作用域链请看下面。

  作用域、作用域链、调用对象
  函数作用域分为词法作用域和动态作用域。
  词法作用域是函数定义时的作用域,即静态作用域。当一个函数定义时,他的词法作用域就确定了,词法作用域说明的是在函数结构的嵌套关系下,函数作用的范围。这个时候也就形成了该函数的作用域链。作用域链就是把这些具有嵌套层级关系的作用域串联起来。函数的内部[[scope]]属性指向了该作用域链。
  动态作用域是函数调用执行时的作用域。当一个函数被调用时,首先将函数内部[[scope]]属性指向了函数的作用域链,然后会创建一个调用对象,并用该调用对象记录函数参数和函数的局部变量,将其置于作用域链顶部。动态作用域就是通过把该调用对象加到作用域链的顶部来创建的,此时的[[scope]]除了具有定义时的作用域链,还具有了调用时创建的调用对象。换句话说,执行环境下的作用域等于该函数定义时就确定的作用域链加上该函数刚刚创建的调用对象,从而也形成了新的作用域链。所以说是动态的作用域,并且作用域链也随之发生了变化。再看这里的作用域,其实是一个对象链,这些对象就是函数调用时创建的调用对象,以及他上面一层层的调用对象直到最上层的全局对象。 
  譬如全局环境下的函数A内嵌套了一个函数B,则该函数B的作用域链就是:函数B的作用域—>函数A的作用域—>全局window的作用域。当函数B调用时,寻找某标识符,会按函数B的作用域—>函数A的作用域—>全局window的作用域去寻找,实际上是按函数B的调用对象—>函数A的调用对象—>全局对象这个顺序去寻找的。也就是说当函数调用时,函数的作用域链实际上是调用对象链。

  闭包
  在动态执行环境中,数据实时地发生变化,为了保持这些非持久型变量的值,我们用闭包这种载体来存储这些动态数据(看完下面的应用就会很好的体会这句话)。闭包的定义:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
  闭包就是嵌套在函数里面的内部函数,并且该内部函数可以访问外部函数中声明的所有局部变量、参数和其他内部函数。当该内部函数在外部函数外被调用,就生成了闭包。(实际上任何函数都是全局作用域的内部函数,都能访问全局变量,所以都是window的闭包)
  譬如下面这个例子:

复制代码 代码如下:



垃圾回收机制:如果某个对象不再被引用,该对象将被回收。  
  再结合前面所讲的一些概念,在执行var test=f(1)时创建了f的调用对象,这里暂且记作obj,执行完后虽然退出了外部执行环境,但内部函数inner被外部函数f外面的一个变量test引用。由于外部函数创建的调用对象obj有一个属性指向此内部函数,而现在这个内部函数又被引用,所以调用对象obj会继续存在,不会被垃圾回收器回收,其函数参数x和局部变量a都会在这个调用对象中得以维持。虽然调用对象不能被直接访问,但是该调用对象已成为内部函数作用域链中的一部分,可以被内部函数访问并修改,所以执行test()时,可以正确访问x和a。所以说, 当执行了外部函数时,生成了闭包,被引用的外部函数的变量将继续存在。
二. 闭包的应用
  应用1:
  这个是我在用js模拟排序算法过程遇到的问题。我要输出每一次插入排序后的数组,如果在循环中写成
  setTimeout(function() { $("proc").innerHTML += arr + "
"; }, i * 500);
会发现每次输出的都是最终排好序的数组,因为arr数组不会为你保留每次排序的状态值。为了保存会不断发生变化的数组值,我们用外面包裹一层函数来实现闭包,用闭包存储这个动态数据。下面用了2种方式实现闭包,一种是用参数存储数组的值,一种是用临时变量存储,后者必须要深拷贝。所有要通过闭包存储非持久型变量,均可以用临时变量或参数两种方式实现。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

应用2:
  这个是无忧上的例子(点击这里查看原帖),为每个
  • 结点绑定click事件弹出循环的索引值。起初写成
    id.onclick = function(){ alert(i); }  id.onclick = function(){alert(i);}
    发现最终弹出的都是4,而不是想要的 1、2、3,因为循环完毕后i值变成了4。为了保存i的值,同样我们用闭包实现:

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    (ps:var a = (function(){})(); 与 var a =new function(){}效果是一样的,均表示自执行函数。)
      应用3:
      下面的code是缓存的应用,catchNameArr。在匿名函数的调用对象中保存catch的值,返回的对象由于被CachedBox变量引用导致匿名函数的调用对象不会被回收,从而保持了catch的值。可以通过CachedBox.getCatch("regionId");来操作,若找不到regionId则从后台取,catchNameArr 主要是为了防止缓存过大。
    复制代码 代码如下:



    同理,也可以用这种思想实现自增长的ID。  
    复制代码 代码如下:



    应用4:
      这个是无忧上月MM的例子(点击这里查看原帖),用闭包实现程序的暂停执行功能,还蛮创意的。

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    把这个作用延伸下,我想到了用他来实现window.confirm。

    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

    看了上面的这些应用,再回到前面的一句话:在动态执行环境中,数据实时地发生变化,为了保持这些非持久型变量的值,我们用闭包这种载体来存储这些动态数据。这就是闭包的作用。也就说遇到需要存储动态变化的数据或将被回收的数据时,我们可以通过外面再包裹一层函数形成闭包来解决。
      当然,闭包会导致很多外部函数的调用对象不能释放,滥用闭包会使得内存泄露,所以在频繁生成闭包的情景下我们要估计下他带来的副作用。
      毕了。希望能对大家有所帮助。
    者:JayChow
    出处:http://ljchow.cnblogs.com
  • 声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    2023年将突出的一些前端开发趋势,学起来!2023年将突出的一些前端开发趋势,学起来!Mar 14, 2023 am 09:37 AM

    前端开发趋势总是在不断发展,有些趋势会长期流行。本篇文章给大家总结了2023 年将突出的一些前端开发趋势,分享给大家~

    Flet:一个可跨平台的基于Flutter的Python框架Flet:一个可跨平台的基于Flutter的Python框架Apr 20, 2023 pm 05:46 PM

    昨天刚发了一篇Python桌面开发库大全的微头条,就被同事安利了Flet这个库。这是一个非常新的库,今年6月份才发布的第一个版本,虽然很新,但是它背靠巨人-Flutter,可以让我们使用Python开发全平台软件,虽然目前还不支持全平台,但是根据作者的计划,Flutter支持的,它以后都会支持的,昨天简单学习了一下,真的非常棒,把它推荐给大家。后面我们可以用它做一系列东西。什么是FletFlet是一个框架,允许用你喜欢的语言构建交互式多用户Web,桌面和移动应用程序,而无需拥有前端开发的经验。主

    如何使用PHP和Angular进行前端开发如何使用PHP和Angular进行前端开发May 11, 2023 pm 04:04 PM

    随着互联网的飞速发展,前端开发技术也在不断改进和迭代。PHP和Angular是两种广泛应用于前端开发的技术。PHP是一种服务器端脚本语言,可以处理表单、生成动态页面和管理访问权限等任务。而Angular是一种JavaScript的框架,可以用于开发单页面应用和构建组件化的Web应用程序。本篇文章将介绍如何使用PHP和Angular进行前端开发,以及如何将它们

    node.red是什么node.red是什么Nov 08, 2022 pm 03:53 PM

    node.red指Node-RED,是一款基于流的低代码编程工具,用于以新颖有趣的方式将硬件设备,API和在线服务连接在一起;它提供了一个基于浏览器的编辑器,使得我们可以轻松地使用编辑面板中的各种节点将流连接在一起,只需单击即可将其部署到其运行时。

    学会利用sessionstorage,提高前端开发效率学会利用sessionstorage,提高前端开发效率Jan 13, 2024 am 11:56 AM

    掌握sessionStorage的作用,提升前端开发效率,需要具体代码示例随着互联网的快速发展,前端开发领域也日新月异。在进行前端开发时,我们经常需要处理大量的数据,并将其存储在浏览器中以便后续使用。而sessionStorage就是一种非常重要的前端开发工具,可以为我们提供临时的本地存储解决方案,提高开发效率。本文将介绍sessionStorage的作用,

    前端开发中的JavaScript异步请求与数据处理经验总结前端开发中的JavaScript异步请求与数据处理经验总结Nov 03, 2023 pm 01:16 PM

    前端开发中的JavaScript异步请求与数据处理经验总结在前端开发中,JavaScript是一门非常重要的语言,它不仅可以实现页面的交互和动态效果,还可以通过异步请求获取和处理数据。在这篇文章中,我将总结一些在处理异步请求和数据时的经验和技巧。一、使用XMLHttpRequest对象进行异步请求XMLHttpRequest对象是JavaScript用于发送

    Webman:提供强大的视觉效果和动画效果的前端开发框架Webman:提供强大的视觉效果和动画效果的前端开发框架Aug 13, 2023 pm 10:07 PM

    Webman:提供强大的视觉效果和动画效果的前端开发框架前端开发在不断发展和进步的技术领域中扮演着重要的角色。随着互联网的普及和用户对用户体验的不断追求,前端开发需要更加强大且能够提供令人印象深刻的视觉效果和动画效果。Webman作为一种前端开发框架,致力于提供强大的视觉效果和动画效果,为开发者创造出独特而令人印象深刻的用户体验。Webman集成了丰富的前端

    前端开发中的JavaScript路由与页面跳转经验总结前端开发中的JavaScript路由与页面跳转经验总结Nov 02, 2023 am 10:15 AM

    前端开发中,JavaScript路由和页面跳转是必不可少的一部分。一个好的路由方案和页面跳转实现可以带来优秀的用户体验和页面性能。在本篇文章中,我们将从JavaScript路由的基础知识以及页面跳转的常见实现方式进行探讨,分享一些在实践中获得的经验和总结。一、JavaScript路由基础知识为了更好的理解什么是JavaScript路由,我们需要先了解下前端路

    See all articles

    热AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智能驱动的应用程序,用于创建逼真的裸体照片

    AI Clothes Remover

    AI Clothes Remover

    用于从照片中去除衣服的在线人工智能工具。

    Undress AI Tool

    Undress AI Tool

    免费脱衣服图片

    Clothoff.io

    Clothoff.io

    AI脱衣机

    AI Hentai Generator

    AI Hentai Generator

    免费生成ai无尽的。

    热门文章

    R.E.P.O.能量晶体解释及其做什么(黄色晶体)
    2 周前By尊渡假赌尊渡假赌尊渡假赌
    仓库:如何复兴队友
    4 周前By尊渡假赌尊渡假赌尊渡假赌
    Hello Kitty Island冒险:如何获得巨型种子
    3 周前By尊渡假赌尊渡假赌尊渡假赌

    热工具

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

    Atom编辑器mac版下载

    Atom编辑器mac版下载

    最流行的的开源编辑器

    Dreamweaver Mac版

    Dreamweaver Mac版

    视觉化网页开发工具

    PhpStorm Mac 版本

    PhpStorm Mac 版本

    最新(2018.2.1 )专业的PHP集成开发工具

    SecLists

    SecLists

    SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。