闭包——定时器——BOM

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

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

• 方法一：套上立即执行函数，给立即执行函数传入参数

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

• 方法二：利用var的函数作用域和立即执行函数

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

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

var Car = (function(){
   var speed = 0;
   function setSpeed(s){
       speed = s
   }
   function accelerate(){
       speed = speed + 10
   }
   function decelerate(){
       speed = speed - 10
   }
   function getSpeed(){
     return speed
   }
   function getStatus(){
     if(speed >0){
       return "running"
     }else{
       return "stop"
     }
   }
   return {
      setSpeed: setSpeed,
      getSpeed: getSpeed,
      accelerate: accelerate,
      decelerate: decelerate,
      getStatus: getStatus      
   }
})()
Car.setSpeed(30);
console.log(Car.getSpeed()); //30
Car.accelerate();
console.log(Car.getSpeed()); //40;
Car.decelerate();
Car.decelerate();
console.log(Car.getSpeed()); //20
console.log(Car.getStatus()); // 'running';
Car.decelerate(); 
Car.decelerate();
console.log(Car.getStatus());  //'stop';
//Car.speed;  //error

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

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);//2
}, 0);
var a ;
console.log(a);//1
a = 3;
console.log(a);//3

输出为132，因为虽然设置延迟0，但是必须等待本次执行代码执行完毕之后再执行

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

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

flag为true，会一直while循环，不会执行console.log

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

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

方法一

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

方法二

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

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

 var element =document.querySelector('div')
 var width = window.getComputedStyle(element).width //获取元素的宽度，第二个参数为伪类，没有则不设置
var height = window.getComputedStyle(element).height

//兼容低版本IE
function trueStyle(element,pse){
    return element.currentStyle ? element.currentStyle : window.getComputedStyle(element,pse) //条件表达式，前真后假
}
var  width = trueStyle(element,pse).width
var height = trueStyle(element,pse)

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

编码

• 可以使用encodeURI()或者encodeURIComponent()
• 可以使用 decodeURI() 或者decodeURIComponent()

为什么编码

• url的编码格式采用的是ASCII码，而中文不是ASCII的字符，如果不先编码就传输数据，那么可能会出现问题。所以通过把中文字符编码为符合ASCII标准的字符，就可以避免这个问题

题目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 /IOS/i.test(navigator.userAgent)
}