JavaScript の面接でよくある 5 つの質問

IT の世界では、多数の JavaScript 開発者が必要です。あなたの能力を最大限に発揮できる役割であれば、会社を変えて給与を増やすチャンスもたくさんあります。しかし、企業に受け入れられる前に、面接プロセスに合格するために自分のスキルを証明する必要があります。この記事では、代表的な質問を 5 つ紹介します。

おすすめ関連記事: 2020年のjs面接の質問集(最新)

質問1: スコープ

次のコードについて考えてください:

(function() {
   var a = b = 5;
})();

console.log(b);

コンソールの表示内容?

答え

上記のコードは 5 を出力します。

この問題の落とし穴は、即時実行される関数式 (IIFE) に名前が 2 つあるのに、変数がキーワード var で宣言されていることです。これは、 a がこの関数のローカル変数であることを意味します。対照的に、b はこの関数に属するグローバル変数です。

この質問のもう 1 つの罠は、関数内で "strict mode" ('use strict';) を使用していないことです。厳密モードがオンになっている場合、コードは Uncaught ReferenceError: b が定義されていないことを報告します。厳密モードの要件に注意してください。これが予期される動作である場合は、グローバル変数を明示的に参照する必要があります。したがって、次のように記述する必要があります:

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

console.log(b);

質問 2: 「ネイティブ」メソッドを作成します

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 の継承とプロトタイプ プロパティを把握しているかどうかをテストします。これにより、開発者がネイティブ データ型関数を拡張できることも検証されます (ただし、そうすべきではありません)。

ここでのもう 1 つの重要な点は、既に定義されている関数をオーバーライドせずにそれを行う方法を理解していることを示すことです。これには、関数をカスタマイズする前に、その関数が存在しないことを確認する必要があります。

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

このトリックは、JavaScript 関数を shim するように求められた場合に役立ちます。

質問 3: ホイスティング

次のコードを実行すると結果はどうなりますか?なぜこうなった？

function test() {
   console.log(a);
   console.log(foo());

   var a = 1;
   function foo() {
      return 2;
   }
}

test();

回答

このコードの実行結果は未定義であり、 2 です。

この結果の理由は、変数と関数の両方がホイストされているためです。したがって、 a が出力された時点では、それは関数内に存在していました (つまり、宣言されていました) が、まだ未定義でした。つまり、上のコードと下のコードは同じです。

function test() {
   var a;
   function foo() {
      return 2;
   }

   console.log(a);
   console.log(foo());

   a = 1;
}

test();

質問 4: これは 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() 呼び出しでは、obj.prop の関数として getFullname() が呼び出されます。したがって、ここでのコンテキストは後者を指し、関数はオブジェクトの fullname プロパティを返します。対照的に、 getFullname() が test の変数として指定されている場合、そのコンテキストはグローバル オブジェクト (ウィンドウ) を指します。なぜなら、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 をテストするために、開発者は 5 つの質問について説明しました。典型的な質問。インタビューでの実際の質問は異なる場合がありますが、扱われる概念とトピックは通常非常に似ています。自分の能力を試して楽しんでいただければ幸いです。すべての答えが分からなくても、心配しないでください。学習と経験がなければ解決できないことは何もありません。

面接中に他にも興味深い質問をされた場合は、遠慮せずに共有してください。これは多くの開発者に役立ちます。

関連する学習に関する推奨事項: JavaScript ビデオチュートリアル