闭包-定时器-BOM

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

方法一：

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    (function(){
        var n = i;// 可以视为创建了一个临时储存变量的空间
        fnArr[i] =  function(){
        return n;
        };
    })() //加()立即执行function(n)      
}
console.log( fnArr[3]() ); // 3

方法二：

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

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

var Car = (function(){
    var speed = 0;
    function setSpeed(s){
        speed = s;
    }
    function getSpeed(){
        return speed;
    }
    function accelerate(){
        speed = speed + 10;
    }
    function decelerate(){
        speed = speed - 10;
    }
    function getStatus(){
        if (speed>0) {
            return "running";
        }else{
            return "stop";
        }
    }
    return {
        "setSpeed": setSpeed,
        "getSpeed": getSpeed,
        "accelerate": accelerate,
        "decelerate": decelerate,
        "getStatus": getStatus,
        "speed": "error"
    };
})();

Car.setSpeed(30);
Car.getSpeed(); //30
Car.accelerate();//30+10
Car.getSpeed(); //40;
Car.decelerate();//40-10
Car.decelerate();//40-10-10
Car.getSpeed(); //20
Car.getStatus(); // 'running';
Car.decelerate(); //20-10
Car.decelerate(); //20-10
Car.getStatus();  //'stop';
Car.speed;  //error

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

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0); //延时放在队列结尾，输出2
var a ; //a还是为1
console.log(a); //输出1
a = 3; //a赋值3
console.log(a); //输出3

结果：1,3,2

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

var flag = true;
setTimeout(function(){
flag = false;
},0) //延时放在队列结尾
while(flag){} //flag值为true，会无限循环
console.log(flag); //执行不到这一步，没有输出

结果：会一直循环，没有结果。

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

for(var i=0;i<5;i++){
    (function(){
        var n = i;
        setTimeout(function(){
         console.log('delayer:' + n );
        }, 0);
    })();
    console.log(i);
}
输出：
0
1
2
3
4
delayer:0
delayer:1
delayer:2
delayer:3
delayer:4

创建闭包，将setTimeout函数放入，每次循环，都会把 i 保存进 n 中，并延时输出。

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

• getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])
  语法：var style = window.getComputedStyle("元素", "伪类");
  第二个参数没有伪类设置为null。
• currentStyle
  这个是低版本IE的实现方案，我们可以写个兼容的方式
  element.currentStyle ? element.currentStyle : window.getComputedStyle(element, null)

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

JavaScript提供四个URL的编码/解码方法：
1.decodeURI()
2.decodeURIComponent()
3.encodeURI()
4.encodeURIComponent()
区别

• encodeURI方法不会对下列字符编码：
  ASCII字母
  数字
  ~!@#$&*()=:/,;?+'

• encodeURIComponent方法不会对下列字符编码
  ASCII字母
  数字
  ~!*()'

所以encodeURIComponent比encodeURI编码的范围更大。
实际例子来说，encodeURIComponent会把 http://
编码成http%3A%2F%2F而encodeURI却不会。
当你需要编码整个URL，然后需要使用这个URL，那么用encodeURI。
当你需要编码URL中的参数的时候，那么encodeURIComponent是最好方法。

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

function isAndroid(){
    return /Android/.test(navigator.userAgent);
}
funcnction isIphone(){
    return /iphone/.test(navigator.userAgent);
}
function isIpad(){
    return /ipad/.test(navigator.userAgent);
}
function isIOS(){
    return /(ipad)|(iphone)/i.test(navigator.userAgent); // i忽略大小写
}