`

js----闭包

CC++C#JavaScript.net 
阅读更多 
一、什么是闭包？

内部function会close-over外部function的变量直到内部function结束
funA 里面return 了个funB ,funB持有了funA的变量，因为被return出去，funB将负责管理funA的那个变量，并且这个变量变成了一个公共的变量，每次使用后都不会消亡，值还在。


    闭合的表达式，或称闭包; 
   意义：闭包可以用来在一个函数与一组“私有”变量之间创建关联关系。在给定函数被多次调用的过程中，这些私有变量能够保持其持久性。

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

　　相信很少有人能直接看懂这句话，因为他描述的太学术。我想用如何在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外的一个变量引用的时候，就创建了一个闭包。

$(function(){ ---1
  var local=1;
  window.setInterval(function(){--2
   local ++;
   window.stats=local;
},3000);
});

注意 函数1执行一次就结束了，但是由于函数2还得执行，所以函数1中的变量并没有被回收

注意：函数的上下文决不被包含为闭包的一部分
 ...
this.id='someID';
$('*').each(function(){
 alert(this.id);  //这个this和上面的this显然不是同一个this。。。不能这么用
});
改：
this.id='someID';
var outer=this;
$('*').each(function(){
 alert(outer.id);
});

陷阱：
var k = [];
for (var x = 1; x < 4; x++) {
  k.push(function () { return x; });
}
alert(k[0]())
这里居然是三个3 ，迭代过程中共用了同一个context，导致k中的三个闭包都引用了同一个变量x，他实际上记录的是内存的地址


------------------------------------------------------------------------------
有个网友问了个问题，如下的html，为什么每次输出都是5 

1.<html >2.<head>3.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />4.<title>闭包演示</title>5.<style type="text/css">6.</style>7.<script type="text/javascript">8.9.function init() {
10.    var pAry = document.getElementsByTagName("p");
11.    for( var i=0; i<pAry.length; i++ ) {
12.         pAry[i].onclick = function() {
13.         alert(i);
14.    }
15.  }
16.}
17.</script>18.</head>19.<body onload="init();">20.<p>产品一</p>21.<p>产品一</p>22.<p>产品一</p>23.<p>产品一</p>24.<p>产品一</p>25.</body>26.</html> 


解决方式有两种， 
1、将变量 i 保存给在每个段落对象（p）上 

1.2.
3.function init() {
4.  var pAry = document.getElementsByTagName("p");
5.  for( var i=0; i<pAry.length; i++ ) {
6.     pAry[i].i = i;
7.     pAry[i].onclick = function() {
8.        alert(this.i);
9.     }
10.  }
11.} 

12.

13.14.
2、将变量 i 保存在匿名函数自身 

1.
2.function init2() {
3.  var pAry = document.getElementsByTagName("p");
4.  for( var i=0; i<pAry.length; i++ ) {  
5.   (pAry[i].onclick = function() {
6.        alert(arguments.callee.i);
7.    }).i = i;
8.  }
9.
10.} 

再增加3种 

3、加一层闭包，i以函数参数形式传递给内层函数 

1.
2.function init3() {
3.  var pAry = document.getElementsByTagName("p");
4.  for( var i=0; i<pAry.length; i++ ) {
5.   (function(arg){    
6.       pAry[i].onclick = function() {    
7.          alert(arg);
8.       };
9.   })(i);//调用时参数10.  }  -----这种方式不错。。。
11.} 

12.

 
4、加一层闭包，i以局部变量形式传递给内存函数 

1.
2.function init4() {
3.  var pAry = document.getElementsByTagName("p");
4.  for( var i=0; i<pAry.length; i++ ) {  
5.    (function () {
6.      var temp = i;//调用时局部变量7.      pAry[i].onclick = function() {  
8.        alert(temp);  
9.      }
10.    })();
11.  }
12.} 

13.

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别） 

1.
2.function init5() {
3.  var pAry = document.getElementsByTagName("p");
4.  for( var i=0; i<pAry.length; i++ ) {  
5.   pAry[i].onclick = function(arg) {
6.       return function() {//返回一个函数7.       alert(arg);
8.     }
9.   }(i);
10.  }
11.}
12.

又有一种方法 

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

1.function init6() {
2.    var pAry = document.getElementsByTagName("p");
3.    for( var i=0; i<pAry.length; i++ ) {  
4.      pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例5.    }
6.}

 


本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/zhouruitao/archive/2008/09/11/2913936.aspx
分享到：
| oracle经典博文
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    org.mozilla.javascript-1.7.2.jar

    1.7.2版本发布于2009年，虽然相对较旧，但仍然包含了许多关键的JavaScript语言特性，如函数、对象、数组、正则表达式等，以及一些高级特性如闭包和原型链。 使用"org.mozilla.javascript-1.7.2.jar"，开发者可以...

    支持php5.3.3的php-js-ext 0.1.2扩展

    - 引入了闭包（Closures），提供了内联函数和匿名函数的功能，增强了函数式编程能力。 - 错误报告提升，增加了错误处理的灵活性。 - 优化了性能，提高了运行效率。 **2. php-js-ext扩展** `php-js-ext` 是一个专门...

    前端面试相关-闭包的使用场景

    前端面试相关--闭包的使用场景

    Javascript 闭包完整解释

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

    js-高性能JavaScript-JavaScript语言精粹修订版

    ### JavaScript核心知识点概览 #### 一、《高性能JavaScript》 **知识点概述：** 1. **性能优化基础知识：** - 了解JavaScript引擎的工作原理及其对性能的影响。 - 学习如何通过代码结构和组织来提高执行效率。...

    js闭包详细讲解

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

    js闭包个人理解

    ### JavaScript闭包的理解 在JavaScript中，闭包（Closure）是一种非常重要的概念，它涉及到函数作用域、变量生命周期以及函数内部对外部作用域的访问等多个方面。本文将基于提供的文件内容，深入探讨JavaScript...

    js代码-闭包隐藏变量

    让我们深入探讨一下闭包的原理、用途以及如何在`main.js`这样的JavaScript文件中实现它们。 闭包的原理主要基于JavaScript的作用域链。当一个函数被定义时，它会捕获其词法作用域内的所有变量，即使函数在其他地方...

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

    JavaScript 闭包是一种强大的编程工具，常常被用来解决特定的问题和优化代码结构。在JavaScript中，闭包是指一个函数能够访问并操作其定义时的作用域内的变量，即使该函数在其外部作用域被调用。以下将详细介绍两个...

    第九课 闭包-011

    在前端开发中，闭包是一种非常重要的概念，它涉及到JavaScript中的函数、作用域以及内存管理。本节我们将深入探讨匿名函数和闭包，并了解它们在实际应用中的作用。 首先，我们来看匿名函数。匿名函数，正如其名，是...

    第九课 闭包-021

    在前端开发中，闭包是一种重要的概念，它涉及到函数、作用域和内存管理。闭包允许函数访问并操作其外部作用域的变量，即使在外部函数执行完毕后，这些变量仍然可以被内部函数记住。这一特性使得闭包在数据封装、模块...

    js闭包的介绍

    JavaScript中的闭包是一种重要的编程概念，它涉及到函数和变量的作用域。闭包允许函数访问并操作其自身作用域内以及包含它的外部作用域中的变量，即使在其外部调用时也是如此。这种特性使得闭包在处理数据隐私、创建...

    JS 闭包的理解

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

    js代码-闭包-携带状态的函数

    让我们深入探讨一下闭包的概念、工作原理以及如何在实际的JavaScript代码（如`main.js`）中应用它们。 闭包的本质在于，它是一个函数，能够记住并访问创建它的词法作用域，即使这个作用域已经不再存在。在...

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

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

    JavaScript闭包函数

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

    js闭包写法学习demo

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

    js闭包学习

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

    js-sandbox:了解和演示闭包的小型 js 测试

    闭包是JavaScript中的一个关键概念，对于理解函数的作用域、内存管理以及模块化设计至关重要。本项目“js-sandbox”旨在帮助开发者深入理解闭包，并通过实践加深对Web套接字（WebSocket）和函数式编程（FP）的理解。...

Magicbox
Global site tag (gtag.js) - Google Analytics