美文网首页
闭包_定时器

闭包_定时器

作者: YQY_苑 | 来源:发表于2017-11-10 14:11 被阅读0次

    闭包的作用是:暴露局部函数
    立即执行函数 ==> 闭包

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

    var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //      输出10
    
    //方法一:立即执行函数&闭包
    var fnArr = [];
    for ( var i = 0; i < 10; i ++) {
        fnArr[i] =  (function(){
            return i;
        })(i)
    }
    console.log( fnArr[3] );  //    输出3
    
    
    //方法二:立即执行函数&闭包
    var fnArr = [];
    for ( var i = 0; i < 10; i ++) {
        (function(){
            fnArr[i] = i
        })(i)
    }
    console.log( fnArr[3]);   //    输出3
    
    
    //方法三:立即执行函数&闭包
    var fnArr = [];
    for ( var i = 0; i < 10; i ++) {
        (function(i){
            fnArr[i] = function(){
                return i
            }
        })(i)
    }
    console.log( fnArr[3]());    //    输出3
    
    //用let定义i,创造新作用域
    var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //  
    

    封装一个汽车对象,可以通过如下方式获取汽车状态

    var Car = (function(){
    
        var speed = 0;
    
        function setSpeedM(s){
            speed = s
        }
    
        function getSpeedM(){
            console.log(speed)
        }
    
        function accelerateM(){
            speed += 10 
        }
    
        function decelerateM(){
            if(speed>=10){
                speed -= 10  
            }  
        }
    
        function getStatusM(){
            if(speed > 0){
                    console.log ("running")
            }else{
                console.log("stop")
            }
        }
    
        return {
            setSpeed:   setSpeedM,
            getSpeed:   getSpeedM,
            decelerate: decelerateM,
            accelerate: accelerateM,
            getStatus:  getStatusM,
        }
    })()
    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 a = 1;
    setTimeout(function(){
        a = 2;
        console.log(a);   //  2
    }, 0);
    var a ;
    console.log(a);    //  1
    a = 3;
    console.log(a);    //  3
    

    执行步骤:

    1. 先变提升:var a;var function;
    2. 执行赋值及运算;
      2.1.赋值a=1
      2.2.设定setTimeout(但是不运行)
      2.3.console.log(a); // 打印出1;
      2.4 赋值a=2
      2.5.console.log(a); // 打印出3;
    3. 运行setTimeout
    4. 赋值a=2
    5. console.log(a) //打印出2;

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

    var flag = true;
    setTimeout(function(){
        flag = false;
    },0)
    while(flag){}
    console.log(flag);
    
    //无限循环
    因为定义了 flag 为 true
    用while循环,当括号内为true时。会一直循环,直至条件为false
    此例中flag一直为true,故无限循环;
    setTimeout需要等全局代码运行完毕才会运行,而由于全局一直为无限循环,故无法setTimeout运行。
    

    下面这段代码输出?如何输出delayer: 0, delayer:1...(使用闭包来实现)

    for(var i=0;i<5;i++){
        setTimeout(function(){
             console.log('delayer:' + i );    // 5个5
        }, 0);
        console.log(i);    // 0,1,2,3,4
    }
    
    //方法一:立即执行函数&闭包(分隔输出)
        for(var i=0;i<5;i++){
            setTimeout((function(i){
                 console.log('delayer:' + i );
            })(i), 0);
            console.log(i);
        }
    //方法二:立即执行函数&闭包
    for(var i=0;i<5;i++){
        (function(t){
            return setTimeout(function(){
                        console.log('delayer:' + t );
                    }, 0);
        })(i);
        console.log(i);
    }
    

    如何获取元素的真实宽高

    var div = document.getElementById('test');
    console.log(getComputedStyle(div).width);
    console.log(getComputedStyle(div).height);
    //IE8以下不支持
    

    URL 如何编码解码?为什么要编码?

    • decodeURI() :
    • decodeURIComponent()
    • encodeURI()
    • encodeURIComponent()

    encodeURIdecodeURI 函数操作的是完整的 URI;这俩函数假定 URI 中的任何保留字符都有特殊意义,所有不会编码它们。

    encodeURIComponentdecodeURIComponent 函数操作的是组成 URI 的个别组件;这俩函数假定任何保留字符都代表普通文本,所以必须编码它们,所以它们(保留字符)出现在一个完整 URI 的组件里面时不会被解释成保留字符了。

    image.png

    编码的原因,是因为有些字符会引起歧义,就会造成URL服务器的解析错误,所以必须将引起歧义的字符进行编码。

    补全如下函数,判断用户的浏览器类型

    function isAndroid(){
        return /android/i.test(navgator.userAgent);
    }
    function isIphone(){
        return /iphone/i.test(navgator.userAgent);
    }
    function isIpad(){
        return /ipad/i.test(navgator.userAgent);
    }
    function isIOS(){
        return /(iphone|ipad)/i.test(navgator.userAgent);
    }
    
    

    相关文章

      网友评论

          本文标题:闭包_定时器

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