闭包_定时器_BOM

[yongheng2016]

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

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

输出：10

上面代码其实是这样的：

var i ;
i=1; i=2; i=3...; i=10;  //  i最后是10
fnArr[0] = function (){ return i }
fnArr[1] = function (){ return i }
fnArr[2] = function (){ return i }
...
fnArr[9] = function (){ return i }

方法1：

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

方法2：

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

方法3：

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

题目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 accelerate(){
       speed+=10
   }
   function decelerate(){
       speed-=10;
       if (speed<0){
         speed = 0
       }
   }
   function getSpeed(){
       if (speed>0){
         console.log(speed)
       }else{
          console.log('stop')
       }
   }
   function getStatus(){
       if (speed>0){
          console.log('running')
       }else{
          console.log('stop')
       }
   }
   return {
      setSpeed: setSpeed,
      accelerate: accelerate,
      decelerate: decelerate,
      getSpeed: getSpeed,
      getStatus: getStatus,
   }

})()

题目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 代码转换：

var a;
a=1;
console.log(a);
a=3;
console.log(a)
//  等上面代码执行完之后，立即执行定时器中的代码
function(){
    a = 2;
    console.log(a);
}

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

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

输出： true 代码转换：

var flag = true;
while(flag){ }  // 因为flag为true，无限循环
 console.log(flag);   //上面无限循环，无法执行到这里
//  上面无限循环，无法执行到这里...
function (){
    flag = false
}

题目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 代码：

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

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

element.offsetWidth element.offsetHeight

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

为什么要编码

一般来说，URL只能使用英文字母、阿拉伯数字和某些标点符号，不能使用其他文字和符号。这是因为网络标准RFC1738做了硬性规定：

"...Only alphanumerics [0-9a-zA-Z], the special characters "$-_.+!*'()," [not including the quotes - ed], and reserved characters used for their reserved purposes may be used unencoded within a URL."

"只有字母和数字[0-9a-zA-Z]、一些特殊符号$-_.+!*'(),[不包括双引号]、以及某些保留字，才可以经过编码直接用于URL。"

这意味着，如果URL中有汉字或其它非规定字符，就必须编码后使用。

URL如何解码

编码的混乱

1. 情况1：网址路径中包含汉字 网址路径的编码，用的是utf-8编码。（使用对应的utf-8解码）
2. 情况2：查询字符串包含汉字 查询字符串的编码，用的是操作系统的默认编码。
3. 情况3：Get/Post方法生成的URL包含汉字 GET和POST方法的编码，用的是网页的编码。
4. 情况4：Ajax调用的URL包含汉字 在Ajax调用中，IE总是采用GB2312编码（操作系统的默认编码），而Firefox总是采用utf-8编码。

--->这么多编码情况如何解码...

优雅解码

• 问：如何够保证客户端只用一种编码方法向服务器发出请求？
• 答：用Javascript先对URL编码，然后再向服务器提交，不要给浏览器插手的机会。因为Javascript的输出总是一致的，所以就保证了服务器得到的数据是格式统一的。

js编、解码方法

• 方法1：escape()（古董）
• 方法2：对整个URL进行编码
  • encodeURI( )
  • decodeURI( )
• 方法3：与encodeURI()的区别是，它用于对URL的组成部分进行个别编码，而不用于对整个URL进行编码。
  • encodeURIComponent( )
  • decodeURIComponent( )

阮一峰（URL编码）： http://www.ruanyifeng.com/blog/2010/02/url_encoding.html

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

function isAndroid(){
  var tolowerUserAgent = navigator.userAgent.toLowerCase()
  var checkReg = /android/i
  if (checkReg.test(tolowerUserAgent)){
    console.log('is Android')
  }else{
     console.log('not Andriod')
   }
}

funcnction isIphone(){
  var tolowerUserAgent = navigator.userAgent.toLowerCase()
  var checkReg = /iphone/i
  if (checkReg.test(tolowerUserAgent)){
    console.log('is phone')
  }else{
     console.log('not phone')
   }
}

function isIpad(){
  var tolowerUserAgent = navigator.userAgent.toLowerCase()
  var checkReg = /ipad/i
  if (checkReg.test(tolowerUserAgent)){
    console.log('is ipad')
  }else{
     console.log('not ipad')
   }
}

function isIOS(){
  var tolowerUserAgent = navigator.userAgent.toLowerCase()
  var checkReg = /ios/i
  if (checkReg.test(tolowerUserAgent)){
    console.log('is IOS')
  }else{
     console.log('not IOS')
   }
}

参考： https://my.oschina.net/docin/blog/200663