闭包_定时器_BOM

2017-04-06  本文已影响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)
    }
上一篇下一篇

猜你喜欢

热点阅读