闭包的一道简单类型面试题

• 首先给出这样一个结构,问怎样使用闭包形式给每个 li 标签添加点击事件使页面该变颜色

1
2
3
4
5

<ul>
    <li id="btn1">第一个li标签</li>
    <li id="btn2">第二个li标签</li>
    <li id="btn3">第三个li标签</li>
</ul>

1. 思路进行一步一步分析

• 首先你得明白什么是闭包 ! 那什么是闭包呢?

  • 1 2	官方解释 : 所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。 相信很少有人能直接看懂这句话，因为他描述的太学术。我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。

• 那么先用最简单而又最繁琐的方法来实现 , 看下面的代码

  1 2 3 4 5 6 7

  var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var btn3 = document.getElementById('btn3'); btn1.onclick = function() { document.body.style.backgroundColor = 'blue'; } .....

  这样看来,是不是出现了大量重复的代码.下面进行优化,进而实现闭包

• 第二步

  1 2 3 4 5 6

  function changeColor(color) { return function() { document.body.style.background = color } } btn1.onclick = changeColor("blue")

  这样一来,将函数作为返回值,就可以实现闭包.也进行了改良,也缩小了代码量,封装函数的最大优点就是可以复用!

执行队列与执行栈

• 这也是一道面试题 考点执行栈与执行队列 问: 下面的代码执行结果是什么?

  1 2 3 4 5 6 7 8 9

  console.log('开始'); for (var i = 0; i < 3; i++) { (function(index) { setTimeout(function() { console.log(index) }, 0); })(i) } console.log('结束');

  打印结果为 开始 结束 1 2 3

  这里就设计到了执行栈与执行队列问题了,那么什么是执行队列呢?执行队列就是一些鼠标,键盘事件,还有计时器的事件,带码的执行顺序是从上往下执行的,但是当所有的都执行完毕之后,才会执行 setTimeout 函数,console.log(),是执行栈里面的执行的,会优先被执行,而setTimeout是执行队列里面的,会在最后执行.