闭包、定时器

问题

一、什么是闭包? 有什么作用？

闭包
闭包就是能够读取其他函数内部变量的函数。在javascript中，只有函数内部的子函数才能读取局部变量，所以可以把闭包理解为定义在一个函数内部的函数。
下面来看一个闭包的使用的经典情形：

var count = []
for (var i = 0; i < 10; i++) {
    count[i] = function() {
        return i
    }
}
console.log(count[4]()) //10

在上面的例子中，输出的结果为10，而不是0.因为在执行console.log的时候，上面的for循环已经执行完了，i为10，所以输出的结果为10。这种情况下就需要用到闭包了。

(function() {
    var count = []
    for (var i = 0; i < 10; i++) {
        count[i] = (function(num) {
            return function() {
                return num            
            }
        })(i)
    }
    console.log(count[4]())
}())

上面的代码输出结果为4，count[i]生成了十个闭包，每个闭包一个临时变量，不会被垃圾回收机制回收。

作用
闭包有两个主要的作用：读取函数内部的变量；内存不被释放，让变量的值始终保持在内存中。

二、setTimeout 0有什么作用？

setTimeout
它用来指定某个函数或者某段代码多长时间后执行，返回一个整数，表示定时器的编号，可以用于取消这个定时器。

var timerId = setTimeout(func|code, delay)

它有两个参数，第一个参数是要推迟的函数名或者代码，第二个是要推迟的毫秒数。
需要注意的是，推迟执行的代码必须以字符串的形式。因为引擎内部使用eval函数，将字符串转为代码。如果推迟执行的是函数，则可以直接将函数名。

setTimeout 0的作用：
实现JS的异步

console.log(1)
setTimeout('console.log(2)',0)
console.log(3)

执行结果为1，3，2。所以它表示在执行完其它代码后，以延时0执行setTimeout代码块。

代码

一、下面的代码输出多少？修改代码让`fnArr[i]()`输出 i。使用两种以上的方法。

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  function(){
    return i;
    };
}
console.log( fnArr[3]() );  //

闭包方法：

赋值给立即执行函数，外部需要传递参数。

var fnArr = []
for (var i = 0; i < 10; i++) {
    fnArr[i] = (function(i) {
        return function() {
            return i
        }
    }(i)) 
}
console.log(fnArr[3]())

赋值给立即执行函数，声明一个临时变量存储i的值，外部不需要传参。

var fnArr = []
for (var i = 0; i < 10; i++) {
    fnArr[i] = (function() {
        var n = i  //这句话是写在这个立即执行函数里面的，刚开始的时候，我把它写在for语句里面，结果为9，它取到最后一个满足循环的i，i等于10的时候退出循环。
        return function() {
            return n
        }   
    }())
}
console.log(fnArr[3]())

立即执行函数中利用临时变量保存i的值。

var fnArr = []
for (var i = 0; i < 10; i++) {
    (function() {
        var n = i
        fnArr[n] = function() {
            return n
        }
    }())
}
console.log(fnArr[3]())

立即执行函数利用参数传递

var fnArr = []
for (var i = 0; i < 10; i++) {
    (function(num) {
        fnArr[i] = function() {
                return num
        }
    }(i))
}
console.log(fnArr[3]())

非闭包方法：

把它绑定在函数上，作为函数的一部分，不需要通过闭包，得到函数就能得到值。

var fnArr = []
for (var i = 0; i < 10; i++) {
    var fn = function() {
        
    }
    fn.idx = i
    fnArr[i] = fn
}
console.log(fnArr[3].idx)

二、使用闭包封装一个汽车对象，可以通过如下方式获取汽车状态。

var Car = //todo;
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate(); 
Car.decelerate();
Car.getStatus();  //'stop';
//Car.speed;  //error

临时变量存在内部，把函数暴露出来，通过外置暴露的函数去操控这些变量：

var Car = (function() {
    var speed = 0
    function accelerate() {
        speed += 10
    }
    function decelerate() {
        speed -= 10
    }
    function getSpeed() {
        console.log(speed)
        return speed
    }
    function getStatus() {
        if (speed > 0) {
            console.log('running')
        }else {
            console.log('stop')
        }  //speed > 0? 'running':'stop'
    }
    function setSpeed(i) {
        speed = i
    }
    return {
        accelerate: accelerate,  //要加逗号，一开始没加导致错误
        decelerate: decelerate,
        getSpeed: getSpeed,
        getStatus: getStatus,
        setSpeed: setSpeed 
    }
}())
Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();
Car.getSpeed(); //40;
Car.decelerate();
Car.decelerate();
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate(); 
Car.decelerate();
Car.getStatus();  //'stop';
//Car.speed;  //error

三、写一个函数使用setTimeout模拟setInterval的功能。

setInterval
setTimeout在第一部分已经介绍了，这里介绍一下setInterval。它的用法和setTimeout完全一样，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。
setTimeout模拟setInterval

var i = 0
function intv() {
    setTimeout(function() {
        console.log(i++) 
        intv()
    }, 1000)
}

其实上面实现的代码，setTimeout和setInterval也不是完全等同的。
setTimeout是先执行里面的函数，这个时间不包括在设置的时间长度内。执行完函数之后，等再过了设置的时间长度再去执行下一个。
setInterval是相对精确地在设置的时间点上去执行，函数在设置的时间段内执行，如果函数执行时间没有填满的话，就是空闲状态，到了设置的时间长度就去执行下一个。如果函数执行的时间大于设置的时间，它会放入任务序列里面，等函数执行完了立即执行。

四、写一个函数，计算setTimeout平均[备注：新加]最小时间粒度。

function getMin() {
    var i = 0
    var start = Date.now()
    var clock = setTimeout(function() {
        i++
    if(i === 1000) {
        clearTimeout(clock)
        var end = Date.now()
        console.log((end - start)/i)
    }
    clock = setTimeout(arguments.callee,0)
    },0)
}
getMin()

五、下面这段代码输出结果是? 为什么?

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0);
var a ;
console.log(a);
a = 3;
console.log(a);

运行结果分析：

var a = 1;  //声明局部变量a，并且赋值为1
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0);  //最后执行，最后输出2
var a ;  //声明变量a，此时a的值仍为1
console.log(a);  //所以首先打印出1
a = 3;  //给a重新赋值为3
console.log(a);  //第二个输出3

输出结果应该为1，3，2。
因为setTimeout 0表示在执行完其它代码后，以延时0去执行里面的代码块。所以最后输出为2。

六、下面这段代码输出结果是? 为什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);

没有输出。因为setTimeout是在执行完其他代码之后再执行，所以在执行完第一句之后，就到了下面的while循环，flag为true，为死循环，执行空语句，无输出。

七、下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）

for(var i=0;i<5;i++){
    setTimeout(function(){
         console.log('delayer:' + i );
    }, 0);
    console.log(i); 
}