js闭包(三)
场景一:采用函数引用方式的setTimeout调用
闭包的一个通常的用法是为一个在某一函数执行前先执行的函数提供参数。例如,在web环境中,一个函数作为setTimeout函数调用的第一个参数,是一种很常见的应用。
setTimeout将要执行的函数(或者一段javascript代码,但这不是我们要讨论的情况)作为它的第一个参数,下一个参数是需要延迟执 行的时间。如果一段代码想通过setTimeout来调用,那么它需要传递一个函数对象的引用来作为第一个参数。延迟的毫秒数作为第二个参数,但这个函数 对象的引用无法为将要被延迟执行的对象提供参数。
但是,可以调用另一个函数来返回一个内部函数的调用,将那个内部函数对象的引用传递给setTimeout函数。内部函数执行时需要的参数,在调用 外部函数时传递给它。setTimeout在执行内部函数时无需传递参数,因为内部函数仍然能够访问外部函数调用时提供的参数:
- function callLater(paramA, paramB, paramC) {
- /*使用函数表达式创建并放回一个匿名内部函数的引用*/
- return (function () {
- /*
- 这个内部函数将被setTimeout函数执行;
- 并且当它被执行时,
- 它能够访问并操作外部函数传递过来的参数
- */
- paramA[paramB] = paramC;
- });
- }
- /*
- 调用这个函数将在它的执行上下文中创建,并最终返回内部函数对象的引用
- 传递过来的参数,内部函数在最终被执行时,将使用外部函数的参数
- 返回的引用被赋予了一个变量
- */
- var funcRef = callLater(elStyle, "display", "none");
- /*调用setTimeout函数,传递内部函数的引用作为第一个参数*/
- hideMenu = setTimeout(funcRef, 500);
场景二:将函数关联到对象的实例方法
有很多这样的场景:需要分配一个函数对象的引用,以便在未来的某个时间执行该函数。那么闭包对于为这个将要执行的函数提供引用会非常有帮助。因为该函数可能直到执行时才能够被访问。
有一个例子就是,一个javascript对象被封装用来参与一个特定DOM元素的交互。它有doOnClick、doMouseOver以及 doMouseOut方法。并且想在DOM元素上对应的事件被触发时执行这些方法。但是,可能会有关联着DOM元素的任意数量的javascript对象 被创建,并且单个的实例并不知道那些实例化它们的代码将如何处理它们。对象实例不知道怎样去“全局”地引用它们自己,因为它们不知道哪个全局变量(如果存 在)的引用将被分配给它们。
所以,问题是执行一个与特定javascript对象实例关联的事件处理函数,并且知道调用那个对象的哪个方法。
接下来的一个例子,在有元素事件处理的对象实例的关联函数上使用一个简单的闭包。通过传递event对象以及要关联元素的一个引用,为事件处理器分配不同的对象实例方法以供调用。
- /*
- 一个给对象实例关联一个事件处理器的普通方法,
- 返回的内部函数被作为事件的处理器,
- 对象实例被作为obj参数,对象上将要被调用的方法名称被作为第二个参数
- */
- function associateObjWithEvent(obj, methodName) {
- /*返回的内部函数被用来作为一个DOM元素的事件处理器*/
- return (function (e) {
- /*
- 事件对象在DOM标准的浏览器中将被转换为e参数,
- 如果没有传递参数给事件处理内部函数,将统一处理成IE的事件对象
- */
- e = e || window.event;
- /*
- 事件处理器调用obj对象上的以methodName字符串标识的方法
- 并传递两个对象:通用的事件对象,事件处理器被订阅的元素的引用
- 这里this参数能够使用,因为内部函数已经被执行作为事件处理器所在元素的一个方法
- */
- return obj[methodName](e, this);
- });
- }
- /*
- 这个构造器函数,通过将元素的ID作为字符串参数传递进来,
- 来创建将自身关联到DOM元素上的对象,
- 对象实例想在对应的元素触发onclick、onmouseover、onmouseout事件时
- 对应的方法被调用。
- */
- function DhtmlObject(elementId) {
- /*
- 调用一个方法来获得一个DOM元素的引用
- 如果没有找到,则为null
- */
- var el = getElementWith(elementId);
- /*
- 因为if语句块,el变量的值在内部进行了类型转换,变成了boolean类型
- 所以当它指向一个对象,结果就为true,如果为null则为false
- */
- if (el) {
- /*
- 为了给元素指定一个事件处理函数,调用了associateObjWithEvent函数,
- 利用它自己(this关键字)作为被调用方法的对象,并且提供方法名称
- */
- el.onclick = associateObjWithEvent(this, "doOnClick");
- el.onmouseover = associateObjWithEvent(this, "doOnMouseOver");
- el.onmouseout = associateObjWithEvent(this, "doOnMouseOut");
- }
- }
- DhtmlObject.prototype.doOnClick = function (event, element) {
- //doOnClick body
- }
- DhtmlObject.prototype.doMouseOver = function (event, element) {
- //doMouseOver body
- }
- DhtmlObject.prototype.doMouseOut = function (event, element) {
- //doMouseOut body
- }
任何DhtmlObject的实例都能够将它们自身关联到它们感兴趣的DOM元素上去,不需要去担心这些元素将被其他的代码怎么处理,以及被全局命名空间“污染”或者与其他的DhtmlObject的实例产生冲突。
场景三:封装相关的功能集
闭包可以创建额外的scope,这可以被用来组合相关的或有依赖性的代码。用这种方式可以最大限度地减少代码干扰的危害。假设,一个函数被用来创建 一个字符串并且避免重复串联的操作(比如创建一系列的中间字符串)。一个想法是,用一个数组来顺序存储字符串的一部分,然后使用 Array.prototype.join方法输出结果(使用一个空字符串作为它的参数)。数组将扮演着输出缓冲区的角色,但局部定义它又将会导致它在函 数的每次执行时再次创建。如果这个数组只是作为唯一的变量被分配给每一个函数调用,这将会有点小题大做。
一个解决方案是将数组提升为全局变量,让它不需要被再次创建也能够再次使用。但结果并不是想的那么简单,另外,一个全局变量关联这使用缓冲数组的函 数,那将会有第二个全局属性(函数本身也是window对象的属性)关联这个数组,这将让代码失去一定的可控性。因为如果将它使用在其他地方。这段代码的 创建者不得不记住包含函数的定义以及数组的定义逻辑。它也使得代码不那么容易与其他代码整合,因为将从原来只需要确定函数名是否在全局命名空间中唯一,变 成有必要确定和该函数关联的数组的名称是否在全局命名空间中保持唯一。
一个闭包可以让缓冲数组关联(干净地包含)它依赖的函数,并且同时保持缓冲数组的属性名称,像被分配在全局空间中一样,同时能够避免名称冲突以及代码交互干扰的危险。
这里有一招就是通过执行一个内联的函数表达式创建一个额外的执行上下文,让那个函数表达式返回一个内联的函数,该函数被外部代码使用。缓冲数组被定 义在内联执行的函数表达式中,作为一个局部变量。它仅被调用一次,所以该数组只被创建一次。但是对于依赖它的函数来说该数组是一直可访问的,并且可被重用 的。
接一下的代码创建了一个函数,将返回一个HTML字符串,其中的一部分是不变的,但那些不变的字符串需要被穿插进作为参数传递进来的变量中。
一个内联执行的函数表达式返回了内部函数对象的一个引用。并且分配了一个全局变量,让它可以被作为一个全局函数来调用。而缓冲数组作为一个局部变量被定义在外部函数表达式中。它没有被扩展到全局命名空间中,并且无论函数什么时候使用它都不需要被再次创建。
- /*
- 定义一个全局变量:getImgInPositionedDivHtml
- 被赋予对外部函数表达式一次调用返回的一个内部函数表达式
- 内部函数返回了一个HTML字符串,代表一个绝对定位的DIV
- 包裹这一个IMG元素,而所有的变量值都被作为函数调用的参数
- */
- var getImgInPositionedDivHtml = (function () {
- /*
- buffAr 数组被定义在外部函数表达式中,作为一个局部变量
- 它只被创建一次。数组的唯一实例对内部函数是可见的,
- 所以它可以被用于每一次的内部函数执行
- 空字符串仅仅被用来作为一个占位符,它将被内部函数的参数代替
- */
- var buffAr = [
- '<div id="',
- '', //index 1, DIV ID attribute
- '" style="position:absolute;top:',
- '', //index 3, DIV top position
- 'px;left:',
- '', //index 5, DIV left position
- 'px;width:',
- '', //index 7, DIV width
- 'px;height:',
- '', //index 9, DIV height
- 'px;overflow:hidden;\"><img src=\"',
- '', //index 11, IMG URL
- '\" width=\"',
- '', //index 13, IMG width
- '\" height=\"',
- '', //index 15, IMG height
- '\" alt=\"',
- '', //index 17, IMG alt text
- '\"><\/div>'
- ];
- /*
- 返回一个内部函数对象,他是函数表达式执行返回的结果
- */
- return (function (url, id, width, height, top, left, altText) {
- /*
- 分配各种参数给对应的数组元素
- */
- buffAr[1] = id;
- buffAr[3] = top;
- buffAr[5] = left;
- buffAr[13] = (buffAr[7] = width);
- buffAr[15] = (buffAr[9] = height);
- buffAr[11] = url;
- buffAr[17] = altText;
- /*
- 返回连接每个元素后创建的字符串
- */
- return buffAr.join('');
- });
- })();
如果一个函数依赖另一个或几个函数,但那些其他的函数并不期望与任何其他的代码产生交互。那么这个简单的技巧(使用一个对外公开的函数来扩展那些函数)就可以被用来组织那些函数。
js闭包(三)的更多相关文章
- Js闭包常见三种用法
Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...
- 大部分人都会做错的经典JS闭包面试题
由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- js闭包(closure),个人理解
一.闭包概念理解 各种专业文献上对js"闭包"(closure)定义非常抽象,贼难看懂.我的理解是,闭包就是能够读取某函数内部变量的函数.由于在Javascript语言中只有在函数 ...
- js闭包vs Java内部类
前言: 昨天写了一个关于Java内部的博客,在内部类的最后一点中谈到了Java闭包的概念,他是这样定义闭包的:闭包是一个可调用的对象,它记录了一些信息,这些信息来自创建它的作用域.结合Java的内部类 ...
- js闭包的作用
js闭包的用途详解 js闭包可以用在许多地方.它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中.具体怎么理解呢,各位看官请仔细看好下文 我们来看 ...
- js闭包之我见
很久前的一个问题终于得以解决,内心是无比喜悦的,不多说,先上代码: function test(){ for(var i=0;i<5;i++){ window.onclick=function( ...
- js闭包引起的事件注册问题
背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <h ...
- 探讨js闭包
背景:爱就要大胆说出来,对于编程我只想说,喜欢就大胆写出来.喜欢却不行动那就意味着失败.所以,对于在研究编程的猿们,我对同伴们说,大胆的学,大胆的写.呵呵,说这些其实无非是给我自己点动力,写下去的勇气 ...
- javascript深入理解js闭包(转)
javascript深入理解js闭包 转载 2010-07-03 作者: 我要评论 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. ...
随机推荐
- java:file文件类
public class FileDemo { public static File file; public static void main(String args[]) { String s = ...
- 清北学堂(2019 5 1) part 4
今天讲数论 1.进制问题(将n转换成k进制数): 1.方法:短除法 将n/k,保存,将商当做新的n,将余数保存,直到商为0,将余数(包括0),倒序输出,即得n的k进制数 2.关于高精四则运算(我本以为 ...
- 卸载 Oracle 的 JDK
mac $ java -version java version "1.8.0_66" Java(TM) SE Runtime Environment (build 1.8.0_6 ...
- java快捷键大全
存盘 Ctrl+s(肯定知道) 注释代码 Ctrl+/ 取消注释 Ctrl+(Eclipse3已经都合并到Ctrl+/了) 代码辅助 Alt+/ 快速修复 Ctrl+1 代码格式化 Ctrl+Shif ...
- WebView的简单使用
activity_main.xml: <?xml version="1.0" encoding="utf-8"?> <LinearLayout ...
- C++中关于strtok()函数的用法
strtok: #include <string.h> char *strtok(char *str, const char *delim); char *strtok_r(char *s ...
- XE7 UTF8Encode
之前用D7写的客户端程序升级到XE7,服务端依旧用D7.使用TIdHTTP控件 Get(URL)方法,服务端(TIdHttpServer)收到的中文字符解释成乱码. 鼓捣了一会,这么搞定的: 1. 客 ...
- THUPC2018 城市地铁规划
$n$ 个点,你可以随意连成一棵树,一个点的贡献为 $F(度数) \space mod \space 59393$ ,$F$ 为给定多项式函数,不超过 $10$ 次 求这 $n$ 个点的最大贡献,和最 ...
- [独孤九剑]Oracle知识点梳理(八)常见Exception
本系列链接导航: [独孤九剑]Oracle知识点梳理(一)表空间.用户 [独孤九剑]Oracle知识点梳理(二)数据库的连接 [独孤九剑]Oracle知识点梳理(三)导入.导出 [独孤九剑]Oracl ...
- Chroma Oracle 安装宝典,吐血整理
尼玛,太坑爹!安装: 1.Chroma Application Service 2. PL SQL 安装Oracle 11g 的步骤和过程: 第一步:只能安装 Oracle 11g 64 bit 数据 ...