JavaScript的闭包详解
(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的闭包详解的更多相关文章
- Javascript函数闭包详解(通俗易懂
许多书上闭包过于复杂讲解难懂,自己理解了一下并总结啦~ 讲闭包之前,需要先明白以下几个概念. 总之,函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域. 1.执行上下文(executi ...
- 从mixin到new和prototype:Javascript原型机制详解
从mixin到new和prototype:Javascript原型机制详解 这是一篇markdown格式的文章,更好的阅读体验请访问我的github,移动端请访问我的博客 继承是为了实现方法的复用 ...
- JavaScript严格模式详解
转载自阮一峰的博客 Javascript 严格模式详解 作者: 阮一峰 一.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict m ...
- [转]javascript console 函数详解 js开发调试的利器
javascript console 函数详解 js开发调试的利器 分步阅读 Console 是用于显示 JS和 DOM 对象信息的单独窗口.并且向 JS 中注入1个 console 对象,使用该 ...
- javascript 节点属性详解
javascript 节点属性详解 根据 DOM,html 文档中的每个成分都是一个节点 DOM 是这样规定的:整个文档是一个文档节点每个 html 标签是一个元素节点包含在于 html 元素中的文本 ...
- (" use strict")Javascript 严格模式详解
Javascript 严格模式详解 转载别人的博客内容,浏览了一遍,没有全部吸收,先保存一下链接 http://www.ruanyifeng.com/blog/2013/01/javascript_s ...
- Python闭包详解
Python闭包详解 1 快速预览 以下是一段简单的闭包代码示例: def foo(): m=3 n=5 def bar(): a=4 return m+n+a return bar >> ...
- 【HANA系列】SAP HANA XS使用JavaScript数据交互详解
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA XS使用Jav ...
- JavaScript运行机制详解
JavaScript运行机制详解 var test = function(){ alert("test"); } var test2 = function(){ alert(& ...
随机推荐
- ACCSESS数据库导入到SQL SEVERES2005
首先打开Access数据库然后选择一张表,右击选择要导入数据库的类型(此处已sql2005为例) 然后选择新建 点击下一步 选择导入数据库类型(sql) 输入一个名称,在前面能用到(此处建的是250) ...
- Windows Azure上的Odoo(OpenERP)-2.在Ubuntu虚拟机上部署Odoo(OpenERP)
创建虚拟机的步骤在这里就不再赘述了,请参考上一篇博文. 首先用下述命令将Ubuntu系统进行更新: 1. sudo apt-get update 2. sudo apt-get upgrade 3. ...
- html.ex.day02
1.同一个目录内页面跳转 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- 【转】Java学习之Iterator(迭代器)的一般用法 (转)
[转]Java学习之Iterator(迭代器)的一般用法 (转) 迭代器(Iterator) 迭代器是一种设计模式,它是一个对象,它可以遍历并选择序列中的对象,而开发人员不需要了解该序列的底层结构.迭 ...
- application/json IE 兼容问题
由于IE系列浏览器把application/json响应视为文件,并尝试下载在网上看了一下,大致了解,只要修改返回的内容的类型(ContentType)即可解决问题. 由于ajax请求,返回类型默认就 ...
- Asp.net中的页面跳转及post数据
/// <summary> /// This method prepares an Html form which holds all data /// in hidden field i ...
- 九度OJ 1025 最大报销额(01背包)
题目1025:最大报销额 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:2683 解决:608 题目描述: 现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具( ...
- Selenium 下载URL
http://mvnrepository.com/artifact/org.seleniumhq.selenium
- Python标准库--os模块
这个模块包含普遍的操作系统功能.如果你希望你的程序能够与平台无关的话,这个模块是尤为重要的.即它允许一个程序在编写后不需要任何改动,也不会发生任何问题,就可以在Linux和Windows下运行.一个例 ...
- Groovy创建和解析json
正文: 在Groovy 1.8发布新闻中,提到Groovy增加了对JSON的支持.Dustin Marx在其博文中,讲述了这一功能的使用. 用法真的很简单,创建一个JSON对象: import gr ...