首頁 > web前端 > js教程 > 五個典型的javascript面試題

五個典型的javascript面試題

黄舟
發布: 2020-07-30 15:50:27
原創
6338 人瀏覽過

在IT界,需要大量的javascript開發者。如果這個角色能夠最佳地展現你的能力,那麼你有許多機會換家公司,以及提高薪水。但是在你被公司錄取之前,你需要展現你的技術,以便通過面試環節。在這篇文章中,我會展示你五個典型的問題。

推薦相關文章2020年最全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 = &#39;John Doe&#39;;
var obj = {
   fullname: &#39;Colin Ihrig&#39;,
   prop: {
      fullname: &#39;Aurelio De Rosa&#39;,
      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影片教學

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板