js的闭包的一个示例说明

代码如下:

function outside()
{
var myVar = 1;
return function (){
alert(myVar);
}
}
var t = outside();
t();

js中 某个函数的内部函数在该函数执行结束后仍然可以访问这个函数中定义的变量，这称为闭包(Closure)
下面例子是给三个锚anchor1,anchor2,anchor3添加onclick事件，可以预期的效果是点击锚点显示相应的锚点ID，实际上却都是显示"My id is anchor4", 这个就是闭包作用引起的逻辑上的bug，添加事件的函数执行完后i的值为4,


代码如下:

ADS.addEvent(window, 'load', function(W3CEvent) {m
for (var i=1 ; i<=3 ; i++ ) {

var anchor = document.getElementById('anchor' + i);

ADS.addEvent(anchor,'click',function() {
alert('My id is anchor' + i);
});
}
});

赞 (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)却彻底失败了. 你们会怎么把它解释给一个充满好奇

  • 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);  

  • javascript 避免闭包引发的问题

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

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

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

  • (转载)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 匿名函数（anonymous function）与闭包（closure）

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

  • 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 这里有一个地方需要注意,函数

  • 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的闭包的一个示例说明

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

  • JS实现闭包中的沙箱模式示例

    本文实例讲述了JS实现闭包中的沙箱模式.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script> //闭包实现模块化:沙箱模式 -->设

  • JS中闭包的经典用法小结(2则示例)

    本文实例总结了JS中闭包的经典用法.分享给大家供大家参考,具体如下: 闭包这个东西,网上有很多介绍资料.个人看了很多,还是一知半解.这里不做理论介绍,直接给出2个例子. 代码1:记录函数被调用的次数 function a() { var i = 0; function b() { return ++i; } return b; } var c = a(); c();//1 c();//2 这种方式类似C语言中的private static变量,能够保持局部变量的内存不释放. 代码2:正确给DOM

  • 利用js的闭包原理做对象封装及调用方法

    创建一个js文件,名为testClosure.js: (function () { function a() { alert('i am a'); } outFunc = function () { a(); } })(); 这里不论写多少个function,a b c d ...外面都调用不到,包括这里面var定义的变量也都调用不到,那么你在里面尽情的写,就不用担心这些函数名变量名跟外界冲突: 只需要暴露一个outFunc这个函数供外界调用.这个函数呢没有用var定义,就变成一个全局变量,外界

  • JS作用域闭包、预解释和this关键字综合实例解析

    本文实例分析了JS作用域闭包.预解释和this关键字.分享给大家供大家参考,具体如下: var number = 2; var obj = {number : 5, fn1 : ( function() { this.number *= 2; number=number*2; var number=3; return function() { this.number *= 2; number*=3; alert(number); } } )() }; var fn1 = obj.fn1; ale

  • 解决js函数闭包内存泄露问题的办法

    本文通过举例,由浅入深的讲解了解决js函数闭包内存泄露问题的办法,分享给大家供大家参考,具体内容如下 原始代码: function Cars(){ this.name = "Benz"; this.color = ["white","black"]; } Cars.prototype.sayColor = function(){ var outer = this; return function(){ return outer.color };

  • JS鼠标滚动分页效果示例

    JS鼠标滚动分页效果示例

    首先先看问题: 在开发的时候,看到这种现象 就会思考:为什么左边的数据出来比右边的慢呢?因为这里没有进行分页,左边的数据多,所以查询相对较慢. 解决办法就是进行分页,但是在项目中用到的插件,不能控制样式,改变分页的宽度,样式就会乱掉.最简单的办法就是不分页(^_^) 但是既然是自己份内的事,为啥不做好呢?那就写分页呗,滚动分页! 问了其他同事,其他同事也...你去百度去.... 是啊,网上一大堆 ,但都是乱七八糟的,也没有效果图...坑 经过一番思考,和百度 思路来了: 需要了解三个dom元素,

  • JS 实现获取打开一个界面中输入的值

    需求在一个界面中打开另一个界面,通过JS获取在另一个界面中用户输入的值.示例:Index.html 复制代码 代码如下: <html> <head> <meta http-equiv="content-type" content="text/html; charset=gbk"> <title>主页</title> <script type="text/javascript">

  • 原生js封装运动框架的示例讲解

    昨天我们说了一下原生JS中常用的兼容性写法,今天我们来说一下运动框架. 正常情况下我们要写一个运动的效果会用到tween.js这么一个插件,这个东西不是一般人写出来的,因为里面涉及的运动效果都是经过一堆数学的函数运算出来的,我们平常人是写不出来的,所有我们就自己封装一个运动框架,有什么问题改起来也方便,下面我们就开始封装. 首先,我们先写一个div,设置一些简单的样式,我们就拿这个div举例子 如下代码: #div{ width: 100px; height: 100px; background

  • 使用D3.js创建物流地图的示例代码

    使用D3.js创建物流地图的示例代码

    本文介绍了使用D3.js创建物流地图的示例代码,分享给大家,具体如下: 示例图 制作思路 需要绘制一张中国地图,做为背景. 需要主要城市的经纬坐标,以绘制路张起点和终点. 接收到物流单的城市,绘制一个闪烁的标记. 已经有过物流单的目标城市,不再绘制路线. 每次新产生一笔物流单,都有一个标记沿路线移向目标的动画效果. 绘制结束后的数据,需要清理掉,以减少对浏览器的资源占用. 开始撸码 1.创建网页模板 加载D3JS,为了方便调试,直接下载d3.js文件在本地,实际使用的时候,可以换成加载路径.注意

随机推荐