閉包-定時(shí)器-BOM

題目1: 下面的代碼輸出多少珊随?修改代碼讓 fnArri 輸出 i蔗彤。使用 兩種以上的方法

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

方法一:

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

方法二:

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

方法三:

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

題目2: 封裝一個(gè)汽車對(duì)象孝扛,可以通過如下方式獲取汽車狀態(tài)

var Car = (function(){
  var speed = 0;

  function setSpeed(s){
    speed = s;
  }

  function getSpeed(){
    console.log(speed) ;  
  }
  function accelerate(){
    speed+=10;
  }

  function decelerate(){
     if(speed>10){ 
        speed-=10;
      }else {
         speed = 0;  
    }
  }

  function getStatus(){
      if(speed>0){
      console.log( "running");
      }else{
      console.log("stop") ;
      }
  }

  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:下面這段代碼輸出結(jié)果是? 為什么?

var a = 1;
setTimeout(function(){
    a = 2;
    console.log(a);
}, 0);
    var a ;
    console.log(a);
    a = 3;
    console.log(a);

輸出1 3 2舀锨,那是因?yàn)閟etTimeout函數(shù)的運(yùn)行機(jī)制是,將制定的代碼移出本次執(zhí)行沪编,等到下一輪EventLoop時(shí)呼盆,再檢查時(shí)間,執(zhí)行代碼蚁廓。這意味著访圃,先console.log(1),再console.log(3)相嵌,本次代碼執(zhí)行完后再檢查時(shí)間腿时,執(zhí)行console.log(2)

題目4:下面這段代碼輸出結(jié)果是? 為什么?

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

瀏覽器會(huì)陷入while死循環(huán)。因?yàn)閟etTimeout函數(shù)的運(yùn)行機(jī)制是饭宾,將制定的代碼移出本次執(zhí)行批糟,等到下一輪EventLoop時(shí),再檢查時(shí)間看铆,執(zhí)行代碼徽鼎。所以,while循環(huán)將一直循環(huán)下去弹惦,本次EventLoop無法結(jié)束否淤,無法進(jìn)入setTimeout。

題目5: 下面這段代碼輸出肤频?如何輸出delayer: 0, delayer:1...(使用閉包來實(shí)現(xiàn))

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

修改后:

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

題目6: 如何獲取元素的真實(shí)寬高

function getCss(curEle,attr){
      return window.getComputedStyle ? window.getComputedStyle(curEle,null)[attr] : curEle.currentStyle[attr];
}
getCss(ele,'width')//寬度
getCss(ele,'height')//高度

題目7: URL 如何編碼解碼叹括?為什么要編碼?

編碼原因:

  • Url參數(shù)字符串中使用key=value鍵值對(duì)這樣的形式來傳參宵荒,鍵值對(duì)之間以&符號(hào)分隔汁雷,如/s?q=abc&ie=utf-8。如果你的value字符串中包含了=或者&报咳,那么勢(shì)必會(huì)造成接收Url的服務(wù)器解析錯(cuò)誤侠讯,因此必須將引起歧義的&和=符號(hào)進(jìn)行轉(zhuǎn)義,也就是對(duì)其進(jìn)行編碼暑刃。
  • Url的編碼格式采用的是ASCII碼厢漩,而不是Unicode,這也就是說你不能在Url中包含任何非ASCII字符岩臣,例如中文溜嗜。否則如果客戶端瀏覽器和服務(wù)端瀏覽器支持的字符集不同的情況下,中文可能會(huì)造成問題架谎。

ps:URI是統(tǒng)一資源標(biāo)識(shí)的意思炸宵,通常我們所說的URL只是URI的一種。典型URL的格式如下所示谷扣。下面提到的URL編碼土全,實(shí)際上應(yīng)該指的是URI編碼。

Paste_Image.png

Url編碼的原則就是使用安全的字符(沒有特殊用途或者特殊意義的可打印字符)去表示那些不安全的字符。

解決辦法:

三個(gè)編碼的函數(shù)——escape裹匙,encodeURI瑞凑,encodeURIComponent——都是用于將不安全不合法的Url字符轉(zhuǎn)換為合法的Url字符表示,它們有以下幾個(gè)不同點(diǎn)概页。
  安全字符不同:
  下面列出了這三個(gè)函數(shù)的安全字符(即函數(shù)不會(huì)對(duì)這些字符進(jìn)行編碼)

  • escape(69個(gè)):*/@+-._0-9a-zA-Z
  • encodeURI(82個(gè)):!#$&'()*+,/:;=?@-._~0-9a-zA-Z
  • encodeURIComponent(71個(gè)):!'()*-._~0-9a-zA-Z

兼容性不同:escape函數(shù)是從Javascript 1.0的時(shí)候就存在了籽御,其他兩個(gè)函數(shù)是在Javascript 1.5才引入的。但是由于Javascript 1.5已經(jīng)非常普及了绰沥,所以實(shí)際上使用encodeURI和encodeURIComponent并不會(huì)有什么兼容性問題篱蝇。

對(duì)Unicode字符的編碼方式不同:這三個(gè)函數(shù)對(duì)于ASCII字符的編碼方式相同,均是使用百分號(hào)+兩位十六進(jìn)制字符來表示徽曲。但是對(duì)于Unicode字符零截,escape的編碼方式是%uxxxx,其中的xxxx是用來表示unicode字符的4位十六進(jìn)制字符秃臣。這種方式已經(jīng)被W3C廢棄了涧衙。但是在ECMA-262標(biāo)準(zhǔn)中仍然保留著escape的這種編碼語法。encodeURI和encodeURIComponent則使用UTF-8對(duì)非ASCII字符進(jìn)行編碼奥此,然后再進(jìn)行百分號(hào)編碼弧哎。這是RFC推薦的。因此建議盡可能的使用這兩個(gè)函數(shù)替代escape進(jìn)行編碼稚虎。

