进阶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

//方法一
var fnArr = [];
for (var i = 0; i < 10; i ++) {
    (function(i){
        fnArr[i] = function(){
            return i;
        }
    })(i);
}
console.log( fnArr[3]() );  //3
//方法二
var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  (function(i){ //IIFE & 闭包
        return function(){
            return i;
        }
    })(i);
}
console.log( fnArr[3]() );  //3
//方法三 ES6
var fnArr = [];
for (let i = 0; i < 10; i ++) { //使用ES6： let
    fnArr[i] =  function(){
        return 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 === 0) {
      return;
    }
    speed -= 10;
   }
   function getStatus() {
    if (speed === 0) {
      return 'stop';
    } else {
      return 'running';
    }
   }
   return {
      setSpeed: setSpeed,
      getSpeed: getSpeed,
      accelerate: accelerate,
      decelerate: decelerate,
      getStatus: getStatus
   }
})()
console.log(Car.setSpeed(30));
console.log(Car.getSpeed()); //30
console.log(Car.accelerate());
console.log(Car.getSpeed()); //40;
console.log(Car.decelerate());
console.log(Car.decelerate());
console.log(Car.getSpeed()); //20
console.log(Car.getStatus()); // 'running';
console.log(Car.decelerate()); 
console.log(Car.decelerate());
console.log(Car.getStatus());  //'stop';
console.log(Car.speed);  //error

var Car = (function(){
   var speed = 0;
   function setSpeed(s){
       speed = s
   }
   ...
   return {
      setSpeed: setSpeed,
      ...
   }
})()
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

var Car = (function () {
    let speed = 0;
    function setSpeed(s){
        return speed = s;
    }
    function getSpeed(){
        return speed;
    }
    function accelerate(){
        return speed+=10;
    }
    function decelerate(){ //速度不能为负数
        return speed>0?speed-=10:speed;
    }
    function getStatus(){
        return speed>0?'running':'stop';
    }
    return {
        "setSpeed"   : setSpeed,
        "getSpeed"   : getSpeed,
        "accelerate" : accelerate,
        "decelerate" : decelerate,
        "getStatus"  : getStatus
    }
})();

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

var a = 1;
setTimeout(function(){
    a = 2;   //a重新赋值为2
    console.log(a); // 输出2
}, 0);
 /* 设置了定时器，函数的执行从执行队列被挂起。因为定时器的实际执行时间与
  *设定的时间有出入，所以延迟时间即使被设置为0，也不会立即执行，而是等到一定的时间后
  *再执行。这时候下面的语句已经执行完毕，然后再执行函数 
  */
var a ;
console.log(a);  //1
a = 3;       //a被赋值3
console.log(a);   //3

输出结果

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

var flag = true;
setTimeout(function(){
   flag = false;
},0)
/* 设置了定时器，函数的执行从执行队列被挂起。因为定时器的实际执行时间与
 *设定的时间有出入，所以延迟时间即使被设置为0，也不会立即执行，而是等到一定的时间后
 *再执行。
 */
while(flag){}
console.log(flag);
/*代码执行到这里的时候，定时器里面的函数还没有执行，所以flag为true。while(flag){}进入了
*一个死循环，不断占用网页内存，最终把网页卡死，而且下面的代码也不会执行
*/

没有输出结果，会把网页卡死。

var flag = true;
setTimeout(function(){//等待所有任务结束后执行
    flag = false;
},0)
while(flag){} //setTimeout会等待它执行完毕，此时flag永远是true，无限循环。
console.log(flag);  //不会执行

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

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

for(var i=0;i<5;i++){
    (function(t){
            //参数变量提升 let t;
        return setTimeout(function(){
                    console.log('delayer:' + t );
                }, 0);
    })(i);
    console.log(i);
}

6. 如何获取元素的真实宽高

function getElementStyle(element, prop, pseudoElement) {
  var elementStyle = null;
  var pseudoElement = pseudoElement || null;

  if (element.currentStyle) {
    elementStyle = element.currentStyle;
  } else {
    elementStyle = getComputedStyle(element, pseudoElement);
  }

  return elementStyle[prop];
}
getElementStyle(element, 'width')
getElementStyle(element, 'height')

7. URL 如何编码解码？为什么要编码？

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

编码的原因：

1. url的编码格式采用的是ASCII码，而中文不是ASCII的字符，如果不先编码就传输数据，那么可能会出现问题。所以通过把中文字符编码为符合ASCII标准的字符，就可以避免这个问题
2. url字符串中使用 key=value 键值对的方式传输参数，键值对之间用 & 隔开。服务端接收到参数后，会根据 & 分割键值对，根据 = 分割键和值。如果这时候键或值中含有 & 、= 这些字符，那么服务端分割参数的时候会出现错误。所以通过把键值中的 &、= 进行编码，就可以避免这个问题
   http://www.ruanyifeng.com/blog/2010/02/url_encoding.html

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 /mac\sos\sx/i.test(navigator.userAgent);
}

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);
}