在IT界,需要大量的javascript開發者。如果這個角色能夠最佳地展現你的能力,那麼你有許多機會換家公司,以及提高薪水。但是在你被公司錄取之前,你需要展現你的技術,以便通過面試環節。在這篇文章中,我會展示你五個典型的問題,關注我,每天更新js面試知識。
問題1: 範圍(Scope)
思考以下代碼:
(function() {
var a = b = 5;
})();
console.log(b);
控制檯(console)會打印出什麼?
答案
上述代碼會打印出5。
這個問題的陷阱就是,在立即執行函數表達式(IIFE)中,有兩個命名,但是其中變量是通過關鍵詞var來聲明的。這就意味著a是這個函數的本地變量。與此相反,b是屬於這個函數的全局變量的。
這個問題另一個陷阱就是,在函數中他沒有使用"嚴格模式" ('use strict';)。如果 嚴格模式開啟,那麼代碼就會報出未捕獲引用錯誤(Uncaught ReferenceError):b沒有定義。記住嚴格模式要求,如果這個是預期的行為,你需要明確地引用全局變量,。因此,你需要像下面這麼寫:
(function() {
'use strict';
var a = window.b = 5;
})();
console.log(b);
問題2: 創建 “原生(native)” 方法
在String對象上定義一個repeatify函數。這個函數接受一個整數參數,來明確字符串需要重複幾次。這個函數要求字符串重複指定的次數。舉個例子:
``console.log('hello'.repeatify(3));``
應該打印出hellohellohello.
答案
一種可能的實現如下所示:
String.prototype.repeatify = String.prototype.repeatify || function(times) {
var str = '';
for (var i = 0; i < times; i++) {
str += this;
}
return str;
};
這個問題測試了開發人員對於javascript中繼承的掌握,以及prototype這個屬性。這也驗證了開發人員是否有能力擴展原生數據類型函數(雖然不應該這麼做)。
在這裡,另一種重點是,展示你意識到如何在不重寫可能已經定義的函數。這個需要在自定義函數之前判斷函數不存在。
``String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */};``
當你被要求一個墊片javascript函數時,這個技巧十分有用。
問題3: 提升變量(Hoisting)
執行以下代碼會有什麼結果?為什麼會這樣?
function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();
答案
這段代碼的執行結果是undefined 和 2。
這個結果的原因是,變量和函數都被提升了(hoisted)。因此,那個時候a被打印了,它存在函數之中(也就是聲明瞭),但是依然是 undefined。換言之,上述代碼和以下代碼是相同的。
function test() {
var a;
function foo() {
return 2;
}
console.log(a);
console.log(foo());
a = 1;
}
test();
問題4: this在javascript中是如何工作的
以下代碼的結果是什麼?請解釋你的答案。
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。原因是在javascript中,一個函數的語境,也就是this這個關鍵詞引用的,依賴於函數是如何調用的,不是如何定義的。
在第一個console.log()調用中, getFullname()是作為obj.prop的函數被調用的。因此,這裡的語境指向後者並且函數返回對象的 fullname屬性。相反,當 getFullname()被指定為test的變量,那個語境指向全局對象(window)。因為test相當於設置為全局對象的屬性。因為這個原因,函數返回window的一個fullname屬性,這在這個案例中是在代碼片段中第一行設置的。
問題5: call() 和 apply()
修復上一個問題,讓最後一個console.log()打印出 Aurelio De Rosa。
答案
這個問題可以通過函數call()或者apply()強制函數語境。如果你不知道call()和apply()之間的區別,我推薦閱讀文章function.call和function.apply之間有和區別?。在以下代碼中,我會用call(),但是在這個案例中,apply()也可以獲得相同的結果:
``console.log(test.call(obj.prop));``
結論
在這篇文章中,我們討論了,在面試中為了測試javascript開發者,而會問到的五種典型的問題。來自面試的真實問題可能會有所不同,但是涵蓋的概念和主題通常都是十分相似的。我希望你愉悅地測試你的能力。萬一你不知道所有的答案,不要擔心:沒有學習和經驗不能解決的問題。
閱讀更多 普託邦大博士 的文章
關鍵字: 小白逆襲 技術 JavaScript