闭包 - 定时器 - BOM

1.下面的代码输出多少？修改代码让 fnArri 输出 i。使用 两种以上的

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

• 将代码分解：

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

由于fnArr[i] 等于一个函数，其实就是等于一个地址，所以地址的值一定是i的作用域的最终值。所以，如果想让i跟随for循环变化，就要给i新增一个局部作用域，这样就能跟随全局作用域的i的变化而变化，而不是得到全局作用域i的最终值。

• 修改代码让fnArri输出i

1.使用一个函数将return i包裹。

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

2.使用立即执行函数，保护函数内的变量不会被全局污染。

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

3.使用es6的声明方式。

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

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

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

依次输出1 , 3 , 2 。因为settimeout会等所在的js文件夹的所有代码加载完再执行。

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

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

setTimeout还是会最后执行，又因为while循环没有中断条件，所以页面不会有输出，因为你根本打不开。

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

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

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

1.使用getComputedStyle获取css中所有属性, 然后再用getPropertyValue获取具体的某项属性的属性值。具体用法参考mdn
比如:

var div = document.querySelector('div');
var style = window.getComputedStyle(div,null);
var width = style.getPropertyValue('width');
var height = style.getPropertyValue('height');
console.log(width + '\n' + height);

2.使用offsetWidth/offsetHeight来获取元素的宽高，这个宽高包括边框、内边距、滚动条、内容。可以认为是IE盒模型的宽高。

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

• 为什么编码？
  一般来说，URL中只能使用英文，数字，某些标点符号。所以如果出现了其他文字，比如说中文，就会导致URL出错，不同的操作系统、不同的浏览器、不同的浏览器字符集都会导致完全不同的编码结果，所以为了得出正确的结果，我们总是直接使用Javascript进行编码，不经过浏览器，直接发送给服务端。因为javascript输出的编码结果总是一直的，所以我们在服务器端得到的数据格式是统一的。
• encodeURI()对整个URL进行编码，但是一些特殊符号无法进行编码，比如"; / ? : @ & = + $ , #"，它的输出格式为utf-8，并且在每个字符前加上" % "。它的解码函数是decodeURI()。
• encodeURIcomponent()是对局部进行个别编码，所以它能编码encodeURI()无法编码的特殊符号，它的解码函数是decodeURIcomponent()。

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

function isAndroid() {
    var userAgent = window.navigator.userAgent;
    if(/android/gi.test(userAgent)){
        console.log('android');
    }
}
function isIphone(){
    var userAgent = window.navigator.userAgent;
    if(/iphone/gi.test(userAgent)){
        console.log('iphone');
    }
}
function isIpad(){
    var userAgent = window.navigator.userAgent;
    if(/ipad/gi.test(userAgent)){
        console.log('ipad');
    }
}
function isIOS(){
    var userAgent = window.navigator.userAgent;
    if(/mac os x/gi.test(userAgent)){
        console.log('ios');
    }
}

isAndroid();
isIphone();
isIpad();
isIOS();