闭包-定时器-BOM

1- 算出代码的输出值；修改代码让 fnArri 输出 i

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

结果：输出 10，因为循环的时候 fnArr[i] = function(){return i} 右边的函数只是相当于一个函数代码片段，还没有执行，要到fnArr3调用时右边的函数才会执行，此时循环已经结束，i已经变为了10.

• 修改代码：

//方法一：可以创建一个闭包，闭包内保存i

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

//方法二
 var fnArr = [];
    for (var i = 0; i < 10; i ++) {
     fnArr[i] =  (function(i){ //用立即执行函数传递i
          return function(){
            return i;
          }
        })(i);
    }
    console.log( fnArr[3]() );

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

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(){
   var speed = 0;
   function setSpeed(s){
       speed = s
   }
   function getSpeed(){
     console.log(speed);
   }
   function accelerate(){
     speed = speed + 10;
   }
   function decelerate(){
     speed = speed - 10;
   }
   function getStatus(){
     if(speed != 0){
       console.log("running");
     }else{
       console.log("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- 这段代码输出结果，why

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的运行机制是，将指定的代码即函数移出本次执行，等到下一轮EventLoop的时，再检查是否到了指定时间。如果到了就执行对应代码。如果不到就等下一轮Event Loop再判断。这就意味着setTimeout指定的代码都必须等到本次执行的所有代码都执行完，才会执行

4- 这段代码输出结果，原因

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

• 该段代码没有输出结果
• 原因:
  • setTimeout指定的代码，必须等到本次执行的所有代码都执行完，才会执行
  • flag为true,while是死循环,会一直运行

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
delayer:5
delayer:5
delayer:5
delayer:5
delayer:5

• 修改代码

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

6- 获取元素真实宽高 的方法总结：

• 使用window对象的getComputedStyle()方法

//由于style对象只能得到DOM节点上的属性值，所以这种方式有很大缺陷
function trueAttr(ele,pseudoCla){
  if (window.getComputedStyle) {
    return getComputedStyle(ele,pseudoCla);
  }else if(ele.currentStyle) {
    return element.currentStyle;
     //低版本IE支持的方式
  }
}

7- URL 怎样编码解码，为什么要编码

var url = "https://www.baidu.com/";
//编码
var encode01 = encodeURI(url);
var encode02 = encodeURIComponent(url);
//解码
var decode01 = decodeURI(encode01);
var decode02 = decodeURIComponent(encode02);

• 区别
  (1) encodeURI方法不会对下列字符编码：
  ASCII字母
  数字
  ~!@#$&()=:/,;?+'
  (2) encodeURIComponent方法不会对下列字符编码
  ASCII字母
  数字
  ~!()'
  所以encodeURIComponent比encodeURI编码的范围更大。

• 对网址的编码不同的操作系统、不同的浏览器、不同的网页字符集，将导致完全不同的编码结果，由于参数是键值对的形式通过URL进行传递，为了避免歧义，要统一，所以要进行编码，让服务器正确识别。

8- 补全函数，判断用户的浏览器类型

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

结果：

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

- 学习总结：

• 还没弄明白闭包的可以继续学习 闭包1和 闭包2，用画作用域链伪代码图的方式来让你透彻的理解闭包
• 参考文章
  闭包：闭包
  异步：异步