闭包_定时器_BOM（进阶11作业）

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

• 方法1
  让函数及时自我执行。

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

• 方法2
  函数中再创建一个匿名函数，加入参数j，每次循环时让每个j保存不同的i的值。

var fnArr = [];
for (var i = 0; i < 10; i ++) {
        fnArr[i] = (function(j){
            return function(){
            return j;
          };
        })(i);
}
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(){
     if(speed >= 10){
       speed -= 10;
     }else{
       speed = 0;
     }
   }
   function getStatus(){
     if(speed > 0){
       return "running";
     }else{
       return "stop";
     }
   }
   return {
      setSpeed: setSpeed,
      getSpeed: getSpeed,
      accelerate: accelerate,
      decelerate: decelerate,
      getStatus: getStatus
   };
})();
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);

虽然计时器设置为0秒后立即执行函数，但是计时器内的代码依然会在该环境下所有代码执行完毕后再执行。
所以依次输出1，3，2。

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

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

不输出任何结果。
虽然计时器设置为0秒后立即执行函数，但是计时器内的代码依然会在该环境下所有代码执行完毕后再执行。
故while语句判断条件flag为true，循环正常执行且用不退出。故console.log语句不会被执行到。

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

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

因为计时器内代码的滞后性，会先执行5次循环输出0，1，2，3，4
再执行计时器内代码，此时循环已经结束，i=5。再输出5次delayer: 5。
修改后代码：

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

题目6： 如何获取元素的真实宽高

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])
var style = window.getComputedStyle("元素", "伪类");
IE兼容写法

element.currentStyle ?
    element.currentStyle : window.getComputedStyle(element, null)

返回的对象中就保存有元素的真实宽高。
对象.width或对象.height即可访问到对应值。

题目7： URL 如何编码解码？为什么要编码？

JavaScript提供四个URL的编码/解码方法。

decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
区别

encodeURI方法不会对下列字符编码

ASCII字母
数字
~!@#$&*()=:/,;?+'
encodeURIComponent方法不会对下列字符编码

ASCII字母
数字
~!*()'
所以encodeURIComponent比encodeURI编码的范围更大。

编码的作用就是将服务器不能识别的字符转换为可以识别的字符，从而避免乱码跟歧义。

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

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