`
543334061
  • 浏览: 11302 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

js 中的闭包

 
阅读更多
一、什么是闭包?

  “官方”的解释是:所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式
 (通常是一个函数),因而这些变量也是该表达式的一部分。

  相信很少有人能直接看懂这句话,因为他描述的太学术。我想用如何在Javascript中创建一个闭
包来告诉你什么是闭包,因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。看下面这段代码:

    function a(){
      var i=0;
      function b(){
        alert(++i);
      }
      return b;
    }
    var c = a();
    c();

  这段代码有两个特点:

  1、函数b嵌套在函数a内部;

  2、函数a返回函数b。

引用关系如下:

  这样在执行完var c=a()后,变量c实际上是指向了函数b,再执行c()后就会弹出一个窗口显示i的值
(第一次为1)。这段代码其实就创建了一个闭包,为什么?因为函数a外的变量c引用了函数a内的函数b,
就是说:

  当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

  我猜想你一定还是不理解闭包,因为你不知道闭包有什么作用,下面让我们继续探索。

  二、闭包有什么作用?

   简而言之,闭包的作用就是在a执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回
a所占用的资源,因为a的内部函数b的执行需要依赖a中的变量。这是对闭包作用的非常直白的描述,
不专业也不严谨,但大概意思就是这样,理解闭包需要循序渐进的过程。

    在上面的例子中,由于闭包的存在使得函数a返回后,a中的i始终存在,这样每次执行c(),i都是
自加1后alert出i的值。

    那么我们来想象另一种情况,如果a返回的不是函数b,情况就完全不同了。因为a执行完后,
b没有被返回给a的外界,只是被a所引用,而此时a也只会被b引 用,因此函数a和b互相引用但又不
被外界打扰(被外界引用),函数a和b就会被GC回收。(关于Javascript的垃圾回收机制将在后面详细介绍)

  三、闭包内的微观世界

    如果要更加深入的了解闭包以及函数a和嵌套函数b的关系,我们需要引入另外几个概念:函数的
执行环境(excution context)、活动对象(call object)、作用域(scope)、作用域链(scope chain)。
以函数a从定义到执行的过程为例阐述这几个概念。

   1、当定义函数a的时候,js解释器会将函数a的作用域链(scope chain)设置为定义a时a所在的“环境
”,如果a是一个全局函数,则scope chain中只有window对象。
  2、当函数a执行的时候,a会进入相应的执行环境(excution context)。
  3、在创建执行环境的过程中,首先会为a添加一个scope属性,即a的作用域,其值就为第1步中的
scope chain。即a.scope=a的作用域链。
  4、然后执行环境会创建一个活动对象(call object)。活动对象也是一个拥有属性的对象,但它不具
有原型而且不能通过JavaScript代码直接访问。创建完活动对象后,把活动对象添加到a的作用域链的最
顶端。此时a的作用域链包含了两个对象:a的活动对象和window对象。
  5、下一步是在活动对象上添加一个arguments属性,它保存着调用函数a时所传递的参数。
  6、最后把所有函数a的形参和内部的函数b的引用也添加到a的活动对象上。在这一步中,完成了函数
b的的定义,因此如同第3步,函数b的作用域链被设置为b所被定义的环境,即a的作用域。
  
  到此,整个函数a从定义到执行的步骤就完成了。此时a返回函数b的引用给c,又函数b的作用域链包含
了对函数a的活动对象的引用,也就是说b可以访问到a中定义的所有变量和函数。函数b被c引用,函数b
又依赖函数a,因此函数a在返回后不会被GC回收。

  当函数b执行的时候亦会像以上步骤一样。因此,执行时b的作用域链包含了3个对象:b的活动对象、
a的活动对象和window对象,如下图所示:

   如图所示,当在函数b中访问一个变量的时候,搜索顺序是先搜索自身的活动对象,如果存在则返回,
如果不存在将继续搜索函数a的活动对象,依 次查找,直到找到为止。如果整个作用域链上都无法找到,
则返回undefined。如果函数b存在prototype原型对象,则在查找完自身的活动对象 后先查找自身的原
型对象,再继续查找。这就是Javascript中的变量查找机制。

  四、闭包的应用场景

  1、保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途
径访问到,因此保护了i的安全性。

  2、在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c()
,都会给i自加1。

  以上两点是闭包最基本的应用场景,很多经典案例都源于此。

  五、Javascript的垃圾回收机制

  在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,
而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,
这就是为什么函数a执行后不会被回收的原因。
分享到:
评论

相关推荐

    JavaScript中闭包之浅析解读(必看篇)_.docx

    JavaScript中的闭包是一种重要的编程概念,它涉及到函数和作用域的高级用法。闭包简单来说,就是一个函数能够访问并操作其外部作用域中的变量,即使在其外部函数已经执行完毕后,仍然能保持对外部作用域的访问权限。...

    JS闭包可被利用的常见场景

    在JavaScript中,闭包是指一个函数能够访问并操作其定义时的作用域内的变量,即使该函数在其外部作用域被调用。以下将详细介绍两个常见场景中闭包的应用。 场景一:采用函数引用方式的 `setTimeout` 调用 在Web...

    js闭包个人理解

    - **内存泄漏**:如果闭包中引用的对象长时间不被释放,可能会导致内存泄漏。 - **性能问题**:频繁地创建闭包可能会对性能产生影响,尤其是在移动设备上。 #### 总结 通过上述分析,我们可以看出JavaScript中的...

    Javascript 闭包完整解释

    ### JavaScript闭包完整解释 #### 一、闭包的基本概念 **闭包**是一个非常重要的JavaScript概念,它指的是一个函数能够记住并访问其外部作用域中的变量的能力,即使该函数在其外部作用域之外被调用也是如此。具体...

    JS 闭包的理解

    总之,JavaScript闭包是理解和编写高效、模块化代码的关键概念,它能帮助我们更好地管理作用域、变量和内存,从而提高代码的复用性和可维护性。在日常开发中,熟练掌握闭包不仅可以提升编程技能,也能让代码更加优雅...

    js闭包详细讲解

    ### JavaScript闭包详解 #### 一、闭包概念与特性 **闭包**是JavaScript语言的一个重要特性,它使得函数可以访问并操作其外部作用域内的变量,即使该函数在其外部作用域之外被调用。要理解闭包,首先需要了解...

    javascript中闭包概念与用法深入理解

    本文实例分析了javascript中闭包概念与用法。分享给大家供大家参考,具体如下: 1.问题的引出,什么时候会遇到闭包? 首先因为JS是没有块状作用域的,但是有函数作用域即函数作为了局部变量之间的界限,不同函数内的...

    JavaScript闭包函数

    闭包是ECMAScript (JavaScript)最强大的特性之一,但用好闭包的前提是必须理解闭包。闭包的创建相对容易,人们甚至会在不经意间创建闭包,但这些无意创建的闭包却存在潜在的危害,尤其是在比较常见的浏览器环境下...

    js闭包写法学习demo

    以下是一些关于JavaScript闭包的关键知识点: 1. **函数嵌套**:闭包最常见的形式是内部函数引用了外部函数的变量。例如: ```javascript function outerFunction() { var outerVar = 'I am from the outer ...

    js闭包学习

    JavaScript中的闭包是一种强大的特性,它允许函数访问和操作其外部作用域内的变量,即使在外部函数执行完毕后,闭包依然能保持对外部变量的访问。闭包的关键在于,它能够保留函数内部状态,使得数据得以持久化,这...

    理解_JavaScript_闭包

    本文结合 ECMA 262 规范详解了闭包的内部工作机制,让 JavaScript 编程人员对闭包的理解从“嵌套的函数”深入到“标识符解析、执行环境和作用域链”等等 JavaScript 对象背后的运行机制当中,真正领会到闭包的实质。

    js闭包理解之倒计时

    在这个“js闭包理解之倒计时”的主题中,我们将深入探讨如何利用闭包实现一个实际项目中的倒计时功能。 首先,让我们了解一下闭包的基本概念。在JavaScript中,每当函数被创建时,它都会形成一个闭包,这个闭包包含...

    深入理解javascript原型和闭包

    深入理解javascript原型和闭包(01)——一切都是对象 深入理解javascript原型和闭包(02)——函数和对象的关系

    JS中闭包的经典用法小结(2则示例)

    主要介绍了JS中闭包的经典用法,结合2则示例分析了JS闭包的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下

    JavaScript中闭包之浅析解读(必看篇)

    当函数计算出一个值之后,可以将结果保存在闭包中,当下次调用同一个函数时,可以直接返回之前计算好的结果。 6. 事件处理:在处理动态绑定事件时,常常使用闭包来保存事件处理器的状态。例如,在循环中为多个元素...

    javascript闭包详解中文word版

    资源名称:javascript闭包详解 中文word版   内容简介: Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态语言C/C 的程序员来说是一个新的...

    跟我学习javascript的闭包

    闭包:是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部创建另外一个函数。 直接上例子 function a(){ var i=0; function b(){ alert(++i); } return

    JS中的闭包理解。。。。。。。。

    这里,立即执行的匿名函数(IIFE)创建了一个新的作用域,使得每次循环都能保持对`i`的独立引用,避免了闭包中的变量共享问题。 总的来说,闭包是JavaScript中一个非常重要的概念,它提供了维护变量状态和访问私有...

    js闭包的理解以及作用.docx

    闭包是JavaScript中实现数据隐藏和封装的一种重要手段,对于理解和编写高效的JS代码至关重要。 1. **作用域的理解** - **全局变量**:在整个程序中都可访问的变量,它们在整个脚本的生命周期内都存在。 - **局部...

    JavaScript闭包

    Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包 对于那些使用传统静态...本文将以例子入手来介绍Javascript闭包的语言特性,并结合一点 ECMAScript语言规范来使读者可以更深入的理解闭包。

Global site tag (gtag.js) - Google Analytics