闭包_定时器_BOM

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

image.png

输出10，因为i是全局变量，经过循环后，i=10

var fnArr = [];
for (var i = 0; i < 10; i++) {

//方法1：
(function(i) {
    fnArr[i] = function() {
        return i;
    }
})(i);
}
console.log(fnArr[4]());    //4

//方法2：
for (var i = 0; i < 10; i++) {

    fnArr[i] = (function(i) {
        return function() {
            return i;
        };
    })(i);
}
console.log(fnArr[4]());    //4

---

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

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

function setSpeed(s) {
    speed = s
}

function getSpeed() {
    return speed;
}

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

function decelerate() {
    speed = speed - 10;
    if (speed < 0) {
        speed = 0;
    }
}

function getStatus() {
    if (speed > 0) {
        status = 'running';
    } else {
        status = 'stop';
    }
    return status;
}
return {
    setSpeed: setSpeed,
    getSpeed: getSpeed,
    accelerate: accelerate,
    decelerate: decelerate,
    getStatus: getStatus
}
})();


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：下面这段代码输出结果是? 为什么?

输出1，3， 2

var a = 1;
setTimeout(function() {
    a = 2;
    //输出2，回调函数执行，此时a=2
    console.log(a);
}, 0);
var a;
//输出1，比定时器的回调函数先执行，此时a=1
console.log(a);
a = 3;
//输出3，比定时器的回调函数先执行，此时a=3
console.log(a);

---

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

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

没有输出，while进入死循环，循环一直不会结束， setTimeout的回调函数一直不执行，阻塞了输出语句的执行。

---

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

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

//输出0~4，然后输出5次delayer:5, 因为i是全局变量，经过循环后，i=5，回调函数打印i的值是5

修改：

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

---

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

var div = document.querySelector('.ct');
var w = getComputedStyle(div).width;
var h = getComputedStyle(div).height;
console.log(w,h);

---

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

编码函数：escape,encodeURI(),encodeURIComponent()
对应的解码函数：unescape,decodeURI(),decodeURIComponent()

因为URL中有些字符会引起歧义，例如:=或&这种特殊字符，会造成URL传递过程中key和value的歧义，编码后可以避免这种歧义的产生。还有在某些特定的应用场景需要返回原页面，可以把原来页面的URL编码后添加在新的页面中，方便返回。

---

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

image.png

function isAndroid(){ 
  return /Android/.test(window.navigator.userAgent)
 }

function isIphone(){ 
    return /iPhone/.test(window.navigator.userAgent) 
}

function isIpad(){ 
    return /iPad/.test(window.navigator.userAgent) 
}

function isIos(){ 
    return /iPhone|iPad/.test(window.navigator.userAgent)
 }