`

什么是javascript闭包

    博客分类:
  • js
 
阅读更多

闭包(closure)是 ECMAScript 的语法特性,即在函数内部定义函数,内部的函数可访问其外部函数的作用域,JavaScript 也实现了这种特性。闭包这个术语确实晦涩,但实现闭包其实很简单,只要弄懂了 JS 的作用域规则,自然就好理解闭包了。
举个例子,

 
function outer(name){ // 外部的函数
  var msg="hello";
  function inner(){ // 内部函数
    alert(msg+" "+name);
  }
  return inner(); // 返回内部函数
}
var clos=outer("Wang");
clos();

这段代码就使用了闭包,执行代码将弹出警告“hello Wang”。


先解释一下作用域(scope)。在运行函数都会创建属于函数的上下文环境(context)及作用域,作用域即当前环境范围内的变量。JS 中最外围的环境为 window 对象,也就是全局作用域所在的环境。当执行到下一级环境时,下一级环境会主动包含上一级的作用域,最终形成一级一级关联的作用域链(对象的 [[Scope]] 属性指向该作用域链)。当有下一级环境生成时,上一级环境会失活,但不会自动销毁而保存在一种“栈”式结构中,这样可以保证作用域链的延续性,也可以环境回退时再次激活。当前环境可访问当前作用域链中的全部变量,比如上面代码中的 inner() 函数可访问 outer() 函数中的 msg 和 name 变量。
闭包就是借助这种作用域链,一方面可使内部函数可访问外部函数的变量;另一方面,闭包还可以抑制外部函数环境的销毁,使其变量始终保存在内存中,直至不需要时再销毁。至于闭包的应用,实际上都是一些小技巧,下面写一些例子。


循环绑定事件,使循环过程中的索引值 i 均有效

 
var elems=document.getElementsByTagName('li');
for(var i=0;i<elems.length;i++){
  elems[i].onclick=function(i){
    return (function(){ // 闭包
      alert(i);
    })
  }(i); // 这里使用了匿名函数,实际应用中较常见
}

构造无参数的函数名引用,因为闭包的函数一般没有参数

 
//使用之前 outer 函数的例子
var clos=outer("Wang");
setTimeout(clos,100);

模块封装,比如在 jQuery 中就有类似的代码,保证内部变量不影响全局变量

 
function($){ 
  // jQuery 内部实现
})(jQuery);
// 这里使用了自动执行的匿名函数,即定义匿名函数并立即执行。看起来和闭包没什么关系,但原来是一样的。

 

但是,闭包最好要少用,之前已经说过,闭包会使变量始终保存在内存中,如果不当使用会增大内存开销,甚至会带来内存泄漏的风险。当然,还是可以使用类似

 
//使用之前 outer 函数的例子
clos=null;

的代码释放变量占用的内存并帮助 GC 机制回收。

分享到:
评论

相关推荐

    JavaScript闭包研究及典型应用.pdf

    JavaScript 闭包研究及典型应用 JavaScript 闭包是一种强大的技术,能够在各种场景中发挥重要作用。本文将介绍 JavaScript 闭包的定义、使用场景和典型应用。 闭包函数的定义和使用场景 在 JavaScript 语言中,...

    JavaScript闭包

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

    javascript 闭包

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。

    基于JavaScript闭包的Web图片浏览控件的实现.pdf

    基于JavaScript闭包的Web图片浏览控件的实现 本文主要讲解了基于JavaScript闭包原理的Web图片浏览控件的实现,包括JavaScript闭包概念、闭包应用场景、Web图片浏览控件的设计思路和实现方法。 1. JavaScript闭包...

    javascript闭包详解中文word版

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

    Javascript 闭包完整解释

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

    JavaScript闭包函数

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

    javascript闭包的理解

    标题《JavaScript闭包的理解》涉及的知识点主要围绕JavaScript编程中的一个重要概念——闭包。闭包是一个高级且复杂的话题,它是JavaScript语言的核心特性之一,同时也是一大难点。要想熟练运用JavaScript,掌握闭包...

    javascript里的闭包是什么 什么是闭包.zip

    JavaScript中的闭包是一种重要的编程概念,它涉及到函数、作用域和变量持久化等多个核心知识点。闭包的本质是函数能够访问并操作其外部作用域内的变量,即使在其外部作用域已经结束之后仍然能保持对这些变量的访问。...

    JavaScript知识点总结(十六)之Javascript闭包(Closure)代码详解

    在深入讨论JavaScript闭包之前,首先需要了解JavaScript的变量作用域。在JavaScript中,变量的作用域分为两种:全局变量和局部变量。全局变量是在函数外部定义的变量,可以在JavaScript程序的任何地方被访问。局部...

    基于javascript 闭包基础分享

    在JavaScript编程中,闭包是一个核心概念,它允许函数记住并访问所在词法作用域,即使当函数在其词法作用域之外执行时。闭包的特性使得它在JavaScript中既神秘又强大。 首先,我们从闭包的定义谈起。在JavaScript中...

    javascript 闭包实例下载

    JavaScript 闭包是一种高级编程概念,它在JavaScript中扮演着至关重要的角色,特别是在函数式编程和模块化设计中。闭包本质上是函数和其能够访问...通过学习这些实例,你将能够更好地掌握JavaScript闭包这一核心概念。

    javaScript闭包技术资料

    ### JavaScript闭包技术详解 #### 一、闭包的基本概念 **闭包**是JavaScript中一个重要的概念,它涉及到函数的执行环境、作用域链等关键要素。简单来说,闭包是一个函数及其相关的引用环境的组合。具体而言,当一...

    javascript闭包详解

    javascript闭包详解 javascript闭包详解 javascript闭包详解

    javascript闭包高级教程

    ### JavaScript闭包高级教程 #### 简介 在JavaScript编程中,“闭包”是一个非常重要的概念,尤其对于希望深入理解和高效使用JavaScript的开发者来说。简单地说,闭包是一种能够记住并访问其创建时周围环境的函数...

    【JavaScript源代码】详解JavaScript闭包问题.docx

    详解JavaScript闭包问题  闭包是纯函数式编程语言的传统特性之一。通过将闭包视为核心语言构件的组成部分,JavaScript语言展示了其与函数式编程语言的紧密联系。由于能够简化复杂的操作,闭包在主流JavaScript库...

    Javascript闭包实例详解

    JavaScript中的闭包是一种重要的编程概念,它涉及到函数、作用域和变量持久化。闭包本质上是函数能够记住并访问其词法作用域内的变量,即使该函数已经执行完毕且其外部作用域不再存在。这种特性使得闭包成为...

    理解_JavaScript_闭包

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

    javaScript闭包的理解

    ### JavaScript闭包的理解 #### 一、闭包的定义与特点 闭包是JavaScript中一个非常重要的概念,它指的是一个函数能够访问并操作其外部作用域中的变量的能力。这一特性使得JavaScript具有了一些其他语言不具备的...

Global site tag (gtag.js) - Google Analytics