(1)定义:
　　函数内部返回一个函数,返回出来的这个函数叫做被我们称之为闭包（个人理解的最简单的表现形式,）
(2)为什么要使用闭包呢?

    局部变量在函数执行完之后就会被GC回收，有时候我们想在外部访问内部的变量，这个时候就用到了闭包

(3)闭包有两个作用：

    a.访问函数内部的变量（函数作为返回值）
    b.保存作用域（函数作为参数传递）

   //1.访问函数内部的变量（函数作为返回值）

     function test(){

         var age = 18;

         return function(){

             console.log(age);

         }

     }

     var myTest = test();

     console.log(myTest);//为匿名函数，function(){console.log(age)}

     myTest();//

     //另一个例子

     function fn() {

         var max = 10;

         return function bar(x) {

             if (x > max) {

                 console.log(x);

             }

         }

     }

     var f1 = fn();

     console.log(f1);//function bar(x){if(x>max){console.log(x);}}

     f1(15);//结果为15

     //保存作用域（函数作为参数传递）

     //保存作用域

     function test(){

         var a = 1;//局部变量

         hehe = function(){//全局变量

             a++;

         };

         return function(){

             console.log(a);

         }

     }

     var haha = test();//此时haha为test()执行完之后的返回值，匿名函数function(){consolloe.log(a)}

     haha();//打印1

     hehe();//hehe函数为全局变量，可以在外边执行，此处a++

     haha();//打印2

     hehe();//同上

     //注意：haha为全局变量，不会被GC回收,所以test函数的返回值，一直存在，test的作用域一直存在，不会被GC回收

     //注意：自由变量跨域取值时，要去创建这个函数的作用域取值，而不是“父作用域”；

     //

     var max = 10;

     var fn = function(x){

         if(x>max){

             console.log(max);//

             console.log(x);//

         }

     };

     (function(f){

         var max = 100;

         f(15);

     })(fn);


(4)闭包的使用
    假设页面上有5个div节点，我们通过循环来给每个div绑定onclick事件，按照索引顺序，点击第一个div时弹出0，点击第2个div时弹出1，以此类推。




  <body>

     <div>1</div>

     <div>2</div>

     <div>3</div>

     <div>4</div>

     <div>5</div>

 </body>






 //闭包的使用

     var nodes = document.getElementsByTagName('div');

     for(var i=0;i<nodes.length;i++){

         nodes[i].onclick = function(){

             console.log(i);

         }

     }

     //思考一下，存在什么问题？？

     // 点击每一个打印的都是5是不是···

     var nodes = document.getElementsByTagName('div');

     for(var i=0;i<nodes.length;i++){

         (function(i){ //块级作用域或私有作用域

             nodes[i].onclick = function(){

                 console.log(i);

             }

         })(i)

     }

     //上述方法优点：把每次循环的i值都封闭起来






（5）使用闭包的注意点

    由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，
    所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。


 
												


											
JavaScript的闭包详解的更多相关文章
	

    
						
  1. Javascript函数闭包详解（通俗易懂
		
    许多书上闭包过于复杂讲解难懂,自己理解了一下并总结啦~ 讲闭包之前,需要先明白以下几个概念. 总之,函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域. 1.执行上下文(executi ...
    
		
    2. 
								
  2. 从mixin到new和prototype：Javascript原型机制详解
		
    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...
    
		
    3. 
						
  3. JavaScript严格模式详解
		
    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...
    
		
    4. 
						
  4. [转]javascript console 函数详解 js开发调试的利器
		
    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
    
		
    5. 
						
  5. javascript 节点属性详解
		
    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...
    
		
    6. 
						
  6. (" use strict")Javascript 严格模式详解
		
    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...
    
		
    7. 
						
  7. Python闭包详解
		
    Python闭包详解 1 快速预览 以下是一段简单的闭包代码示例: def foo(): m=3 n=5 def bar(): a=4 return m+n+a return bar >> ...
    
		
    8. 
						
  8. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解
		
    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...
    
		
    9. 
						
  9. JavaScript运行机制详解
		
    JavaScript运行机制详解   var test = function(){ alert("test"); } var test2 = function(){ alert(& ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. querystring,parse和stringify相互转换
			
    var querystring = require('querystring');var str = 'name==zfpx@age==8';//手工指定字段分隔符和 keyvalue分隔符var q ...
    
			
    2. 
						
  2. JAVA中的finalize()方法
			
    [转]JAVA中的finalize()方法 今天早上看Thinking in java的[第四章 初始化和清除].[  清除:终结和垃圾回收]的时候, 看到了这个东西. 用于清理滴... 当然,这个方 ...
    
			
    3. 
						
  3. ajax请求aspx页面
			
    首先,这么用是不好的.最好用ashx,但也难免遇到这种需求.开发过这么一个系统,每天访问量最多100,web服务器压力很小,完全大马拉小车,主要压力都在数据库服务器上,要做大量的统计.所以页面直接全上 ...
    
			
    4. 
						
  4. web.xml配置详解 (及<context-param>配置作用 )
			
    http://blog.csdn.net/guihaijinfen/article/details/8363839 <context-param>配置作用 http://blog.csdn ...
    
			
    5. 
						
  5. 巧妙的Jq仿QQ游戏导航界面学习
			
    先贴上源代码 <!doctype html> <html> <head> <meta charset="utf-8"> <ti ...
    
			
    6. 
						
  6. react服务端渲染（同构）
			
    学习react也有一段时间了,使用react后首页渲染的速度与seo一直不理想.打算研究一下react神奇服务端渲染. react服务端渲染只能使用nodejs做服务端语言实现前后端同构,在后台对re ...
    
			
    7. 
						
  7. idea  sass scss配置
			
    1.安装Ruby win  直接http://rj.baidu.com/soft/detail/22711.html?ald mac linux https://ruby.taobao.org/ 可下 ...
    
			
    8. 
						
  8. Spring4.0学习笔记(9) —— Spring泛型依赖注入
			
    1.定义基础仓库 package com.spring.generic.di; public class BaseRepository<T> { } 2.定义基础服务层 package c ...
    
			
    9. 
						
  9. winform 剔除空格与换行显示
			
    string strTeachingPlan = this.txtTeachingPlan.Text.ToString().Trim();  string[] maarr = strTeachingP ...
    
			
    10. 
						
  10. 面向对象设计模式之Facade外观模式（结构型）
			
    动机:有些系统组件的客户和组件中各种复杂的子系统有了过多的的耦合,随着外部客户程序  和个子系统的演化,这种过多的耦合面临很多变化的挑战:如何简化外部客户程序和系统的交互接口?  如何将外部客户程序的 ...
    
			
    11.