適用場(chǎng)合不同:encodeURI被用作對(duì)一個(gè)完整的URI進(jìn)行編碼撤嫩,而encodeURIComponent被用作對(duì)URI的一個(gè)組件進(jìn)行編碼。從上面提到的安全字符范圍表格來看蠢终,我們會(huì)發(fā)現(xiàn)序攘,encodeURIComponent編碼的字符范圍要比encodeURI的大。我們上面提到過寻拂,保留字符一般是用來分隔URI組件(一個(gè)URI可以被切割成多個(gè)組件程奠,參考預(yù)備知識(shí)一節(jié))或者子組件(如URI中查詢參數(shù)的分隔符),如:號(hào)用于分隔scheme和主機(jī)祭钉,?號(hào)用于分隔主機(jī)和路徑瞄沙。由于encodeURI操縱的對(duì)象是一個(gè)完整的的URI,這些字符在URI中本來就有特殊用途慌核,因此這些保留字符不會(huì)被encodeURI編碼距境,否則意義就變了。

題目8: 補(bǔ)全如下函數(shù)垮卓,判斷用戶的瀏覽器類型

function isAndroid(){
    return /android/i.test(navigator.userAgent);
}
function isIphone(){
    return /iphone/i.test(navigator.userAgent);
}
function isIpad(){
    return /ipad/i.test(navigator.userAgent);
}
function isIOS(){
    return /iphone|ipad/i.test(navigator.userAgent);
}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末垫桂,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子扒接,更是在濱河造成了極大的恐慌伪货,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,542評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钾怔,死亡現(xiàn)場(chǎng)離奇詭異碱呼,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)宗侦,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,822評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門愚臀,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人矾利,你說我怎么就攤上這事姑裂。” “怎么了男旗?”我有些...
    開封第一講書人閱讀 163,912評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵舶斧,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我察皇,道長(zhǎng)茴厉,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,449評(píng)論 1 293
  • 正文 為了忘掉前任什荣,我火速辦了婚禮矾缓,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘稻爬。我一直安慰自己嗜闻,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,500評(píng)論 6 392
  • 文/花漫 我一把揭開白布桅锄。 她就那樣靜靜地躺著琉雳,像睡著了一般。 火紅的嫁衣襯著肌膚如雪竞滓。 梳的紋絲不亂的頭發(fā)上咐吼,一...
    開封第一講書人閱讀 51,370評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音商佑,去河邊找鬼锯茄。 笑死,一個(gè)胖子當(dāng)著我的面吹牛茶没,可吹牛的內(nèi)容都是我干的肌幽。 我是一名探鬼主播,決...
    沈念sama閱讀 40,193評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼抓半,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼喂急!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起笛求,我...
    開封第一講書人閱讀 39,074評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤廊移,失蹤者是張志新(化名)和其女友劉穎糕簿,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狡孔,經(jīng)...
    沈念sama閱讀 45,505評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡懂诗,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,722評(píng)論 3 335
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了苗膝。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片殃恒。...
    茶點(diǎn)故事閱讀 39,841評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖辱揭,靈堂內(nèi)的尸體忽然破棺而出离唐,到底是詐尸還是另有隱情,我是刑警寧澤问窃,帶...
    沈念sama閱讀 35,569評(píng)論 5 345
  • 正文 年R本政府宣布亥鬓,位于F島的核電站,受9級(jí)特大地震影響域庇,放射性物質(zhì)發(fā)生泄漏贮竟。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,168評(píng)論 3 328
  • 文/蒙蒙 一较剃、第九天 我趴在偏房一處隱蔽的房頂上張望咕别。 院中可真熱鬧,春花似錦写穴、人聲如沸惰拱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,783評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)偿短。三九已至,卻和暖如春馋没,著一層夾襖步出監(jiān)牢的瞬間昔逗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,918評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工篷朵, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留勾怒,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,962評(píng)論 2 370
  • 正文 我出身青樓声旺,卻偏偏與公主長(zhǎng)得像笔链,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子腮猖,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,781評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容

  • 1.題目1: 下面的代碼輸出多少鉴扫?修改代碼讓 fnArri 輸出 i。使用 兩種以上的方法 方法一: 立即執(zhí)行函數(shù)...
    饑人谷_啦啦啦閱讀 390評(píng)論 0 0
  • 題目1: 下面的代碼輸出多少澈缺?修改代碼讓 fnArri 輸出 i坪创。使用 兩種以上的方法 題目2: 封裝一個(gè)汽車對(duì)象...
    怎么昵稱閱讀 197評(píng)論 0 0
  • 題目1: 下面的代碼輸出多少炕婶?修改代碼讓 fnArr[i]() 輸出 i。使用 兩種以上的方法 在線預(yù)覽 在線預(yù)覽...
    阿魯提爾閱讀 353評(píng)論 0 1
  • 題目1: 下面的代碼輸出多少莱预?修改代碼讓fnArri 輸出 i古话。使用兩種以上的方法 題目2: 封裝一個(gè)汽車對(duì)象,可...
    漂于行閱讀 328評(píng)論 0 0
  • 題目1: 下面的代碼輸出多少锁施?修改代碼讓 fnArri 輸出 i。使用 兩種以上的方法 題目2: 封裝一個(gè)汽車對(duì)象...
    YM雨蒙閱讀 140評(píng)論 0 0