(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. 从mixin到new和prototype:Javascript原型机制详解

    从mixin到new和prototype:Javascript原型机制详解   这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...

  3. JavaScript严格模式详解

    转载自阮一峰的博客 Javascript 严格模式详解   作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...

  4. [转]javascript console 函数详解 js开发调试的利器

    javascript console 函数详解 js开发调试的利器   分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...

  5. javascript 节点属性详解

    javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...

  6. (" use strict")Javascript 严格模式详解

    Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...

  7. Python闭包详解

    Python闭包详解 1 快速预览 以下是一段简单的闭包代码示例: def foo(): m=3 n=5 def bar(): a=4 return m+n+a return bar >> ...

  8. 【HANA系列】SAP HANA XS使用JavaScript数据交互详解

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...

  9. JavaScript运行机制详解

    JavaScript运行机制详解   var test = function(){ alert("test"); } var test2 = function(){ alert(& ...

随机推荐

  1. 9.13noip模拟试题

    题目名称 “与” 小象涂色 行动!行动! 输入文件 and.in elephant.in move.in 输出文件 and.out elephant.in move.in 时间限制 1s 1s 1s ...

  2. for update和for update nowait的区别和使用

    首先,for update 和for update nowait 是对操作的数据行进行加锁,在事务提交前防止其他操作对数据的修改. for update 和for update nowait主要区别在 ...

  3. SqlDependency 的使用

    1.SqlDependency是什么: SqlDependency 对象表示应用程序和 SQL Server 实例间的查询通知依赖关系.应用程序可以创建一个 SqlDependency 对象并进行注册 ...

  4. Delphi 动态改变Rzsplitter的Orientation(方向)属性

    效果图: 原先不知道,弄了半天都改不了RzSplitter.Orientation = orHorizontal / orVertical 然后去查该组件的源代码,原来Orientation不是在Rz ...

  5. 【USACO 3.2.4】饲料调配

    [描述] 农夫约翰从来只用调配得最好的饲料来喂他的奶牛.饲料用三种原料调配成:大麦,燕麦和小麦.他知道自己的饲料精确的配比,在市场上是买不到这样的饲料的.他只好购买其他三种混合饲料(同样都由三种麦子组 ...

  6. TalkingDataGame SDK在android Lua上的使用

    千呼万唤使出来...终于开始更新lua版本的内容了,之前一直有这方面的计划,由于公司业务比较多,一直比较忙-见谅.. 费话不多说,直接上内容.. 整体来讲,先是先建议看一下之前关于cocos2dx上的 ...

  7. sql编程 1

    declare emp_count number;begin select count(*) into emp_count from emp where HIOREDATE >= TO_DATE ...

  8. sql语句去除重复记录(多表连接的查询)

    --处理表重复记录(查询和删除) /********************************************************************************** ...

  9. struts.xml详细配置

    <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN&quo ...

  10. cf B. Making Sequences is Fun

    http://codeforces.com/contest/373/problem/B 用二分枚举长度就可以. #include <cstdio> #include <cstring ...