javascript 避免闭包引发的问题

<div id="test">
<div>第一个</div>
<div>第二个</div>
<div>第三个</div>
<div>第四个</div>
</div>
<script>
function test()
{
var els = document.getElementById("test").getElementsByTagName("div");
for (var i = 0; i < els.length; i++)
{
var div = els[i];
div.onclick = function()
{
alert(div.innerHTML);
return false;
}
}
}
test();
</script>
无论我们点击哪个div，反馈的都是第4个div的内容。究其原因，在于每个div的点击事件都与test方法形成了闭包，且每个div的点击事件都共享同一个闭包作用域链。当事件被触发时，变量i所代表的下标已经指向第4个div。可以采用以下几种方式避免由于闭包引起的问题。
（1）使用this转换闭包的作用域链上下文，上例的闭包可以改写为：
for (var i = 0; i < els.length; i++)
{
var div = els[i];
div.onclick = function()
{
alert(this.innerHTML);
return false;
}
}
当点击div的事件被触发时，查找的作用域已经是“this”所指定的上下文。尽管该事件仍然处于“test”闭包内，但由于不访问或不使用闭包的上下文环境，也就不存在由于闭包作用域内变量被引用所引发的问题。
（2）使点击div的事件与for循环形成闭包，而使得for循环内的变量div不被回收。如：
//for循环内定义闭包方法
for (var i = 0; i < els.length; i++)
{
var div = els[i];
a(div);
function a(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
}
}
//for循环外定义闭包方法
for (var i = 0; i < els.length; i++)
{
var div = els[i];
a(div);
}
function a(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
}
//使用匿名方法，其原理与for循环内定义类似
for (var i = 0; i < els.length; i++)
{
var div = els[i];
(function(o)
{
o.onclick = function()
{
alert(o.innerHTML);
}
})(div);
}
通过中间方法a或者匿名方法，使for循环体与onclick事情产生闭包。
（3）控制变量的作用域，使点击div的事件所需变量与外层作用域无关。如：
for (var i = 0; i < els.length; i++)
{
(function()
{
var div = els[i];
div.onclick = function()
{
alert(div.innerHTML);
}
})();
}
内部函数自身也可能有内部函数。每次作用域链嵌套，都会增加由创建内部函数对象的执行环境所引发的新活动对象。ECMA262规范要求作用域链是临时性的，但对作用域链的长度却没有加以限制。闭包的潜规则即Function与内部定义的Function之间的相互作用域链上下文环境的关系。如果运用得当，嵌套的内部函数所拥有的潜能将超出了我们的想象力。

赞 (0)

