进阶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 
/*
因为当i自增到10,才跳出for循环,然后开始执行fnArr[3](),匿名函数function(){return i;} 此时才被调用,
调用的时候i=10,所以返回10.
*/

解决办法:

//方法1:
for (var i = 0; i < 10; i++) {
    fnArr[i] = (function(i){    //这个括号里的i是自有变量,与外部for里的i毫无关联,只受传入的参数影响
        return function(){     //返回一个函数function(){}
            return i;
        };
    })(i);  //这个i为外部传入的参数
}
console.log(fnArr[3]()) //打印结果为3.  
//注意这里fnArr[3]()能调用,说明fnArr[i]是个函数,所以上面需要需要返回一个函数function(){}

//方法2:
for (var i = 0; i < 10; i++) {
    (function(i){
       fnArr[i] = function(){
         return i;
       }
    })(i)
}
console.log(fnArr[3]()) //打印结果为3.  

//方法3:
for (let i = 0; i < 10; i++) {    //let 语句声明一个块级作用域的本地变量
  fnArr[i] = function(){
    return i;
  };
}
console.log(fnArr[3]());                   //打印结果为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{
      console.log('减速幅度大于当前最低速度,无法减速')
    }
  }
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：下面这段代码输出结果是? 为什么?

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

解题思路:

//声明前置
var a;
var a ;
a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);     //打印出2,但是由于setTimeout运行机制,需等到所有代码执行完,才会执行
}, 0);
console.log(a);   //打印出1,因为上面a被赋值为1
a = 3;   
console.log(a);  //打印出3,因为上面a被赋值为3

因为定时器的运行机制:将指定的代码移出本次执行，等到下一轮 Event Loop 时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮 Event Loop 时重新判断时间

所以最终打印顺序及结果是

1
3
2

---

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

var flag = true;
setTimeout(function(){   //由于setTimeout运行机制,要等到所有代码执行完,才会被执行,所以这里也永远不被执行
    flag = false;
},0)
while(flag){}    /*while循环的特性,只要指定条件是true,循环就可以一直执行代码.因为flag为true,while无限循环,不会执行之后的代码*/
console.log(flag); //不被执行

代码没有任何输出

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

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

整理以上代码:声明提前,setTimeout代码执行置后

var i
for(i=0;i<5;i++){
    console.log(i); //因为定时器执行机制, 所以此行优先执行,先输出0 1 2 3 4
    setTimeout(function(){
         console.log('delayer:' + i );  //执行完所有代码后开始执行,i已经自增到5,因为只有一个全局变量i,此时i的值为5,所以输出5次 delayer:5
    }, 0);  
}

解题思路:可以在函数内部再声明一个内部变量

for(var i=0;i<5;i++){
     (function(i){     //这个i是函数自有变量 ,与外部变量i不是同一个变量,不受for循环里的i值影响,只受传入的参数i影响
     setTimeout(function(){
         console.log('delayer:' + i ); // 这里的i也是自有内部变量,当所有代码执行完后,开始执行,传入参数依次是0 1 2 3 4
    }, 0);
    console.log(i);
    })(i); //i为传入参数 传入参数依次是 0 1 2 3 4
}

所以最终输出结果是:

0
1
2
3
4
delayer:0
delayer:1
delayer:2
delayer:3
delayer:4

---

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

主流浏览器通过window.getComputedStyle来获取真实style，低版本IE通过element.currentStyle来获取真实style

   <style>
     .box{
         border: 3px solid red;
         height: 300px;
         width: 500px;
     }
   </style>
    
   <div class="box"></div>

   <script>
        var box = document.querySelector('.box')    //获取元素节点

        //获取元素的真实style
        function trueStyle(element,pseudoElt){
            return element.currentStyle ? element.currentStyle : window.getComputedStyle(element,pseudoElt);
        }
        var tureWidth = trueStyle(box).width;
        var trueHeight = trueStyle(box).height;

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

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

• 解码方式:
  decodeURI()
decodeURIComponent()

• 编码原因:

对于Url来说，之所以要进行编码，是因为Url中有些字符会引起歧义。
比如说“name1=value1”,其中value1的值是“va&lu=e1”字符串，那么实际在传输过程中就会变成这样“name1=va&lu=e1”。我们的本意是就只有一个键值对，但是服务端会解析成两个键值对，这样就产生了歧义。
又如，Url的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，例如中文。否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下，中文可能会造成问题。
URL编码的原则就是使用安全的字符（没有特殊用途或者特殊意义的可打印字符）去表示那些不安全的字符.
预备知识：URI是统一资源标识的意思，通常我们所说的URL只是URI的一种。下面提到的URL编码，实际上应该指的是URI编码。
[参考]https://www.cnblogs.com/jerrysion/p/5522673.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 /iphone|ipad/i.test(navigator.userAgent)
}