進階11 閉包、定時器、BOM

1.下面的程式碼輸出多少？修改程式碼讓fnArr[i]()輸出 i。使用 兩種以上的方法

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

輸出結果為 10，fnArr[i]()輸出均為10
修改程式碼：

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

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

2.封裝一個汽車物件，可以通過如下方式獲取汽車狀態

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

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
分析：

var a = 1;
setTimeout(function(){
    a = 2;
    console.log('第1個a:'+a);
}, 0);
var a ;
console.log('第2個a:'+a);
a = 3;
console.log('第3個a:'+a);

變數提升：
var a ;
var a ;
a = 1;
console.log('第2個a:'+a);
a = 3;
console.log('第3個a:'+a);
//瀏覽器在執行程式碼時看到定時器setTimeout()會先放在一邊不處理，
//繼續執行後邊的程式碼，完成後再執行setTimeout()
setTimeout(function(){
    a = 2;
    console.log('第1個a:'+a);
}, 0);

4.下面這段程式碼輸出結果是? 為什麼?

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

沒有輸出結果

分析：
     var flag;
     flag = true;
     while(flag){} //while(1){}會無限迴圈{}

5.下面這段程式碼輸出？如何輸出delayer: 0, delayer:1...（使用閉包來實現）

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

輸出結果是：0 1 2 3 4 delay:5 delay:5 delay:5 delay:5 delay:5

修改程式碼：
for(var i=0;i<5;i++){
  !function(i){
    setTimeout(function(){
         console.log('delayer:' + i );
    }, 0);
  }(i)
  console.log(i);
}

6. 如何獲取元素的真實寬高

getComputedStyle是一個可以獲取當前元素所有最終使用的CSS屬性值。

var style = window.getComputedStyle("元素", "偽類");
// 第一個引數為元素名，第二個為偽類，可選

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()	不會對下列字元編碼：ASCII字母、數字、~!@#$&* ()=:/,;?+'	decodeURI()
encodeURIComponent()	不會對下列字元編碼：ASCII字母、數字、~!*()'	decodeURIComponent()

原因：url的編碼格式採用的是ASCII碼，而中文不是ASCII的字元，如果不先編碼就傳輸資料，那麼可能會出現問題。所以通過把中文字元編碼為符合ASCII標準的字元，就可以避免這個問題

8.補全如下函式，判斷使用者的瀏覽器型別

function isAndroid(){
}
function isIphone(){
}
function isIpad(){
}
function isIOS(){
}

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 /iphone|ipad|iPod/i.test(navigator.userAgent); 
}