闭包_定时器_BOM

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

 var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );//输出10；因为调用函数时for循环已经结束

方法一：

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 ++) {
        (function(){
            var n=i;
        fnArr[i] = function(){
            return n;
        };    
        })();  
    }
    console.log( fnArr[3]() );

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

var Car = (function() {
    var speed = 0;

    function setSpeed(s) {
        speed = s
    }

    function getSpeed() {
        return speed;
    }

    function accelerate() {
        speed = speed + 10;
        return speed;
    }

    function decelerate() {
        speed = speed - 10;
        return speed;
    }

    function getStatus() {
        if (speed === 0) {
            return "stop";
        } else {
            return "running";
        }
    }
    return {
        setSpeed: setSpeed,
        getSpeed: getSpeed,
        decelerate: decelerate,
        getStatus: getStatus,
        accelerate: accelerate
    }
})()
Car.setSpeed(30);
console.log(Car.getSpeed()); //30
Car.accelerate();
console.log(Car.getSpeed()); //40;
Car.decelerate();
Car.decelerate();
console.log(Car.getSpeed()); //20
console.log(Car.getStatus()); // 'running';
Car.decelerate();
Car.decelerate();
console.log(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的运行机制是，将指定的代码移出本次执行，setTimeout(f,0)作用是让f在现有的任务一结束就立刻执行。
以上代码等同于：
var a = 1;
var a ;
console.log(a);//1
a = 3;
console.log(a);//3
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0);//2

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

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);
//没有任何输出，setTimeout异步加载，flag=true,while循环的时候进入死循环，执行不到下面的console.log

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(5次)

修改输出delayer: 0, delayer:1...

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

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

window.getComputedStyle("元素", "伪类").width;
window.getComputedStyle("元素", "伪类").height;
低版本IE下：
element.currentStyle.width
element.currentStyle.height
兼容方式：
element.currentStyle ?element.currentStyle : window.getComputedStyle(element, null)

7：URL 如何编码解码？为什么要编码？
编码：
encodeURI()
encodeURIComponent()

解码：
decodeURI()
decodeURIComponent()

编码是为了避免解析网址时产生歧义
Http协议中参数的传输是"key=value"这种简直对形式的，如果要传多个参数就需要用“&”符号对键值对进行分割。如"?name1=value1&name2=value2"，这样在服务端在收到这种字符串的时候，会用“&”分割出每一个参数，然后再用“=”来分割出参数值。

针对“name1=value1&name2=value2”我们来说一下客户端到服务端的概念上解析过程:
上述字符串在计算机中用ASCII吗表示为：
6E616D6531 3D 76616C756531 26 6E616D6532 3D 76616C756532。
6E616D6531：name1
3D：=
76616C756531：value1
26：&
6E616D6532：name2
3D：=
76616C756532：value2
服务端在接收到该数据后就可以遍历该字节流，首先一个字节一个字节的吃，当吃到3D这字节后，服务端就知道前面吃得字节表示一个key，再想后吃，如果遇到26，说明从刚才吃的3D到26子节之间的是上一个key的value，以此类推就可以解析出客户端传过来的参数。

这样一个问题，如果我的参数值中就包含=或&这种特殊字符的时候该怎么办。
比如说“name1=value1”,其中value1的值是“va&lu=e1”字符串，那么实际在传输过程中就会变成这样“name1=va&lu=e1”。我们的本意是就只有一个键值对，但是服务端会解析成两个键值对，这样就产生了歧义。
解决的办法就是对参数进行URL编码

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 /(ipad)|(iphone)/i.test(navigator.userAgent);
    }

闭包_定时器_BOM

推荐阅读更多精彩内容