フロントエンドの面接でよくある 5 つの質問

JavaScript開発者は、ITの世界では常に高い需要があります。神の言語に非常に堪能であれば、転職して給料を増やす機会がたくさんあるでしょう。しかし、企業があなたを雇用する前に、面接に合格し、あなたのスキルを証明する必要があります。この記事では、候補者の JavaScript スキルと問題解決能力をテストするための 5 フロントエンド関連の質問を紹介します。とても楽しいことになるよ！

質問1: スコープスコープ

次のコードを考えてみましょう:

(function() {

var a = b = 5;

})();

console.log(b);

コンソールには何が出力されますか?

答え

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

この問題のコツは、ここには 2 つの変数宣言がありますが、 a はキーワード var を使用して宣言されているということです。関数のローカル変数であることを示します。対照的に、 b はグローバル変数になります。

この質問のもう 1 つのトリックは、厳密モード ('厳密な使用';) を使用していないことです。厳密モードが有効な場合、コードは ReferenceError エラー: B が定義されていません (b が定義されていません) を発生させます。厳密モードでは、グローバル変数宣言を実装するために明示的な指定が必要であることに注意してください。たとえば、次のように記述する必要があります:

(function() {

'use strict';

var a = window.b = 5;

})();

console.log(b);

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

を定義します 文字列オブジェクトの場合機能。整数nを渡すと、文字列をn回繰り返した結果を返します。例:

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

は

hellohellohello を出力する必要があります。

答え

考えられる実装は次のようになります:

String.prototype.repeatify = String.prototype.repeatify function(times) {

var str = '';

for (var i = 0; i str += this;

}

return str;

};

の質問では、

JavaScript継承とプロトタイプに関する開発者の知識をテストします。これにより、開発者が組み込みオブジェクトを拡張する方法を (拡張すべきではない場合でも) 知っていることも検証されます。 ここでのもう 1 つの重要な点は、既に定義されている可能性のある関数をオーバーライドしない方法を知る必要があるということです。関数定義が以前に存在しないかどうかをテストします:

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

このテクニックは、優れた

JavaScript 関数に互換性がある場合に特に役立ちます。 質問

3: ステートメントのホイスティング (ホイスティング)

このコードを実行すると、何が出力されますか? OnFunction テスト () {

console.log (foo ());

function foo ()

このコードの結果は

未定義

です。 と

2

。

その理由は、変数や関数の宣言が前方に移動（関数の先頭に移動）されますが、変数には値が代入されていないためです。したがって、変数を出力するとき、変数は関数内に存在します (宣言されています) が、まだ

未定義

です。つまり、上記のコードは次と同等です:

function test() {

var a;

function foo() {

return 2;

} console.log(a);

console.log(foo());

a = 1;

}

テスト();

質問

4

:

this

は

JavaScript

でどのように動作しますか? 次のコードの出力は何になりますか?答えてください。

var fullname = 'John Doe';

var obj = {

fullname: 'Colin Ihrig',

prop: {

Aurelio De Rosa', getFullname: function() console.log(obj.prop .getFullname());

。

var test = obj.prop.getFullname;

console.log(test());

answer

Answer アウレリオ・デ・ローザ

とジョン・ドゥ

です。その理由は、関数内での this

の動作は、JavaScript

関数の定義方法だけでなく、その関数の呼び出し方法と定義方法に依存するためです。

最初の console.log()

呼び出しでは、getFullname()

が obj.prop

オブジェクトの関数として呼び出されます。したがって、コンテキストは後者を参照し、関数はオブジェクトのフルネーム

を返します。対照的に、getFullname()

が test

変数に割り当てられている場合、コンテキストはグローバル オブジェクト (window

) を参照します。これは、test

がグローバルオブジェクトのプロパティとして暗黙的に設定されているためです。このため、この関数は、最初の行で定義された値である window の fullname を返します。 質問5: call()

と apply()

ここで、前の問題を解決して、最終的な console.log() print Aurelio De Rosa を作成しましょう。

回答

この質問は、 call() または apply() の使用を強制することで変更できます。以下では call() を使用しますが、この場合 apply() は同じ結果を出力します:

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

結論

この記事では、JavaScript開発者をテストするために使用される5つの古典的な質問について説明しました。インタビューで取り上げられるコンセプトやトピックは通常、非常に似ています。いくつかの質問に対する答えがわからなくても、心配する必要はありません。学習と経験はゆっくりと身につくものです。

他にも興味深い質問がございましたら、遠慮なく共有してください。それは多くの開発者を助けるでしょう。

無料で入手LAMPBand of BrothersオリジナルPHPビデオチュートリアルCD/《 詳細PHP》簡易バージョン、詳細については、公式 Web サイトのカスタマー サービスを参照してください:

http://www.lampbrother.net

PHPCMS二次開発http://yun.itxdl.cn/online/ phpcms/index.php? u=5

WeChat開発http://yun.itxdl.cn/online/weixin/index.php?u=5

モバイルインターネットサーバー-サイド開発 http://yun.itxdl.cn/online/server/index.php?u=5

Javascriptコースhttp://yun.itxdl .cn/online/js/index.php?u=5

CTOトレーニングキャンプhttp://yun.itxdl.cn/online/cto/index.php?u=5

上記では、関連するコンテンツも含めて、フロントエンドの面接での典型的な質問 5 つを紹介しました。PHP チュートリアルに興味のある友人に役立つことを願っています。