閉包、定時器、BOM

  • 下面的代碼輸出多少?修改代碼讓 fnArri 輸出 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++) {
    (function (i) {           //形成閉包
        fnArr[i] = function() {
            return i
        }
    })(i);
 }
//方法2
 var fnArr=[];
 for(var i = 0; i<10; i++) {
    var fn = function(i) {
        return function() {
            return i
        }
    }
    fnArr[i] = fn(i);
 }
  • 封裝一個汽車對象,可以通過如下方式獲取汽車狀態

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 getSpeed() {
        return speed;
   }
   function accelerate() {
        speed+=10;
   }
   function decelerate() {
        speed-=10;
   }
   function getStatus() {
        if(speed > 0) {
            return "Running, speed is" + speed;
        } else {
            return "stop";
        }
   }
   return {
      setSpeed: setSpeed,
      getSpeed: getSpeed,
      accelerate: accelerate,
      decelerate: decelerate,
      getStatus: getStatus,
   }
})()
  • 下面這段代碼輸出結果是? 為什么?

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;              //先進行變量提升;
var a;
a=1          //a設為1;
setTimeout(function(){    //計時器并不會馬上執行,因為主線程還未執行完;
    a = 2;  
    console.log(a);
}, 0);
console.log(a)  //此時 a=1;
a=3;                 //a設為3;
console.log(a)  //此時a=3;
//完畢后執行計時器
  • 下面這段代碼輸出結果是? 為什么?

var flag = true;
setTimeout(function(){
    flag = false;
},0)
while(flag){}
console.log(flag);
//無輸出結果
var flag = true;
setTimeout(function(){  //定時器不會馬上執行,等主線程執行完畢;
    flag = false;
},0)
while(flag){}   // 未設置while循環跳出條件,無限循環;
console.log(flag);  //上面無限循環,此句不執行;
  • 下面這段代碼輸出?如何輸出delayer: 0, delayer:1...(使用閉包來實現)

for(var i=0;i<5;i++){
    setTimeout(function(){
         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);
}
  • 如何獲取元素的真實寬高?

1.如果采用內聯樣式,則element.style.width可以獲取到寬度

<div class="box" style="width: 100px">
.box.style.width == 100

2.如果是外部樣式,則可以用HTMLElement.offsetHeightHTMLElement.offsetWidth獲取元素寬高,注意獲取到的是IE盒模型下的寬高(包含border,padding,content)
3.通過window.getComputedStyle(element, [pseudoElt])方法獲取,pseudoElt是一個可選參數,為偽元素的字符串
該方法返回的是這個元素的CSSStyleDeclaration對象,該對象包含了該元素的所有樣式

var style = window.getComputedStyle(element, [pseudoElt]);
var width = style.width;
var height = style.height;

注意該方法獲取的是元素content寬度

  • URL如何編碼解碼?為什么要編碼?

為什么要編碼
由于URL中只能有一些特定字符、英文、數字。有時候,由于在不同的地區,URL可能會出現中文等其他不允許在URL中出現的字符,這個時候就要對URL進行編碼,成為一個合法的URL。
encodeURI()是對完整的URL進行編碼,生成完整合法URL

var url ="http://www.baidu.com/你好" 
console.log(encodeURI(url))  //http://www.baidu.com/%E4%BD%A0%E5%A5%BD

encodeURIComponent()是把一些不能出現在URL中的字符轉換為合法字符

var url ="你好" 
console.log(encodeURIComponent(url))  // %E4%BD%A0%E5%A5%BD

區別:
encodeURI不會對URL中的功能字符編碼,即使它有合法的轉義:
保留字符:; , / ? : @ & = + $
非轉義的字符:字母 數字 - _ . ! ~ * ' ( )
數字符號:#
而encodeURIComponent則會對功能字符編碼,因為它的目的不是生成一個合法URL,而是生成能在URL中使用合法字符
與編碼對于,有解碼方法:decodeURI(),decodeURIComponent();

  • 補全如下函數,判斷用戶的瀏覽器類型

function isAndroid(){
}
funcnction isIphone(){
}
function isIpad(){
}
function isIOS(){
}
function isAndroid(){
    var system = window.navigator.userAgent;
    return /Android (\d+\.\d+)/.test(system);
}
function isIphone(){
    var system = window.navigator.userAgent;
    return /iPhone/.test(system);
}
function isIpad(){
    var system = window.navigator.userAgent;
    return /iPad/.test(system);
}
function isIOS(){
    var system = window.navigator.userAgent;
    return /Mac OS X/.test(system);
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,963評論 6 542
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,348評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 178,083評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,706評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,442評論 6 412
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,802評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,795評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,983評論 0 290
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,542評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,287評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,486評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 39,030評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,710評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,116評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,412評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,224評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,462評論 2 378

推薦閱讀更多精彩內容

  • 題目1: 下面的代碼輸出多少?修改代碼讓 fnArr[i]() 輸出 i。使用 兩種以上的方法 var fnArr...
    saintkl閱讀 375評論 0 0
  • 題目1: 下面的代碼輸出多少?修改代碼讓fnArri 輸出 i。使用兩種以上的方法 題目2: 封裝一個汽車對象,可...
    饑人谷_桶飯閱讀 400評論 0 0
  • 下面的代碼輸出多少?修改代碼讓 fnArri 輸出 i。使用 兩種以上的方法 方法一:var fnArr = []...
    邵志遠閱讀 207評論 0 0
  • 下面的代碼輸出多少?修改代碼讓 fnArri 輸出 i。使用 兩種以上的方法 var fnArr = [];for...
    jamesXiao_閱讀 195評論 0 0
  • 題目1: 下面的代碼輸出多少?修改代碼讓 fnArri 輸出 i。使用 兩種以上的方法 輸出10 修改為1var ...
    我是一只_魚閱讀 219評論 0 1