进阶11-闭包_定时器_BOM

作者: 我七 | 来源:发表于2017-09-25 16:08 被阅读0次

进阶11-闭包_定时器_BOM
进阶11-闭包_定时器_BOM
进阶11-闭包_定时器_BOM
进阶11-闭包 BOM
进阶任务11-闭包、定时器、BOM
进阶11 闭包、定时器、BOM
进阶11 闭包_定时器_BOM
进阶11 闭包_定时器_BOM
进阶11:闭包_定时器_BOM
闭包_定时器_BOM(进阶11)

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

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

方法一：

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

方法二：

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

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

var Car = (function(){
   var speed = 0;
   function setSpeed(s){
       speed = s
   }
   ...
   return {
      setSpeed: setSpeed,
      ...
   }
})()
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

答：

var Car = (function(){
  var speed = 0;
  function setSpeed(s){
    speed = s
  }
  function getSpeed(){
    console.log(speed)
  }
  function accelerate(){
    speed += 10
  }
  function decelerate(){
    speed>0?speed -= 10:console.log('速度已为0')
  }
  function getStatus(){
    speed>0?console.log('running'):console.log('stop')
  }

  return{
    setSpeed: setSpeed,
    getSpeed: getSpeed,
    accelerate: accelerate,
    decelerate: decelerate,
    getStatus: getStatus    
  }
})()

Car.setSpeed(30);
Car.getSpeed();

Car.accelerate();
Car.getSpeed();

Car.decelerate();
Car.decelerate();
Car.getSpeed();

Car.getStatus();

Car.speed;

题目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异步延迟，
实际代码执行步骤如下：

var a = 1;
var a;
console.log(a); //  1
a = 3;
console.log(a); //  3
(function() {
  a = 2;
  console.log(a);
})(); //  2

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

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

什么都不会输出，浏览器还会卡
setTimeout是在执行完所有代码后才会执行自身代码，while循环的一直是true，最后的console.log也不会输出

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

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

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

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

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

function trueStyle(element,pseduoElement){
    return element.currentStyle ? element.currentStyle : 
    getComputedStyle(element,[pseduoElement])
}
var trueWidth = trueStyle(element).width
var trueHeight = trueStyle(element).height

题目7： URL 如何编码解码？为什么要编码？
URL的编码格式采用的是ASCII码，而不是Unicode，也就是说URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。如果URL中有汉字，就必须编码后使用，否则服务器有可能出现解析错误。

两种编码方式

encodeURI()
encodeURIComponent()
两种解码方式
decodeURI()
decodeURIComponent()

区别：前者对完整URL进行URL Encode，于是URL中的功能字符，比如&, ?, /, =等等这些并不会被转义；而后者被设计来对一个URL中的值进行转义，会把这些功能字符也进行转义。

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

function isAndroid(){
  return /android/.test(navigator.userAgent);
}
function isIphone(){
  return /iphone/.test(navigator.userAgent);
}
function isIpad(){
  return /ipad/.test(navigator.userAgent);
}
function isIOS(){
  return /(iphone)|(ipad)/.test(navigator.userAgent);
}