JS闭包、定时器

2016-07-17 本文已影响110人 coolheadedY

什么是闭包? 有什么作用
- 闭包：函数对象可以通过作用域链相互关联，函数体内部的变量可以保存在函数的作用域内。

var scope = "global scope";
        function checkScope() {
            var scope = "local scope";
            function f() {
                return scope;
            }
            return f;
        }
        checkScope();//function f() { return scope; }
        checkScope()();//"local scope"

上述代码可以看出，闭包可以捕捉到函数的局部变量，并一直保存下来。在这种情况下，就可以在外部作用域下访问到函数内部的局部变量，就好像内部变量绑定在了定义它的外部函数上，用于在外部访问。

var inc = (function() {
            var a = 0;
            return function() {
                return a++;
            }
        })();
inc();

用闭包方法写立即执行函数，把这个函数的局部变量赋给inc变量，每次执行inc()时都可以访问到这个立即执行函数内部的局部变量
setTimeout 0 有什么作用

setTimeout(function(){}, 0)

setTimeou 0 表示以0毫秒的超时时间来调用setTimeout()，那么指定的函数不会立即执行。反而会把这个函数放到队列中，，等到前面处于等待状态的事件处理程序全部执行完成后，再立即调用这个函数。
下面的代码输出多少？修改代码让fnArr[i]() 输出 i。使用两种以上的方法

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

方法:

 console.log("方法一");
         var fnArr = [];
             for (var i = 0; i < 10; i ++) {
             fnArr[i] =  (function() {
                var n = i;
                return function() {
                    return n;
                }
             })();
         }
        console.log( fnArr[3]() );
//------------------------------
        console.log("方法一改");
         var fnArr = [];
             for (var i = 0; i < 10; i ++) {
             fnArr[i] =  (function(n) {
                return function() {
                    return n;
                }
             })(i);
         }
        console.log( fnArr[3]() );
//------------------------------
        console.log("方法一改1");
         var fnArr = [];
         function fn(n) {
            return function() {
                return n;
            }
         }
             for (var i = 0; i < 10; i ++) {
             fnArr[i] = fn(i);
        }
        console.log( fnArr[3]() ); 
//------------------------------
        console.log("方法二");
        var fnArr = [];
             for (var i = 0; i < 10; i ++) {
             (function(n) {  
                fnArr[i] = function(){
                  return n;
                }
            })(i);
        }
        console.log( fnArr[3]() );
//------------------------------
        console.log("方法二改");
        var fnArr = [];
             for (var i = 0; i < 10; i ++) {
             (function() {
                var n = i;  
                fnArr[i] = function(){
                  return n;
                }
            })();
        }
        console.log( fnArr[3]() );

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

        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 status = "";
            var speed = 0;
            return {
                setSpeed: function(num) {  speed = num; },
                getSpeed: function() { return speed; },
                accelerate: function() {  speed += 10; },
                decelerate: function() {  speed -= 10; },
                getStatus: function() {
                    if (speed > 0) {
                        status = "runing";
                    } else {
                        status = "stop";
                    }
                    return status;
                }
            }
        })();//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

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

        var a = 0;
        setTimeout(function(){
            console.log(++a);
            setTimeout(arguments.callee, 1000);
        }, 0);

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

写一个函数，计算setTimeout最小时间粒度

        (function (){
            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);
        })();//5

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

        var a = 1;
        setTimeout(function(){
            a = 2;
            console.log(a);
        }, 0);
        var a ;
        console.log(a);
        a = 3;
        console.log(a);
结果：
//1   setTmineout延迟到最后执行a第一次执行为1
//3   a被赋值为3。
//2   当之前的事件程序全部执行完成执行setTimeout()，a被赋值为2并输出。
当setTimeout(func(), delay)中的delay设置为0时函数将会在前面的事件处理程序全部执行完成后才立即执行。

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

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

这段代码将会使浏览器卡死，代码中的setTimout()延迟为0，将会放在最后执行。这时先执行while循环，变量flag为true不会改变，所以while循环会一直卡死在{}中。
下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）
for(var i=0;i<5;i++){
setTimeout(function(){
console.log('delayer:' + i );
}, 0);
console.log(i);
}

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

apply,call用法，实现bind
本博客版权归本人和饥人谷所有，转载需说明来源

JS闭包、定时器

猜你喜欢

热点阅读