闭包_定时器_BOM

题目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

题目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)
    }