收藏 | 5個(gè)經(jīng)典的前端面試問題


問題1:Scope作用范圍

考慮下面的代碼:


(function() { var a = b = 5;})();
console.log(b);

什么會(huì)被打印在控制臺(tái)上?

回答

上面的代碼會(huì)打印 5。

這個(gè)問題的訣竅是,這里有兩個(gè)變量聲明窿吩,但 a 使用關(guān)鍵字var聲明的。代表它是一個(gè)函數(shù)的局部變量艾栋。與此相反爆存,b 變成了全局變量。

這個(gè)問題的另一個(gè)訣竅是蝗砾,它沒有使用嚴(yán)格模式 ('use strict';) 先较。如果啟用了嚴(yán)格模式,代碼就會(huì)引發(fā)ReferenceError的錯(cuò)誤:B沒有定義(b is not defined)悼粮。請(qǐng)記住闲勺,嚴(yán)格模式,則需要明確指定扣猫,才能實(shí)現(xiàn)全局變量聲明菜循。比如,你應(yīng)該寫:

(function() {   'use strict';   var a = window.b = 5;})();
console.log(b);

問題2:創(chuàng)建“原生”(native)方法

給字符串對(duì)象定義一個(gè)repeatify功能申尤。當(dāng)傳入一個(gè)整數(shù)n時(shí)癌幕,它會(huì)返回重復(fù)n次字符串的結(jié)果。例如:

console.log('hello'.repeatify(3));

應(yīng)打印 hellohellohello昧穿。

回答

一個(gè)可能的實(shí)現(xiàn)如下所示:

String.prototype.repeatify = String.prototype.repeatify || function(times) {   var str = '';   for (var i = 0; i < times; i++) {      str += this;   }   return str;};

現(xiàn)在的問題測(cè)試開發(fā)者有關(guān)JavaScript繼承和prototype的知識(shí)點(diǎn)勺远。這也驗(yàn)證了開發(fā)者是否知道該如何擴(kuò)展內(nèi)置對(duì)象(盡管這不應(yīng)該做的)。

這里的另一個(gè)要點(diǎn)是时鸵,你要知道如何不覆蓋可能已經(jīng)定義的功能胶逢。通過測(cè)試一下該功能定義之前并不存在:

String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};

當(dāng)你被要求做好JavaScript函數(shù)兼容時(shí)這種技術(shù)特別有用。

問題3:this在JavaScript中如何工作的

下面的代碼會(huì)輸出什么結(jié)果饰潜?給出你的答案初坠。

var fullname = 'John Doe';var obj = {   fullname: 'Colin Ihrig',   prop: {      fullname: 'Aurelio De Rosa',      getFullname: function() {         return this.fullname;      }   }};
console.log(obj.prop.getFullname()); var test = obj.prop.getFullname; console.log(test());

回答

答案是Aurelio De Rosa和John Doe。

原因是彭雾,在一個(gè)函數(shù)中碟刺,this的行為,取決于JavaScript函數(shù)的調(diào)用方式和定義方式薯酝,而不僅僅是看它如何被定義的南誊。

在第一個(gè) console.log()調(diào)用中,getFullname() 被調(diào)用作為obj.prop對(duì)象的函數(shù)蜜托。

所以抄囚,上下文指的是后者,函數(shù)返回該對(duì)象的fullname橄务。

與此相反幔托,當(dāng)getFullname()被分配到test變量時(shí),上下文指的是全局對(duì)象(window)。

這是因?yàn)閠est是被隱式設(shè)置為全局對(duì)象的屬性重挑。

出于這個(gè)原因嗓化,該函數(shù)返回window的fullname,即定義在第一行的那個(gè)值谬哀。

問題4:聲明提升(Hoisting)

執(zhí)行這段代碼刺覆,輸出什么結(jié)果。

function test() {   console.log(a);   console.log(foo());   var a = 1;   function foo() {      return 2;   }}
test();

