JavaScript闭包_定时器_BOM

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

var fnArr = [];
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  function(){
        return i;
    };
}
console.log( fnArr[3]() );  // 输出10,因为它们访问的都是全局的i 
方法一:
for (var i = 0; i < 10; i ++) {
    fnArr[i] =  (function(i){
      return function () {
        return i
      }
    })(i);
}
方法2:
for (var i = 0; i < 10; i ++) {
    (function(i){
      fnArr[i] = function () {
        return i
      }
    })(i);
}

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

// 闭包+立即执行函数实现变量封装
var Car = (function(){
  var speed = 0
  var status = 'stop'
  function setSpeed(s){
      if (s > 0) {
        speed = s
        status = 'running'
      }
  }
  function getSpeed() {
    return speed
  }
  function accelerate() {
    if (status === 'running') {
      speed += 10
    }
  }
  function decelerate() {
    if (status === 'running') {
      speed -= 10
      if (speed === 0) {
        status = 'stop'
      }
    }
  }
  function getStatus() {
    return status
  }
  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是异步执行,就算它的等待时间为0,也要等
到js代码执行完毕后才会开始执行他的回调函数,因此会先执行外面两个console.log

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

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);
// 没有任何输出,因为setTimeout理由同上,而在执行到while时flag为true代码
陷入无限循环(在目前60版本的Chrome上JS引擎会自动优化,跳出无限循环,所以输出为true)

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,delayer: 5,delayer: 5,delayer: 5,delayer: 5
// 解析:setTimeout中的所有i访问的都是全局的i,而setTimeout的回调函数会在
    for循环执行完毕后执行所以此时i的值为5
修改:
 for(var i=0;i<5;i++){
  !function (i) {
    setTimeout(function(){
          console.log('delayer:' + i );
    }, 0);
  }(i)
  console.log(i);
} 

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

  • JS 中 element 对象提供 offsetHeight, scrollHeight, clientHeight(每个有对应 width),其中:

    • offsetHeight 可以用来计算元素的物理空间,此空间包括内容,padding 和 border(还包括滚动条的宽度,但大多时候滚动条的宽度是计算到 padding 和内容中的)。
    • scrollHeight 用来计算可滚动容器的大小,包括不可见的部分,比如一个 300300 的容器放入一个 600600 的图片,此时 scrollHeight 为 600,当然,scrollHeight 的值需要加上 padding 的值。
    • clientHeight 表示可视区域,包括内容和 padding ,如果有滚动条,还需要减去滚动条的宽度。
  • 通过 getComputedStyle(IE下currentStyle) 可以获取元素的真实尺寸. 示例:

    let elem = document.getElementById("elem-container");
    let theCSSprop = window.getComputedStyle(elem).getPropertyValue("想获取的属性值");
    

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

  • encodeURI(): encodeURI() 是对统一资源标识符(URI)进行编码的方法。它使用1到4个转义序列来表示每个字符的UTF-8编码。
  • encodeURIComponent(): encodeURIComponent()是对统一资源标识符(URI)的组成部分进行编码的方法。它使用一到四个转义序列来表示字符串中的每个字符的UTF-8编码。
  • decodeURI(): decodeURI() 函数解码一个由encodeURI 先前创建的统一资源标识符(URI)或类似的例程。
  • decodeURIComponent(): decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。
  • 为什么要编码:
    • 一般来说,URL只能使用英文字母、阿拉伯数字和某些标点符号,不能使用其他文字和符号。这是因为网络标准RFC 1738做了硬性规定:"只有字母和数字[0-9a-zA-Z]、一些特殊符号"$-_.+!*'(),"[不包括双引号]、以及某些保留字,才可以不经过编码直接用于URL。"
    • 这意味着,如果URL中有汉字,就必须编码后使用。

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

var u = navigator.userAgent;
function isAndroid(){
  return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
}
funcnction isIphone(){
  return u.indexOf('iPhone') > -1
}
function isIpad(){
  return u.indexOf('iPad') > -1
}
function isIOS(){
  return !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
}
function isIE() {
  return u.indexOf('Trident') > -1
}

推荐阅读更多精彩内容