js闭包相关题目

最近在看基础的js知识,用习惯了框架、类库和google的帮助,导致现在自己裸写代码的能力差到无法直视。。。于是决定看是回顾基础知识,并定期更新一些读书笔记,作为自己监督。

在图灵社区看到民工精髓出的面试题,虽然比较久了,但做起来发现还是容易错的,特别是自己手写代码时,基本能力降为0.黏贴上地址,和这边文章要讲的主要内容有关。

http://www.ituring.com.cn/article/39906

3.3. 写一段JavaScript代码,循环生成10个按钮,每个按钮上面分别显示数字0-9,每个按钮点击之后分别显示自身序号。

题目初看非常简单,第一想法就写出来这样的代码:
	window.οnlοad=fn;
	function fn(){
		var $div = document.getElementById('div');
		for(var i=0;i<10;i++){
			var e = document.createElement("input");
			e.type = "button";
            		e.value = i;
           		e.onclick = function(){alert(i);}
			$div.appendChild(e)
		}
	}
经常和事件处理函数打交道的就知道,这里肯定写错了。因为在点击事件触发的时候,所有的i 都已经为10了,所以所有的按钮出的结果都是10.

那修改方法第一种,就是能得4分的那种方法吧?将上面代码中的onclick事件函数改为如下:
	e.onclick = function(){alert(this.value)}
这样结果就是正确的了,调用函数中的this指向调用对象(这句话描述可能有问题),所以每个按钮的点击事件函数中的this都是指向自己的,所以出的结果就是自己的value。
那怎么得到5分呢?? 题目下面的解析说要用到闭包函数就可以5分,于是我有试了试。代码中onclick事件函数改为如下:
            e.onclick = function(){
            	var n=i;
            	return function(){
           	    alert(n);
            	};
            }();//直接执行,将返回值赋给onclick事件函数
解释一下,外面的函数直接执行将返回值赋给onclick函数,所以每次再绑定的时候外面的函数都执行了一次,所以每个函数的n 是根据 i 一直在变的,然后返回的函数作为点击事件处理函数时,他的n是绑定的时候就已经赋予了,为正确的结果。n 就像是外层函数的私有变量,可以被嵌套函数访问到,当外层函数每执行一次他的n就随着i加一,所以每个嵌套函数(就是返回的事件处理)访问的n也是和外层函数执行时一样的。
(ps 不知这样解法是否能得5分)

待续。。。(ps,本来想写闭包是什么怎么回事的,结果语塞了!)




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值