回答

這段代碼的結(jié)果是 undefined 和 2史煎。

原因是谦屑,變量和函數(shù)的聲明都被提前了(移到了函數(shù)的頂部),但變量不分配任何值篇梭。因此氢橙,在打印變量的時(shí)候,它在函數(shù)中存在(它被聲明了)恬偷,但它仍然是 undefined 悍手。表示換句話說,上面的代碼等同于以下內(nèi)容:

function test() {   var a;   function foo() {      return 2;   }    console.log(a);   console.log(foo());       a = 1;} test();

問題5:call() 和 apply()

現(xiàn)在讓你解決前一個(gè)問題袍患,使最后的console.log() 打印 Aurelio De Rosa坦康。

回答

該問題可以通過強(qiáng)制使用 call() 或者 apply() 改變函數(shù)上下文。在下面我將使用call()诡延,但在這種情況下滞欠,apply()會(huì)輸出相同的結(jié)果:

console.log(test.call(obj.prop));

結(jié)論

在這篇文章中,我們已經(jīng)討論了用來測(cè)試JavaScript開發(fā)者的五個(gè)經(jīng)典問題孕暇。面試的概念和涵蓋的主題通常是非常相似的。如果你不知道的一些問題的答案赤兴,不必?fù)?dān)心:學(xué)習(xí)和經(jīng)驗(yàn)可以慢慢積累妖滔。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市桶良,隨后出現(xiàn)的幾起案子座舍,更是在濱河造成了極大的恐慌,老刑警劉巖陨帆,帶你破解...
    沈念sama閱讀 218,755評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件曲秉,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡疲牵,警方通過查閱死者的電腦和手機(jī)承二,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來纲爸,“玉大人亥鸠,你說我怎么就攤上這事。” “怎么了负蚊?”我有些...
    開封第一講書人閱讀 165,138評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵神妹,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我家妆,道長(zhǎng)鸵荠,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評(píng)論 1 295
  • 正文 為了忘掉前任伤极,我火速辦了婚禮蛹找,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘塑荒。我一直安慰自己熄赡,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評(píng)論 6 392
  • 文/花漫 我一把揭開白布齿税。 她就那樣靜靜地躺著彼硫,像睡著了一般。 火紅的嫁衣襯著肌膚如雪凌箕。 梳的紋絲不亂的頭發(fā)上拧篮,一...
    開封第一講書人閱讀 51,631評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音牵舱,去河邊找鬼串绩。 笑死,一個(gè)胖子當(dāng)著我的面吹牛芜壁,可吹牛的內(nèi)容都是我干的礁凡。 我是一名探鬼主播,決...
    沈念sama閱讀 40,362評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼慧妄,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼顷牌!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起塞淹,我...
    開封第一講書人閱讀 39,264評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤窟蓝,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后饱普,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體运挫,經(jīng)...
    沈念sama閱讀 45,724評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年套耕,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了谁帕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,040評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡冯袍,死狀恐怖雇卷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤关划,帶...
    沈念sama閱讀 35,742評(píng)論 5 346
  • 正文 年R本政府宣布小染,位于F島的核電站,受9級(jí)特大地震影響贮折,放射性物質(zhì)發(fā)生泄漏裤翩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評(píng)論 3 330
  • 文/蒙蒙 一调榄、第九天 我趴在偏房一處隱蔽的房頂上張望踊赠。 院中可真熱鬧,春花似錦每庆、人聲如沸筐带。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽伦籍。三九已至,卻和暖如春腮出,著一層夾襖步出監(jiān)牢的瞬間帖鸦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評(píng)論 1 270
  • 我被黑心中介騙來泰國打工胚嘲, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留作儿,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,247評(píng)論 3 371
  • 正文 我出身青樓馋劈,卻偏偏與公主長(zhǎng)得像攻锰,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子妓雾,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評(píng)論 2 355