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. 区别
encodeURI方法不会对下列字符编码 encodeURIComponent方法不会对下列字符编码
ASCII字母 ASCII字母
数字 数字
~!@#$&()=:/,;?+' ~!()'

所以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()
  1. window.innerHeight
window.innerHeight    //页面高度,浏览器高度除去标签和地址书签高度
  1. 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
  1. 获取地址栏里的所有东西
    网址为:http://www.baidu.com:8080/zh/company/window?a=12&b=45#xxxxx
代码 含义
location.protocol 获取当前页面的协议(http:)
location.hostname 获取当前页面的域名(www.baidu.com)
location.port 获取当前页面的端口(8080)
location.host 获取当前页面的域名+端口(www.baidu.com:8080)
location.pathname 获取当前页面的路径,不包含?后面(/zh/company/window)
location.search 获取?后面的查询字符串(?a=12&b=45)
location.hash 获取#后面的锚点(#xxxxx)
document.location.assign('http://www.google.com') 跳转到另一个网址
location.reload(true) 优先从服务器重新加载
location.reload(false) 优先从本地缓存重新加载(默认值)
location.toString() 将location对象转为字符串,等价于document.location.href
  1. 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的值是不一样的,可以通过此属性判定各个浏览器
  1. window.parent
window.parent    //等于父页面的window,比如页面下用iframe嵌入了一个子页面,可以在子页面通过window.parent对父页面进行操作
  1. window.screen
window.screen.availHeight   //获取页面能达到的最高的高度
window.screen.availWidth    //获取页面能达到的最宽的宽度
window.screen.height          //屏幕的高度
window.screen.width          //屏幕的宽度
window.screen.colorDepth   //颜色深度
  1. window.self
window.self   //等于window本身,所以不要设置self的全局变量
  1. 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)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,924评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,781评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,813评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,264评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,273评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,383评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,800评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,482评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,673评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,497评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,545评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,240评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,802评论 3 304
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,866评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,101评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,673评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,245评论 2 341

推荐阅读更多精彩内容

  • 题目1: 下面的代码输出多少?修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法 var fnArr...
    saintkl阅读 344评论 0 0
  • 题目1: 下面的代码输出多少?修改代码让 fnArr[i]() 输出 i。使用 两种以上的方法 题目2: 封装一个...
    Taaaaaaaurus阅读 340评论 0 0
  • 题目1: 下面的代码输出多少?修改代码让 fnArri 输出 i。使用 两种以上的方法 输出10 修改为1var ...
    我是一只_鱼阅读 204评论 0 1
  • BOM课件闭包概念1闭包概念2 1.下面的代码输出多少?修改代码让fnArr[i]() 输出 i。使用两种以上的方...
    饥人谷_米弥轮阅读 139评论 0 0
  • 所谓命运,乃一出“人间戏剧”,需要各种各样的角色,你只能是其中之一,不可以随意调换。 要让戏剧吸引...
    德旭阅读 384评论 0 2