Javascript的闭包及其使用技巧实例
Javascript的闭包及其使用技巧实例
一、闭包的基本概念
闭包(Closure)是一个引用了自由变量的函数,记录了该函数在定义时的scope chain。又称词法闭包(Lexical Closure)或函数闭包(function closures).
闭包的基本规则:
* 函数执行是基于函数定义时的scope, 而不是 函数运行时的scope
(定义时的Scope: 在定义这个函数的时候的scope chain)
为此, JS的function对象的内部状态,不仅包括函数代码本身, 而且包括了一个引用,指向函数定义时的scope Chain,
后者,用于提供函数中变量的值, 这种把代码及其所需要的scope组合到一起, 就是 闭包,closure。它是JS许多实用技巧的技术基础。
二、闭包的应用实例
示例1:
var who = "global scope"; // 全局变量who
function checkscope() {
var who = "local scope"; // 局部变量who
function f() { return who; } // 嵌套函数,
return f();
}
checkscope(); // => "local scope"
f函数在定义的时候, scope chain中有局部变量who和全局变量who, 按照局部变量优先于全局变量的原则,
函数中的who的应该局部变量这的who,其值是 “local scope”。
这就是函数的定义时Scope。根据Clouse的特性,JS会记录这些信息, 不论这个函数f在什么地方执行, who的值都是这个“local scope”
示例2:执行的地方变了, 但是函数定义时的scope未变
var who = "global scope"; // A global variable
function checkscope() {
var who = "local scope"; // A local variable
function f() { return who; } // Return the value in scope here
return f;
}
checkscope()() // => "local scope", 虽然,在这个时候“运行时的scope”中的who已经是全局的了。
实例3: 定义一个函数, 每调用一次, 获取一个唯一的整数,而且从0开始递增,每次+1。
var uniqueInteger = (function() { // 定义并执行1个外层函数。
var counter = 0; // 根据“定义时的scope”原则, 这个变量事实上成了下面函数的私有变量, 虽然它在函数体外,
当外层函数返回的时候, 此变量只能被下面的嵌套函数存取,
return function() { return counter++; }; // 定义一个函数,称作嵌套函数,被输出给uniqueInteger,在外面使用, 不是在外层函数内使用。
}());
uniqueInteger(); // 0
uniqueInteger(); // 1
uniqueInteger(); // 2
uniqueInteger(); // 3
实例4: 带有reset的计数器
function Counter() { // 定义并执行1个外层函数。
var n = 0; // 根据“定义时的scope”原则, 这个变量事实上成了下面2个嵌套函数的私有变量, 虽然它在函数体外,
当外层函数返回的时候, 此变量只能被下面的嵌套函数存取,
return { // 定义2个嵌套函数,并组合成1个对象输出, 供外面使用;
// 这两个嵌套函数, 都可以存取外层函数中的局部变量n
count: function() { return n++; }; 。
reset: function() { n = 0; }
}
};
var counter1 = Counter(), // 每一次调用 外层函数Counter(),都创建1个新的scope chain和1个新的私有变量n,互相不影响
counter2 = Counter();
counter1.count(); // 0
counter1.count(); // 1
counter1.count(); // 2
counter2.count(); // 0
counter2.count(); // 1
counter2.count(); // 2
counter1.reset();
counter1.count(); // 0
counter1.count(); // 1
counter2.count(); // 3
counter2.count(); // 4
实例5: 与Ajax调用配合使用, 显示加载的过程和结果
<div></div>
<script src="jquery.js"></script>
<script>
var elem = jQuery("div");
elem.html("Loading...");
jQuery.ajax({
url: "test.html",
success: function(html){ //嵌入函数, 直接使用外层函数中的elem, 暴露给Ajax作为callback使用
assert( elem, "The element to append to, via a closure." );
elem.html( html );
}
});
</script>
实例6: 与timer配合使用, 显示动画
<div id="box" style="position:absolute;">Box!</div>
<script>
var elem = document.getElementById("box");
var count = 0;
var timer = setInterval(function(){ //嵌入函数, 直接使用外层函数中的elem和count, 暴露给Timer作为callback使用
if ( count < 100 ) {
elem.style.left = count + "px";
count++;
} else {
clearInterval( timer );
}
}, 10);
</script>
进阶: JS 引擎内部是如何实现Scope Chain和Clouse的?
Scope Chain是一个list, 不是stack,
当执行function的时候, 建立1个新scope object,来存储此函数中的局部变量,并且把这个object加入到scope chain中,
当推出function的时候, 从scope chain中,删除这个object。
如果没有嵌套的函数, 则此object再无引用, 所以它会被 当作垃圾收集
如果有嵌套的函数, 则每一个嵌套函数都引用scope chain, 而scope chain引用此object,
** 如果这些嵌套函数,只限于在其外层函数里面使用, 则 这些嵌套函数及此object仍然可以被正常地垃圾收集。
** 如果这些嵌套函数 被用于外层函数之外的更多地方, 则这些嵌套函数及此object不能正常地垃圾收集, 从而可能导致造成内存泄露,
Javascript的闭包及其使用技巧实例的更多相关文章
- 深入理解JavaScript的闭包特性如何给循环中的对象添加事件
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)
原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...
- javascript中闭包最简单的简绍
javascript中闭包是什么 JavaScript 变量可以是局部变量或全局变量.私有变量可以用到闭包.闭包就是将函数内部和函数外部连接起来的一座桥梁. 函数的闭包使用场景:比如我们想要一个函数来 ...
- 理解javascript的闭包,原型,和匿名函数及IIFE
理解javascript的闭包,原型,和匿名函数(自己总结) 一 .>关于闭包 理解闭包 需要的知识1.变量的作用域 例1: var n =99; //建立函数外的全局变量 function r ...
- JavaScript的闭包特性如何给循环中的对象添加事件(一)
初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...
- JavaScript深入浅出-闭包
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 function (){ var localVal ...
- 更快学习 JavaScript 的 6 个思维技巧
更快学习 JavaScript 的 6 个思维技巧 我们在学习JavaScript,或其他任何编码技能的时候,往往是因为这些拦路虎而裹足不前: 有些概念可能会造成混淆,尤其当你是从其他语言转过来的时候 ...
- JavaScript作用域闭包简述
JavaScript作用域闭包简述 作用域 技术一般水平有限,有什么错的地方,望大家指正. 作用域就是变量起作用的范围.作用域包括全局作用域,函数作用域以块级作用域,ES6中的let和const可以形 ...
随机推荐
- Chrome 66 禁止声音自动播放
声音无法自动播放一直在IOS/Android上面都是一个惯例, 桌面端的 Safari在2017年的11版本中也宣布禁止带有声音的多媒体自动播放, 紧接着2018年4月份Chrome发布的66版本也正 ...
- jdk源码剖析二: 对象内存布局、synchronized终极原理
很多人一提到锁,自然第一个想到了synchronized,但一直不懂源码实现,现特地追踪到C++层来剥开synchronized的面纱. 网上的很多描述大都不全,让人看了不够爽,看完本章,你将彻底了解 ...
- WyBox用usb口驱动4G模块EC20
按照: http://wiki.openwrt.org/doc/howtobuild/wireless-router-with-a-3g-dongle 然后: 进入linux-3.10.49/driv ...
- 编译小米mini openwrt
编译小米mini openwrt 1.下载openwrt源码包:进入要下载保存的文件目录,输入 git clone git://git.openwrt.org/15.05/openwrt.git 2. ...
- windows下安装redis以及测试 --转载自http://www.cnblogs.com/lpyan/p/5608333.html
redis加入到Windows 服务 以下方式,需要在redis-2.8.24下执行:http://download.csdn.net/download/feiliua/9425770 ,另外php的 ...
- DLL的晚绑定与早绑定
调用DLL中的函数可分为早绑定与晚绑定! 早绑定是指在编译期就已经确定函数地址! 晚绑定是指在运行期动态加载dll,并根据查表的方式获取dll内exports函数的地址,由于早绑定比较简单,在此不再讲 ...
- 如何查看java对象的大小
有时需要查看java对象占用了多少内存(对象大小),lucene为我们提供了一个很好的工具类,操作简单,如下: int[] s = new int[1024]; System.out.println( ...
- 廖雪峰Java1-3流程控制-5循环
while循环 while循环首先判断条件: 条件满足时循环:条件不满足时退出循环 如果一开始条件就不满足,一次都不循环.如while false int sum = 0; int n = 1; wh ...
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
- Oracle 锁的概念
用scott/orcl登录并且模拟数据 SQL> conn scott/orclConnected.SQL> create table tt(id int primary key); Ta ...