闭包-定时器-BOM

闭包是面试最常问的知识点，可以结合前面讲过的画作用域链的伪代码图的方式来理解

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

    var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //

方法一：

var fnArr = [];
    for (var i = 0; i < 10; i ++) {
      (function (){
        var n = i;
        fnArr[n] =  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]() );  

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

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

输出： 1 3 2
因为setTimeout的时间参数为0，被放入队列最后执行。

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

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);

无输出
因为setTimeout中的函数会被放到队列最后执行，flag=true，while循环一直执行，console.log(flag)不会执行。

题目5： 下面这段代码输出？如何输出delayer: 0, delayer:1...（使用闭包来实现）

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

题目6： 如何获取元素的真实宽高 *
主流浏览器：

window.getComputedStyle(element)['width']
window.getComputedStyle(element)['height']

低版本IE浏览器通过element.currentStyle获取宽高

题目7：* URL 如何编码解码？为什么要编码？ *
编码方法：
encodeURI()
encodeURIComponent()

encodeURIComponent比encodeURI编码的范围更大。
如果你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。

解码方法：
decodeURI()
decodeURIComponent()

要进行编码，是因为URL中有些字符会引起歧义。
例如，Url参数字符串中使用key=value键值对这样的形式来传参，键值对之间以&符号分隔，如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&，那么势必会造成接收Url的服务器解析错误，因此必须将引起歧义的&和=符号进行转义，也就是对其进行编码。
又如，URL的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，例如中文。否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下，中文可能会造成问题。
URL编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符。

题目8：* 补全如下函数，判断用户的浏览器类型

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