web前端-js小记(11)-闭包_定时器_BOM

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

    var fnArr = [];
    for (var i = 0; i < 10; i ++) {
        fnArr[i] =  function(){
            return i;
        };
    }
    console.log( fnArr[3]() );  //10
//修改后：
//1、立即执行函数：
var fnArr=[];
for(var i=0;i<10;i++){
  fnArr[i]=function(i){
    return function(){
      return i;
    };
  }(i);
}
console.log(fnArr[3]());
//2、创建一个局部变量，把i的值传给局部变量：
var fnArr=[];
for(var i=0;i<10;i++){
 let j=i;                             //注意let是声明一个块级作用域的本地变量，块外部的不会被访问到
  fnArr[i]=function(){
    return j;
  }
}
console.log(fnArr[3]());

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

var Car = (function(){
   var speed = 0;
   function setSpeed(s){
       speed = s
   }
   function getSpeed(){
      return speed;
   }
   function accelerate(){
     speed+=10;
   }
   function decelerate(){
     if(speed>=10){
       speed-=10;
     }
    else speed=0;
   }
   function getStatus(){
     if(speed>0) return "running";
     else return "stop";
   }
   return {
      setSpeed: setSpeed,
      getSpeed: getSpeed,
      accelerate: accelerate,
      decelerate: decelerate,
      getStatus: getStatus,
      speed:"error"
   }
})()
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);   //2
}, 0);
var a ;
console.log(a);   //1
a = 3;
console.log(a);     //3
//声明提前后的代码为：
var a;
var a ;
function b(){
    a = 2;
    console.log(a);
};
a=1;
console.log(a);
a=3;
console.log(a);
setTimeout(b(),0);              //setTimeout为异步，放到最后执行

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

var flag = true;
setTimeout(function(){     //异步，setTimeout要放到最后执行
    flag = false;
},0)
while(flag){}                    //flag为true,因为setTimeout还未执行，进入了无限循环
console.log(flag);          //未输出，上个代码进入了无限循环

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

for(var i=0;i<5;i++){
    setTimeout(function(){
         console.log('delayer:' + i );
    }, 0);
    console.log(i);
}
//改写1：
for(var i=0;i<5;i++){
  let j=i;
  setTimeout(function(){
    console.log("delayer:"+j);
  },0);
  console.log(i);
}
//改写2：
for(var i=0;i<5;i++){
  setTimeout(function(i){
    return function(){console.log("delayer:"+i);}
  }(i),0);
}
console.log(i);

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

function get(element){
  var obj={};
  obj["width"]=element.offsetWidth;
  obj["height"]=element.offsetHeight;
  return  obj;
}

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

JavaScript提供四个URL的编码/解码方法。

1. 解码
   decodeURI()
   decodeURIComponent()
2. 编码
   encodeURI()
   encodeURIComponent()
3. 区别

所以encodeURIComponent比encodeURI编码的范围更大。
encodeURI被用作对一个完整的URI进行编码，而encodeURIComponent被用作对URI的一个组件进行编码。

    对于Url来说，之所以要进行编码，是因为Url中有些字符会引起歧义。

例如，Url参数字符串中使用key=value键值对这样的形式来传参，键值对之间以&符号分隔，如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&，那么势必会造成接收Url的服务器解析错误，因此必须将引起歧义的&和=符号进行转义，也就是对其进行编码。
Url的编码格式采用的是ASCII码，而不是Unicode，这也就是说你不能在Url中包含任何非ASCII字符，例如中文。否则如果客户端浏览器和服务端浏览器支持的字符集不同的情况下，中文可能会造成问题。

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

function isAndroid(){
var reg=/Android/gi;
return reg.test(window.navigator.userAgent)
}
funcnction isIphone(){
var reg=/Iphone/gi;
return reg.test(window.navigator.userAgent)
}
function isIpad(){
var reg=/Ipad/gi;
return reg.test(window.navigator.userAgent)
}
function isIOS(){
var reg=/Iphone|Ipad/gi;
return reg.test(window.navigator.userAgent)
}

什么是BOM？

BOM：浏览器对象模型(browser object model)的简称，bom API没有规定的文档，全部都是约定俗成的，这些API全是挂在window上的。

BOM常用API

1. window.history

window.history.back()    //页面后退，相当于浏览器上页面后退键
window.history.forward()   //页面前进，相当于浏览器上页面前进键
window.history.go(-1)   //相当于window.history.back()
window.history.go(1)    //相当于window.history.forward()

2. window.innerHeight

window.innerHeight    //页面高度，浏览器高度除去标签和地址书签高度

3. window.loaction

window.location.href="http://www.baidu.com"    //在当前页面打开百度，等价于window.location="http://www.baidu.com"
//注意一定要打上http://
window.location.href="www.baidu.com"    //表示在当前页面的地址后面加上www.baidu.com
<a href="www.baidu.com"></a>    //表示在当前路径下打开www.baidu.com路径
<a href="/www.baidu.com"></a>    //表示在当前域名下打开www.baidu.com的路径
<a href="//www.baidu.com"></a>    //表示继承当前协议，相当于http://www.baidu.com

4. 获取地址栏里的所有东西
   网址为：http://www.baidu.com:8080/zh/company/window?a=12&b=45#xxxxx

5. window.name

<a href="http://www.baidu.com" target="Ethan">百度</a>
<a href="http://www.qq.com" target="Ethan">腾讯</a>
//当点击第一个链接时，在新标签打开百度首页，在百度页面控制台上输入window.name,显示为Ethan,当点击第二个链接时，腾讯在百度的标签里打开腾讯主页，若将百度页面window.name="XX",则点击第二个链接时在新标签打开腾讯主页

6.window.navigator.userAgent

window.navigator.userAgent   
//"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"
//不同的浏览器所得到的window.navigator.userAgent的值是不一样的，可以通过此属性判定各个浏览器

7. window.parent

window.parent    //等于父页面的window,比如页面下用iframe嵌入了一个子页面，可以在子页面通过window.parent对父页面进行操作

8. window.screen

window.screen.availHeight   //获取页面能达到的最高的高度
window.screen.availWidth    //获取页面能达到的最宽的宽度
window.screen.height          //屏幕的高度
window.screen.width          //屏幕的宽度
window.screen.colorDepth   //颜色深度

9. window.self

window.self   //等于window本身，所以不要设置self的全局变量

10. window.open

var f="width=500px,height=500px"
window.open("http://www.baidu.com","_blank",f);    //"_self"表示在当前页面打开百度，_blank表示在新标签打开百度，"width=500px,height=500px"设置了打开新页面的大小，设置了这个值百度会在当前页面弹出一个新窗口，窗口长宽为500px

(mission 11)