JavaScript の面接でよくある 5 つの質問_JavaScript スキル

1: スコープ

コードをコピーします コードは次のとおりです:

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

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

答え

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

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

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

コードをコピー コードは次のとおりです:

(関数() {
'厳密な使用';
var a = window.b = 5;
})();

console.log(b);

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

文字列オブジェクトのrepeatify関数を定義します。整数 n で渡されると、文字列を n 回繰り返した結果が返されます。例:

コードをコピー コードは次のとおりです:

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

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

答え

可能な実装は次のようになります:

コードをコピー コードは次のとおりです:

String.prototype.repeatify = String.prototype.repeatify 関数(回) {
var str = '';
for (var i = 0; i str = this;
}
戻り値 str;
};

現在の問題では、JavaScript の継承とプロトタイプに関する開発者の知識がテストされます。これにより、開発者が組み込みオブジェクトを拡張する方法を (拡張すべきではない場合でも) 知っていることも検証されます。

ここでもう 1 つ重要な点は、既に定義されている機能をオーバーライドしない方法を知っておく必要があるということです。関数定義が以前に存在しなかったことをテストします:

コードをコピーします コードは次のとおりです:

String.prototype.repeatify = String.prototype.repeatify || 関数(回) {/* ここにコード */};

このテクニックは、JavaScript 関数に互換性を持たせるように求められる場合に特に役立ちます。

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

このコードを実行すると、どのような結果が出力されますか。

コードをコピー コードは次のとおりです:

関数 test() {
console.log(a);
console.log(foo());
var a = 1;
関数 foo() {
2 を返します;
}
}

10: テスト();

答え

このコードの結果は未定義で 2 です。

その理由は、変数と関数の宣言が前方に移動 (関数の先頭に移動) されますが、変数には値が代入されないためです。したがって、変数を出力するとき、変数は関数内に存在します (宣言されています) が、まだ未定義です。つまり、上記のコードは次のコードと等価です:

コードをコピー コードは次のとおりです:

関数 test() {
var a;
関数 foo() {
2 を返します;
}

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

a = 1;
}

テスト();

4: JavaScript での動作

次のコードは何を出力しますか?答えてください。

コードをコピー コードは次のとおりです:

var fullname = 'ジョン・ドゥ';
var obj = {
フルネーム: 'Colin Ihrig'、
; 小道具: {
フルネーム: 'アウレリオ デ ローザ'、
getFullname: function() {
return this.fullname;
}
}
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

答え

答えはアウレリオ・デ・ローザとジョン・ドゥです。その理由は、関数内での動作は、JavaScript 関数の定義方法だけでなく、呼び出し方法と定義方法に依存するためです。

最初の console.log() 呼び出しでは、obj.prop オブジェクトの関数として getFullname() が呼び出されます。したがって、コンテキストは後者を参照し、関数はオブジェクトのフルネームを返します。対照的に、getFullname() がテスト変数に割り当てられている場合、コンテキストはグローバル オブジェクト (ウィンドウ) を参照します。これは、test がグローバル オブジェクトのプロパティとして暗黙的に設定されるためです。このため、関数はウィンドウの完全名を返します。これは最初の行で定義された値です。

5: call() と apply()

ここで、最後の console.log() で Aurelio De Rosa が出力されるように、前の問題を解決しましょう。

答え

この問題は、call() または apply() を強制的に使用して関数コンテキストを変更することで変更できます。以下では call() を使用しますが、この場合 apply() は同じ結果を出力します:

コードをコピー コードは次のとおりです:

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