01 前言

隨著市場(chǎng)的改變，前端面試形式和內(nèi)容都發(fā)生了巨大的變化。以前面試前端，只要背一背八股文，就能應(yīng)付過(guò)去。而最近有較多的同學(xué)去面試，基本都會(huì)遇到筆試題，跟面試官溝通交流的時(shí)候都是問(wèn)一些場(chǎng)景題、邏輯題，幾乎很少遇到以前背八股文那套了。

那我也給大家總結(jié)總結(jié)最近高頻出現(xiàn)簡(jiǎn)單又容易踩坑的面試筆試題吧！

02 以下代碼打印結(jié)果？

• 主要考察var定義變量特性和異步代碼

結(jié)果： 一共輸出5次，每次值都為5。

原因：

1. 因?yàn)樵谘h(huán)中使用了setTimeout 函數(shù)創(chuàng)建了五個(gè)異步任務(wù)，并將它們放入事件隊(duì)列中等待執(zhí)行。

2. 當(dāng)這些任務(wù)被執(zhí)行時(shí)，它們都會(huì)訪(fǎng)問(wèn)同一個(gè)變量 i，由于var 在此聲明的變量屬于全局變量，這5個(gè)異步代碼共享了同一個(gè)變量 i。

3. 當(dāng)循環(huán)結(jié)束后，變量 i 的值為 5，因此當(dāng)這些異步任務(wù)被執(zhí)行時(shí)，它們都會(huì)訪(fǎng)問(wèn)并輸出變量 i 的最終值，即 5。

• 考察let定義變量存在塊級(jí)作用域

結(jié)果： 一共輸出5次，值分別為

0、1、2、3、4。

原因：

1. 因?yàn)樵谘h(huán)中使用了let關(guān)鍵字聲明變量 i，這將會(huì)創(chuàng)建一個(gè)塊級(jí)作用域。

2. 每次循環(huán)迭代時(shí)，都會(huì)創(chuàng)建一個(gè)新的變量 i，并將其綁定到對(duì)應(yīng)的循環(huán)迭代中。

3. 當(dāng)setTimeout函數(shù)被執(zhí)行時(shí)，它們都能夠訪(fǎng)問(wèn)自己所在迭代中的變量 i。因此，第一個(gè)異步任務(wù)中的 i 值為 0，第二個(gè)異步任務(wù)中的 i 值為 1，以此類(lèi)推。每個(gè)異步任務(wù)都只能訪(fǎng)問(wèn)其所在迭代中的變量 i，因此依次輸出的結(jié)果是 0、1、2、3、4。

以上兩個(gè)代碼塊就定義變量的關(guān)鍵字不一樣，導(dǎo)致結(jié)果完全不一樣，雖然改變的點(diǎn)很小，但卻很容易以被面試者忽略，最近就有不少的同學(xué)踩到此坑！

• 考察變量提升（預(yù)解析）

結(jié)果： 輸出

fucntion x(){}

原因：

在js代碼執(zhí)行之前會(huì)先對(duì)代碼進(jìn)行預(yù)解析，也就是所謂的變量提升。

其中會(huì)預(yù)解析兩部分，一是var定義的變量，只提升變量，而不提升值；二是聲明式定義的函數(shù)，會(huì)把整函數(shù)提升。

那么根據(jù)以上描述，此時(shí)預(yù)解析的過(guò)程是這樣的：

1. 先提升var定義的x變量，在代碼最頂部就存在一句var x ，此時(shí)x的值為undefined；

2. 然后提升聲明式函數(shù)，因?yàn)楹瘮?shù)名和x一樣，所以相當(dāng)于把這個(gè)這個(gè)函數(shù)賦值給x變量。

預(yù)解析結(jié)束才會(huì)執(zhí)行執(zhí)行console.log(x) 就打印fucntion x(){}函數(shù)。

雖然只有3句代碼，不要忽略，往往就是越簡(jiǎn)單越容易掉坑的！

• 考察this指向

結(jié)果：window、person、window。

原因：

1. 第一次輸出window，因?yàn)樵谠摵瘮?shù)中，this 指向全局對(duì)象 window。變量sss中保存的是對(duì)函數(shù)person.sayName的引用，sss()調(diào)用是作為普通函數(shù)調(diào)用時(shí)，所以this會(huì)指向全局對(duì)象。

2. 第二次輸出 person，因?yàn)樵谠摵瘮?shù)中，this指向?qū)ο髉erson。通過(guò)使用對(duì)象方法的方式調(diào)用sayName函數(shù)，那么函數(shù)中this指向調(diào)用該函數(shù)的對(duì)象，即函數(shù)中this指向person。

3. 第三次輸出 window，因?yàn)樵谠摵瘮?shù)中，this指向?qū)ο體indow。由于將person.sayName賦值給了變量b，然后執(zhí)行函數(shù)的自調(diào)用，自調(diào)用是將b作為普通函數(shù)進(jìn)行調(diào)用，因此函數(shù)中this指向window。

總的來(lái)說(shuō)，JavaScript 函數(shù)的中this關(guān)鍵字取決于函數(shù)的調(diào)用方式，把函數(shù)的調(diào)用方式理解清楚，這些代碼執(zhí)行結(jié)果就so easy啦~

03 結(jié)語(yǔ)

這篇文章就先寫(xiě)這些啦，希望對(duì)正在面試或者即將要面試的朋友有幫助，期待更多類(lèi)似的面試嗎？可以留言給出你的想法和建議哦！