JavaScript：面試頻繁出現(xiàn)的幾個(gè)易錯(cuò)點(diǎn)

VincentFF 發(fā)布于2019-08-22 15:44 / 2790人閱讀

摘要：針對(duì)于面向?qū)ο缶幊痰摹Ｒ驗(yàn)槊嫦驅(qū)ο缶褪轻槍?duì)對(duì)象例子中的守候來(lái)進(jìn)行執(zhí)行某些動(dòng)作。這就是閉包的用途之一延續(xù)變量周期。把變量放在閉包里面和放在全局變量里面，影響是一致的。

1.前言

這段時(shí)間，金三銀四，很多人面試，很多人分享面試題。在前段時(shí)間，我也臨時(shí)擔(dān)任面試官，為了大概了解面試者的水平，我也寫(xiě)了一份題目，面試了幾個(gè)前端開(kāi)發(fā)者。在這段時(shí)間里面，我在學(xué)，在寫(xiě)設(shè)計(jì)模式的一些知識(shí)，想不到的設(shè)計(jì)模式的這些知識(shí)，就是面試題里面，頻繁讓人掉坑的考點(diǎn)。所以，今天就總結(jié)一下，那些讓人掉坑的考點(diǎn)。

2.面向?qū)ο缶幊?/b>
關(guān)于面向?qū)ο蠛兔嫦蜻^(guò)程，個(gè)人覺(jué)得這兩者不是絕對(duì)獨(dú)立的，而是相互相成的關(guān)系。至于什么時(shí)候用面向?qū)ο螅裁磿r(shí)候用面向過(guò)程，具體情況，具體分析。

針對(duì)于面向?qū)ο缶幊痰?。知乎上有一個(gè)高贊回答：

面向?qū)ο螅? 狗.吃(屎)
面向過(guò)程：吃.(狗,屎)

但是這個(gè)例子覺(jué)得不太優(yōu)雅，我改一下了，舉一個(gè)優(yōu)雅些的小例子說(shuō)明一下面向?qū)ο蠛兔嫦蜻^(guò)程的區(qū)別。

需求：定義‘守候吃火鍋’

面向?qū)ο蟮乃枷胧牵?strong>守候.動(dòng)作(吃火鍋)

面向過(guò)程的思想是：動(dòng)作(守候,吃火鍋)

代碼實(shí)現(xiàn)方面：

//面向?qū)ο?//定義人（姓名） let People=function(name){ this.name=name; } //動(dòng)作 People.prototype={ eat:function(someThing){ console.log(`${this.name}吃${someThing}`); } } //守候是個(gè)人，所以要?jiǎng)?chuàng)建一個(gè)人(new一次People) let shouhou=new People("守候","男",24); shouhou.eat("火鍋"); //面向過(guò)程 let eat=function(who,someThing){ console.log(`${who}吃${someThing}`); } eat("守候","火鍋");

結(jié)果都一樣，都是輸出‘守候吃火鍋’。但是萬(wàn)一我現(xiàn)在吃飽了，準(zhǔn)備寫(xiě)代碼了。這下怎么實(shí)現(xiàn)呢？看代碼

//面向?qū)ο?shouhou.coding=function(){ console.log(this.name+"寫(xiě)代碼"); } shouhou.coding(); //面向過(guò)程 let coding=function(who){ console.log(who+"寫(xiě)代碼"); } coding("守候");

結(jié)果也一樣：‘守候?qū)懘a’

