美文网首页
闭包_定时器_BOM

闭包_定时器_BOM

作者: 不是我的简书 | 来源:发表于2017-04-06 17:53 被阅读15次

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

        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
            fnArr[i] =  function(){
                return i;
            };
        }
        console.log( fnArr[3]() );    //输出10
    
    //方法1
        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
            (function(){
                var n = i
                fnArr[n] =  function(){
                return n;        
                }
            })()
        }
        console.log( fnArr[3]() );    //3
    //方法2
        var fnArr = [];
        for (var i = 0; i < 10; i ++) {
            fnArr[i] =  (function(){
                var n = i
                return function(){
                    return n
                }
            })()
        }
        console.log( fnArr[3]() );    //3
    

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

    /* var Car = (function(){
       var speed = 0;
       function setSpeed(s){
           speed = s
       }
       ...
       return {
          setSpeed: setSpeed,
          ...
       }
    })()*/
        var Car = (function(){
            var speed = 0; 
            function setSpeed(s){
                speed = s
            }
            function getSpeed(){
                console.log(speed)
            }
            function accelerate(){
                speed += 10
            }
            function decelerate(){
                speed -= 10
            }
            function getStatus(){    //console.log(speed > 0 ? 'running' : 'stop');
                if (speed>0){
                    console.log('running')
                }else{
                    console.log('stop')
                }
            }
            return {
                setSpeed: setSpeed,
                getSpeed : getSpeed,
                accelerate : accelerate,
                decelerate : decelerate,
                getStatus : getStatus,
                speed: 'error'           
            }
        })()
    
        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
    

    题目3:下面这段代码输出结果是? 为什么?

    var a = 1;
    setTimeout(function(){
        a = 2;
        console.log(a);    //最后输出2,因为setTimeout会等其他代码执行完后再执行
    }, 0);
    var a ;
    console.log(a);    //先1
    a = 3;
    console.log(a);    //再3
    

    题目4: 下面这段代码输出结果是? 为什么?

    var flag = true;
    setTimeout(function(){     //setTimeout会等其他代码执行完,而while是一个死循环,在没有设置终止条件的时候会一直执行,永远轮不到它执行
        flag = false;
    },0)
    while(flag){}    //一直循环导致浏览器卡死
    console.log(flag);    //不会输出任何内容
    

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

    for(var i=0;i<5;i++){
        setTimeout(function(){
             console.log('delayer:' + i );
        }, 0);
        console.log(i);    //输出01234,然后输出5个delayer:5
    }
    
    Paste_Image.png
    for(var i=0;i<5;i++){
            (function(){
                     var n = i
                    setTimeout(function(){
                         console.log('delayer:' + n );
                }, 0);
            })()
            console.log(i); 
    }
    
    Paste_Image.png

    题目6: 如何获取元素的真实宽高?window对象

    主流浏览器通过window.getComputedStyle来获取真实style,低版本IE通过element.currentStyle来获取真实style

       <style>
         .box{
             border: 3px solid red;
             height: 300px;
             width: 500px;
             background: pink;
         }
       </style>
        
       <div class="box"></div>
    
       <script>
            var box = document.querySelector('.box')    //获取元素节点
    
            //获取元素的真实style函数写法
            function trueStyle(element,pseudoElt){
                return element.currentStyle ? element.currentStyle : window.getComputedStyle(element,pseudoElt);
            }
            var tureWidth = trueStyle(box).width;
            var trueHeight = trueStyle(box).height;
      
            //获取单个元素写法
            var tureWidth2 = window.getComputedStyle(box)['width']    //写法1
            //获取元素的真实背景色
            var tureBackground= window.getComputedStyle(box).background     //写法2
    
        </script>
    

    题目7: URL 如何编码解码?为什么要编码?

    因为url中有些字符会引起歧义,比如两个URL拼接的情况等,所以要进行编码。

    编码

    encodeURI('')
    encodeURIComponent('')        //encodeURIComponent 比 encodeURI 编码的范围更大
    

    解码

    decodeURI('')
    decodeURIComponent('')
    
    编码与解码

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

        function isAndroid(){
            return /Android/i.test(navigator.userAgent)
        }
        funcnction isIphone(){
            return /iPhone/i.test(navigator.userAgent)
        }
        function isIpad(){
            return /iPad/i.test(navigator.userAgent)
        }
        function isIOS(){
            return /(iPad)|(iPhone)/i.test(navigator.userAgent)
        }
    

    相关文章

      网友评论

          本文标题:闭包_定时器_BOM

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