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
}