但是不難發(fā)現(xiàn)面向?qū)ο蟾拥撵`活，復(fù)用性和擴(kuò)展性更加。因?yàn)槊嫦驅(qū)ο缶褪轻槍?duì)對(duì)象（例子中的：‘守候’）來(lái)進(jìn)行執(zhí)行某些動(dòng)作。這些動(dòng)作可以自定義擴(kuò)展。
而面向過(guò)程是定義很多的動(dòng)作，來(lái)指定誰(shuí)來(lái)執(zhí)行這個(gè)動(dòng)作。

好了，面向?qū)ο蟮暮?jiǎn)單說(shuō)明就到這里了，至于面向?qū)ο蟮娜筇匦裕豪^承，封裝，多態(tài)這個(gè)自行上網(wǎng)查找資料。
3.this
使用 JavaScript 開(kāi)發(fā)的時(shí)候，很多開(kāi)發(fā)者多多少少會(huì)被 this 的指向搞蒙圈，但是實(shí)際上，關(guān)于 this 的指向，記住最核心的一句話：哪個(gè)對(duì)象調(diào)用函數(shù)，函數(shù)里面的this指向哪個(gè)對(duì)象。

下面分幾種情況談?wù)撓?/p> 3-1.普通函數(shù)調(diào)用
這個(gè)情況沒(méi)特殊意外，就是指向全局對(duì)象-window。

let username="守候" function fn(){ alert(this.username);//undefined } fn();

可能大家會(huì)困惑，為什么不是輸出守候，但是在細(xì)看一看，我聲明的方式是let，不會(huì)是window對(duì)象
如果輸出守候，要這樣寫(xiě)

var username="守候" function fn(){ alert(this.username);//守候 } fn(); //--------------- window.username="守候" function fn(){ alert(this.username);//守候 } fn();
3-2.對(duì)象函數(shù)調(diào)用
這個(gè)相信不難理解，就是那個(gè)函數(shù)調(diào)用，this指向哪里

window.b=2222 let obj={ a:111, fn:function(){ alert(this.a);//111 alert(this.b);//undefined } } obj.fn();

很明顯，第一次就是輸出obj.a，就是111。而第二次，obj沒(méi)有b這個(gè)屬性，所以輸出undefined，因?yàn)?b>this指向obj。

但是下面這個(gè)情況得注意

let obj1={
    a:222
};
let obj2={
    a:111,
    fn:function(){
        alert(this.a);
    }
}
obj1.fn=obj2.fn;
obj1.fn();//222

這個(gè)相信也不難理解，雖然obj1.fn是從obj2.fn賦值而來(lái)，但是調(diào)用函數(shù)的是obj1，所以this指向obj1。

3-3.構(gòu)造函數(shù)調(diào)用

let TestClass=function(){
    this.name="111";
}
let subClass=new TestClass();
subClass.name="守候";
console.log(subClass.name);//守候
let subClass1=new TestClass();
console.log(subClass1.name)//111

這個(gè)也是不難理解，回憶下（new的四個(gè)步驟）就差不多了！

但是有一個(gè)坑，雖然一般不會(huì)出現(xiàn)，但是有必要提一下。

在構(gòu)造函數(shù)里面返回一個(gè)對(duì)象，會(huì)直接返回這個(gè)對(duì)象，而不是執(zhí)行構(gòu)造函數(shù)后創(chuàng)建的對(duì)象

3-4.apply和call調(diào)用

apply和call簡(jiǎn)單來(lái)說(shuō)就是會(huì)改變傳入函數(shù)的this。

let obj1={
    a:222
};
let obj2={
    a:111,
    fn:function(){
        alert(this.a);
    }
}
obj2.fn.call(obj1);

此時(shí)雖然是 obj2 調(diào)用方法，但是使用了call，動(dòng)態(tài)的把 this 指向到 obj1。相當(dāng)于這個(gè) obj2.fn 這個(gè)執(zhí)行環(huán)境是 obj1 。apply 和 call 詳細(xì)內(nèi)容在下面提及。

3-5.箭頭函數(shù)調(diào)用

首先不得不說(shuō)，ES6 提供了箭頭函數(shù)，增加了我們的開(kāi)發(fā)效率，但是在箭頭函數(shù)里面，沒(méi)有 this ，箭頭函數(shù)里面的 this 是繼承外面的環(huán)境。

一個(gè)例子

let obj={
    a:222,
    fn:function(){    
        setTimeout(function(){console.log(this.a)})
    }
};
obj.fn();//undefined

不難發(fā)現(xiàn)，雖然 fn() 里面的 this 是指向 obj ，但是，傳給 setTimeout 的是普通函數(shù)， this 指向是 window ， window 下面沒(méi)有 a ，所以這里輸出 undefined 。

換成箭頭函數(shù)

let obj={
    a:222,
    fn:function(){    
        setTimeout(()=>{console.log(this.a)});
    }
};
obj.fn();//222

這次輸出 222 是因?yàn)?，傳給 setTimeout 的是箭頭函數(shù)，然后箭頭函數(shù)里面沒(méi)有 this ，所以要向上層作用域查找，在這個(gè)例子上， setTimeout 的上層作用域是 fn。而 fn 里面的 this 指向 obj ，所以 setTimeout 里面的箭頭函數(shù)的 this ，指向 obj 。所以輸出 222 。

4.call和apply

call 和 apply 的作用，完全一樣，唯一的區(qū)別就是在參數(shù)上面。
call 接收的參數(shù)不固定，第一個(gè)參數(shù)是函數(shù)體內(nèi) this 的指向，第二個(gè)參數(shù)以下是依次傳入的參數(shù)。
apply接收兩個(gè)參數(shù)，第一個(gè)參數(shù)也是函數(shù)體內(nèi) this 的指向。第二個(gè)參數(shù)是一個(gè)集合對(duì)象（數(shù)組或者類(lèi)數(shù)組）

let fn=function(a,b,c){
console.log(a,b,c);
}
let arr=[1,2,3];

如上面這個(gè)例子

let obj1={
    a:222
};
let obj2={
    a:111,
    fn:function(){
        alert(this.a);
    }
}
obj2.fn.call(obj1);

call 和 apply 兩個(gè)主要用途就是

1.改變 this 的指向（把 this 從 obj2 指向到 obj1 ）

2.方法借用（ obj1 沒(méi)有 fn ，只是借用 obj2 方法）

5.閉包

閉包這個(gè)可能大家是迷糊，但是必須要征服的概念！下面用一個(gè)例子簡(jiǎn)單說(shuō)下

let add=(function(){
let now=0;
return {
 doAdd:function(){
    now++;
    console.log(now);
}
}
})()

然后執(zhí)行幾次！

上圖結(jié)果看到，now 這個(gè)變量，并沒(méi)有隨著函數(shù)的執(zhí)行完畢而被回收，而是繼續(xù)保存在內(nèi)存里面。
具體原因說(shuō)下：剛開(kāi)始進(jìn)來(lái)，因?yàn)槭亲詣?dòng)執(zhí)行函數(shù)，一開(kāi)始進(jìn)來(lái)會(huì)自動(dòng)執(zhí)行，這一塊

然后把這個(gè)對(duì)象賦值給 add 。由于 add 里面有函數(shù)是依賴(lài)于 now 這個(gè)變量。所以 now 不會(huì)被銷(xiāo)毀，回收。這就是閉包的用途之一（延續(xù)變量周期）。由于 now 在外面訪問(wèn)不到，這就是閉包的另一個(gè)用途（創(chuàng)建局部變量，保護(hù)局部變量不會(huì)被訪問(wèn)和修改）。

可能有人會(huì)有疑問(wèn)，閉包會(huì)造成內(nèi)存泄漏。但是大家想下，上面的例子，如果不用閉包，就要用全局變量。把變量放在閉包里面和放在全局變量里面，影響是一致的。使用閉包又可以減少全局變量，所以上面的例子閉包更好！

6.小結(jié)

在學(xué)設(shè)計(jì)模式的時(shí)候，遇到的知識(shí)點(diǎn)就是這一些了，這些知識(shí)點(diǎn)，也是我在群聊，社區(qū)里面，讓人掉坑比較多的考點(diǎn)。這些知識(shí)，可以說(shuō)是開(kāi)發(fā)常用，面試常考的知識(shí)，還是建議大家深入些學(xué)習(xí)。上面那里也是簡(jiǎn)單的過(guò)一下而已。不算深入。如果大家對(duì)文章有什么建議，歡迎指點(diǎn)。

-------------------------華麗的分割線--------------------
想了解更多，關(guān)注關(guān)注我的微信公眾號(hào)：守候書(shū)閣

GPU云服務(wù)器云服務(wù)器易錯(cuò)點(diǎn) 用到的幾個(gè)函數(shù) 云主機(jī)的幾個(gè)品牌選云服務(wù)器的幾個(gè)注意和需求

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93704.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

VincentFF

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow文檔

閱讀 776·2023-04-25 15:13
高并發(fā)下秒殺商品，必須知道的9個(gè)細(xì)節(jié)

閱讀 1398·2021-11-22 12:03
LeetCode 563 二叉樹(shù)的坡度[dfs] HERODING的LeetCode之路

閱讀 826·2021-11-19 09:40
#黑五#bacloud：全場(chǎng)KVM VPS一次性5折，獨(dú)立服務(wù)器6折優(yōu)惠，美國(guó)/荷蘭/立陶宛機(jī)房

閱讀 1910·2021-11-17 09:38
快云科技: 11.11鉅惠美國(guó)云機(jī)2H5G年付148僅有40臺(tái)，云服務(wù)器全場(chǎng)7折，香港云服務(wù)器年付

閱讀 1713·2021-11-08 13:18
C++仍然是最好的語(yǔ)言

閱讀 655·2021-09-02 15:15
vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制

閱讀 1766·2019-08-30 15:54
H5 input[type='date'] 優(yōu)化 pc端和移動(dòng)端的使用

閱讀 2635·2019-08-30 11:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript：面試頻繁出現(xiàn)的幾個(gè)易錯(cuò)點(diǎn)

相關(guān)文章

自己寫(xiě)的面試題，自己想的答案

自己寫(xiě)的面試題，自己想的答案

自己寫(xiě)的面試題，自己想的答案

**forEach、map、filter、find、sort、some等易錯(cuò)點(diǎn)整理**

**docker命令易錯(cuò)點(diǎn)整理**

發(fā)表評(píng)論

0條評(píng)論

VincentFF

男|高級(jí)講師

TA的文章

tensorflow文檔

高并發(fā)下秒殺商品，必須知道的9個(gè)細(xì)節(jié)

LeetCode 563 二叉樹(shù)的坡度[dfs] HERODING的LeetCode之路

#黑五#bacloud：全場(chǎng)KVM VPS一次性5折，獨(dú)立服務(wù)器6折優(yōu)惠，美國(guó)/荷蘭/立陶宛機(jī)房

快云科技: 11.11鉅惠美國(guó)云機(jī)2H5G年付148僅有40臺(tái)，云服務(wù)器全場(chǎng)7折，香港云服務(wù)器年付

C++仍然是最好的語(yǔ)言

vue中如何實(shí)現(xiàn)后臺(tái)管理系統(tǒng)的權(quán)限控制

H5 input[type='date'] 優(yōu)化 pc端和移動(dòng)端的使用

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript：面試頻繁出現(xiàn)的幾個(gè)易錯(cuò)點(diǎn)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！