前端开发用JS闭包解决经典Web前端面试题

js闭包在前端开发中的运用|java开发web前端语言前端开发学ios有优势
闭包是js语言学习中一个必不可少的部分,如果你熟悉Angularjs框架,那么你会发现闭包在Angularjs中经常会使用到。如果你对闭包是什么东西或者连闭包都没听过的话,建议你先阅读一下大牛的文章。http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html
文章通俗易懂,博主在初了解闭包时也是参考的该篇文章~ 废话不多说,正戏开始。 **题目:**下面一段html结构,如何实现当点li时输出该li的索引。
<ul>
<li>这是第一条alert(0);</li>
<li>这是第二条alert(1);</li>
<li>这是第三条alert(2);</li>
</ul>
误区:有的童鞋就会说,这个很好解决啊,,然后噼啪噼啪一顿敲,就成了下面这样。
<ul id=”test”>
<li>这是第一条alert(0);</li>
<li>这是第二条alert(1);</li>
<li>这是第三条alert(2);</li>
</ul>
<script type=”text/javascript”>
varelements=document.getElementById(‘test’).querySelectorAll(‘li’);
for (vari=0;i<elements.length;i++) {
elements[i].onclick=function(){
alert(i);
}
}
</script> 结果拿着上面的代码一运行,无论点哪一个都是alert出来2。这是因为在for循环是i一直在累加,最后i的值当然就是2了。为了解决这个我们只有想办法把每次的遍历li的索引给记录下来。下面就是我们闭包登场的时候了。 完整代码如下:
<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<title></title>
</head>
<body>
<ulid=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>
<script type=”text/javascript”>
varelements=document.getElementById(‘test’).querySelectorAll(‘li’);
for (vari=0;i<elements.length;i++) {
(function () { //用匿名函数构成一个闭包
varj=i;//将i的值保存到闭包的变量j中
elements[i].onclick=function(){
alert(j);
}
})();//立即调用该匿名函数
}
</script>
</body>
</html>
细心的朋友就会注意到我们原来绑定onclick事件的函数外面多了一个匿名函数,这个匿名函数就是构成一个闭包,并把j保存到该闭包的变量中。这样循环3次就会得到3个[color=DarkOrange]不同且独立[/color]的变量j,每一个变量j存在于单独的闭包中。如果你对OOP熟悉的话,这个匿名函数闭包其实就类似于一个对象,而j是这个对象的成员变量。for循环就产生了3个闭包也就是三个对象,且各个对象之间是独立存在的。
jsp基于数据库的前端开发|video弹幕前端开发|html5与前端系统开发
» 本文来自:前端开发者 » 《前端开发用JS闭包解决经典Web前端面试题》
» 本文链接地址:https://www.rokub.com/4376.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!