美文网首页
JavaScript闭包的理解

JavaScript闭包的理解

作者: 尹萨萨 | 来源:发表于2016-09-11 21:28 被阅读0次
    • 什么是闭包? 有什么作用

    闭包是指一个函数可以调用其他函数的变量。最常见的闭包就是一个函数嵌套另一个函数;

    闭包的最大用处有两个:

    • 可以读取函数内部的变量;
    • 另一个就是让这些变量始终保持在内存中,即闭包可以使得它诞生环境一直存在;

    参考资料

    • setTimeout 0 有什么作用

      • setTimeout(function(){},ms)是延迟函数,第一个参数为所需要实现的功能函数,第二个参数为延迟的毫秒数。是指在多少毫秒之后,执行该函数;
        setTimeout (function(){},0)是指当前函数在最后立即执行
      • setInterval(function(){},ms)是间隔函数,参数设置与setTimeout一样,区别在于setTimeout只会在延迟XX毫秒后执行一次函数,而setInterval会在延迟XX毫秒后执行函数后继续在延迟XX毫秒执行函数,无限循环。

    参考资料

    • 下面的代码输出多少?修改代码让fnArri输出 i。使用两种以上的方法

    要想达到目的需要做的是创建闭包,且创建时定义域内含有闭包使用的变量,即可将变量储存下来

        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
          (function(n){
            fnArr[i] =  function(){
                return n;
                }
            }(i));
          }
        console.log( fnArr[3]() )
    
       var fnArr = [];
        for (var i = 0; i < 10; i ++) {
          (function(){
             var n=i;
            fnArr[i] =  function(){
                return n;
              }
          }());
          }
        console.log( fnArr[3]() )
    
       var fnArr = [];
        for (var i = 0; i < 10; i ++) {
            fnArr[i] =  (function(){
                var n=i;
                return function(){
                  return n;
                }}());         
          }
        console.log( fnArr[3]() )
    
    • 使用闭包封装一个汽车对象,可以通过如下方式获取汽车状态

        function testCar(){
        var speed = 0;
        function setSpeed(n){
            speed = n;
        }
        function getSpeed(){
            console.log(speed);
            return speed;
        }
        function accelerate(){
            speed += 10;
        }
        function decelerate(){
            speed -= 10;
        }
        function getStatus(){
            if(speed > 0){
                console.log("running");
            }else{
                console.log("stop");
            }
        }
        return {
            setSpeed:setSpeed,
            getSpeed:getSpeed,
            accelerate:accelerate,
            decelerate:decelerate,
            getStatus:getStatus
        }
      }
        var Car = testCar();
        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';
    
    • 写一个函数使用setTimeout模拟setInterval的功能

          var i=0;
        function setInt(){
          setTimeout(function(){  ;
        
            console.log( i++)
            setInt();
          },1000);
        }  
        setInt()
    
    • 写一个函数,计算setTimeout平均最小时间粒度

    function time(){
            var i=0;
            var bg = Date.now()
            var p = setTimeout(function(){
              i++;
              if(i===1000){
                clearTimeout(p);
                var be=Date.now();
                console.log((be-bg)/i);            
              }
              p=setTimeout(arguments.callee,0)  
          },0)}
          time()
    
    • 下面这段代码输出结果是?

        var a = 1;
        setTimeout(function(){ //最后执行
        a = 2;
        console.log(a); //2
        }, 0);
        var a ;
        console.log(a); //1
        a = 3;
        console.log(a); //3
    

    由于setTimeout让次函数最好执行,所以结果依次为,1,3,2


    • 下面这段代码输出结果是?

    var flag = true;
    setTimeout(function(){
    flag = false;
    },0)
    while(flag){}
    console.log(flag);
    
    var flag = true;  
    while(flag){}         //此处形成死循环,所以无法输出值
    console.log(flag);
    setTimeout(function(){  // 由于setTimeout(fun,0)的特性,相关函数最后执行
    flag = false;
    },0)
    
    • 下面这段代码输出?如何输出delayer: 0, delayer:1...(使用闭包来实现)

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

    相关文章

      网友评论

          本文标题:JavaScript闭包的理解

          本文链接:https://www.haomeiwen.com/subject/comyettx.html