相关推荐

  • 一道JS前端闭包面试题解析

    问题 代码A function fun(n,o){ console.log(o); return { fun:function(m){//[2] return fun(m,n);//[1] } } } var a=fun(0); a.fun(1); a.fun(2); a.fun(3); var b=fun(0).fun(1).fun(2).fun(3); var c=fun(0).fun(1); c.fun(2); c.fun(3); 求出程序输出 这是一个闭包测试题 转换为等价代码 retu

  • JavaScript闭包 懂不懂由你反正我是懂了

    越来越觉得国内没有教书育人的氛围,为了弄懂JS的闭包,我使出了我英语四级吃奶的劲去google上搜寻着有关闭包的解释,当我看到stackoverflow上这一篇解答,我脑中就出现了一句话:就是这货没跑了! 不才译文见下,见笑了. Peter Mortensen问: 就像老Albert所说的,"如果你不能向一个六岁的孩子解释清楚,那么其实你自己根本就没弄懂."好吧,我试着向一个27岁的朋友就是JS闭包(JavaScript closure)却彻底失败了. 你们会怎么把它解释给一个充满好奇

  • js的闭包的一个示例说明

    复制代码 代码如下: function outside() { var myVar = 1; return function (){ alert(myVar); } } var t = outside(); t(); js中 某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量,这称为闭包(Closure) 下面例子是给三个锚anchor1,anchor2,anchor3添加onclick事件,可以预期的效果是点击锚点显示相应的锚点ID,实际上却都是显示"My id is anc

  • javascript深入理解js闭包

    javascript深入理解js闭包

    一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function f1(){ var n=999; } alert(n); // error 这里有一个地方需要注意,函数

  • javascript中巧用“闭包”实现程序的暂停执行功能

    Author:月影  Form:http://bbs.51js.com/thread-66361-1-1.html <input type="button" value="继续" onclick='st();'/> <script> /*基本原理*/ var st = (function(){   alert(1);   alert(2); return function()   {     alert(3);     alert(4);  

  • js bind 函数 使用闭包保存执行上下文

    复制代码 代码如下: window.name = "the window object" function scopeTest() { return this.name; } // calling the function in global scope: scopeTest() // -> "the window object" var foo = { name: "the foo object!", otherScopeTest: fu

  • 前端开发必须知道的JS之闭包及应用

    在前端开发必须知道的JS之原型和继承一文中说过下面写篇闭包,加之最近越来越发现需要加强我的闭包应用能力,所以此文不能再拖了.本文讲的是函数闭包,不涉及对象闭包(如用with实现).如果你觉得我说的有偏差,欢迎拍砖,欢迎指教.一. 闭包的理论 首先必须了解以下几个概念: 执行环境 每调用一个函数时(执行函数时),系统会为该函数创建一个封闭的局部的运行环境,即该函数的执行环境.函数总是在自己的执行环境中执行,如读写局部变量.函数参数.运行内部逻辑.创建执行环境的过程包含了创建函数的作用域,函数也是在

  • JavaScript 匿名函数（anonymous function）与闭包（closure）

    引入 匿名函数 闭包 变量作用域 函数外部访问函数内部的局部变量 用闭包实现私有成员 引入 闭包是用匿名函数来实现.闭包就是一个受到保护的变量空间,由内嵌函数生成."保护变量"的思想在几乎所有的编程语言中都能看到. 先看下 JavaScript 作用域: JavaScript 具有函数级的作用域.这意味着,不能在函数外部访问定义在函数内部的变量. JavaScript 的作用域又是词法性质的(lexically scoped).这意味着,函数运行在定义它的作用域中,而不是在调用它的作用

  • (转载)JavaScript中匿名函数，函数直接量和闭包

    原文出处: http://www.dnew.cn/post/196.htm 先看下下面几种写法 1.function f(x){return x*x;};f(x); 2.(function(x){return x*x;})(x); 3.(function(x){return x*x;}(x)); 第一种我们应该都很熟悉了,这是我们经常使用的写法.第二第三种都是匿名函数的写法. ------------------------------------------------------------

  • javascript 避免闭包引发的问题

    <div id="test"> <div>第一个</div> <div>第二个</div> <div>第三个</div> <div>第四个</div> </div> <script> function test() { var els = document.getElementById("test").getElementsByTagN

  • javascript中闭包概念与用法深入理解

    本文实例分析了javascript中闭包概念与用法.分享给大家供大家参考,具体如下: 1.问题的引出,什么时候会遇到闭包? 首先因为JS是没有块状作用域的,但是有函数作用域即函数作为了局部变量之间的界限,不同函数内的局部变量具有独立性, 因为JS没有块状作用域,笔者初学JS时,在事件的监听时,因为不理解JS中局部变量的作用域,犯过不少错误! (1)JS中的变量作用域 for(var i=0;i<9;i++) { } alert(i) //输出9 我们发现,虽然变量i是块状区域for()内的一个局

  • JavaScript中闭包之浅析解读(必看篇)

    JavaScript中的闭包真心是一个老生常谈的问题了,最近面试也是一直问到,我自己的表述能力又不能完全支撑起来,真是抓狂.在回来的路上,我突然想到了一个很简单的事情,其实我们在做项目时候,其实就经常用到闭包的,可是面试问的时候,回答又往往是我们经常搜到的答案,唉 不管是应付面试 还是真的想学点东西 ,我也用自己的理解跟大家分享一下,书面化就避免不了了的. 1.闭包是什么? 红宝书中曰:"是指有权访问另外一个函数作用域中的变量的函数." 简单的说,JavaScript允许使用内部函数-

  • JavaScript中闭包的写法和作用详解

    1.什么是闭包 闭包是有权访问另一个函数作用域的变量的函数. 简单的说,Javascript允许使用内部函数---即函数定义和函数表达式位于另一个函数的函数体内.而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量.参数和声明的其他内部函数.当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包. 2.变量的作用域 要理解闭包,首先要理解变量的作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变

  • 5个可以帮你理解JavaScript核心闭包和作用域的小例子

    这里有5个小脚本,有助于你真正理解JavaScript核心–闭包和作用域.没有在控制台运行之前,尝试回答每个案例中会弹出什么内容,然后你可以创建一个测试文件去核对你的答案.你准备好了吗? 1. 复制代码 代码如下: if (!("a" in window)) {      var a = 1;  }  alert(a); 2. 复制代码 代码如下: var a = 1,      b = function a(x) {          x && a(--x);    

  • javascript,jquery闭包概念分析

    但javascript我是经常要用,所以是要懂这里面的概念. 其实javascript里的闭包概念很简单,就是函数用到外部变量,不需要传参就可以获取. 举个例子: 复制代码 代码如下: <script> var sMessage = "Hello world"; function sayHello(){ alert(sMessage); } sayHello(); addNumber(1,2); var iBaseNum = 10; function addNumber(i

  • 跟我学习javascript的闭包

    跟我学习javascript的闭包

    JavaScript 闭包究竟是什么? 用JavaScript一年多了,闭包总是让人二丈和尚摸不着头脑.陆陆续续接触了一些闭包的知识,也犯过几次因为不理解闭包导致的错误,一年多了资料也看了一些,但还是不是非常明白,最近偶然看了一下 jQuery基础教程 的附录,发现附录A对JavaScript的闭包的介绍简单易懂,于是借花献佛总结一下. 1.定义 闭包:是指有权访问另外一个函数作用域中的变量的函数.创建闭包的常见方式就是在一个函数内部创建另外一个函数. 直接上例子 function a(){ v

  • 学习javascript的闭包,原型,和匿名函数之旅

    本文通过示例给大家介绍javascript的闭包,原型,和匿名函数,具体详情请看下文. 一 .>关于闭包 理解闭包 需要的知识 1.变量的作用域 例1: var n =99; //建立函数外的全局变量 function readA(){ alert(n); //读取全局变量 } readA(); //执行此函数 例2: function readB(){ var c = 9; function readC(){ console.log(c); //ok c可见 } return readC; }

  • JavaScript创建闭包的两种方式的优劣与区别分析

    通常JavaScript创建闭包比较常用的有两种方式. 构造函数方式: new function() { var 变量... } 内联执行方式: (function() { var 变量... })(); 在JavaScript内部运行机制下他们有什么区别?用哪种方式创建比较好?它与其它方式创建的闭包相比有什么优势? 我是这样理解的: 区别: 第一个:子方法可以共享变量 第二个:内部子方法共享变量 比较: 我认为内联的比较好: 优势: 一般内联的创建是按需索要内存,因为只是局部执行的变量在内存里

  • javascript的闭包介绍(司徒正美)

    闭包的定义非常晦涩--闭包,是指语法域位于某个特定的区域,具有持续参照(读写)位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落.这些外部执行域的非持久型变量神奇地保留它们在闭包最初定义(或创建)时的值(深连结).简单来说,闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量(键值对),而这些键值对是不会随上一级函数的执行完成而销毁.周爱民说得更清楚,闭包就是"属性表",闭包就是一个数据块,闭包就是一个存放着"Name=Value"的对照表.

随机推荐