JSに関する7つの面接の質問、あなたはいくつ正しく答えられますか

序文

JavaScript では、これは関数呼び出しコンテキストです。この動作が非常に複雑であるからこそ、JavaScript の面接では必ずこれに関する質問がされます。

面接に備える最良の方法は練習することです。そこでこの記事では、このキーワードに関する興味深いインタビューを 7 つまとめました。

注: 次の JavaScript コードは非厳密モードで実行されます。

1: 変数とプロパティ

次のコードの出力は何でしょうか?

定数オブジェクト = {
 メッセージ: 'Hello, World!',

 取得メッセージ() {
 const message = 'こんにちは、地球！';
 this.message を返します。
 }
};

console.log(object.getMessage()); // => ?

答え：

出力: 'Hello, World!'

object.getMessage() はメソッド呼び出しなので、メソッド内の this は object と等しくなります。

メソッドには変数宣言 const message = 'Hello, Earth!' もありますが、これは this.message の値には影響しません。

2: 猫の名前

次のコードの出力は何でしょうか?

関数 Pet(名前) {
 this.name = 名前;

 this.getName = () => this.name;
}

const cat = new Pet('Fluffy');

console.log(cat.getName()); // => ?

const { getName } = cat;
console.log(getName()); // =>?

答え：

出力: 「ふわふわ」と「ふわふわ」

関数がコンストラクターとして呼び出されると ( new Pet('Fluffy') )、コンストラクター内の this は構築されたオブジェクトと等しくなります。

Pet コンストラクターの this.name = name 式は、構築されたオブジェクトに name プロパティを作成します。

this.getName = () => this.name this.getName = () => this.name 構築されたオブジェクトに getName メソッドを作成します。矢印関数が使用されているため、矢印関数内の this は、コンストラクター Pet である外部スコープ内の this と等しくなります。

cat.getName() と getName() を呼び出すと、式 this.name が返され、これは 'Fluffy' と評価されます。

3: 遅延出力

次のコードの出力は何でしょうか?

定数オブジェクト = {
 メッセージ: 'Hello, World!',

 ログメッセージ() {
 console.log(this.message); // => ?
 }
};

タイムアウトを設定します(object.logMessage、1000);

答え：

1秒の遅延後、出力: undefined

setTimeout() 関数は object.logMessage をコールバックとして使用しますが、メソッドではなく通常の関数として object.logMessage を呼び出します。通常の関数呼び出しでは、これはグローバルオブジェクト (ブラウザー環境では window) と等しくなります。そのため、logMessage メソッド内の console.log(this.message) は、未定義の window.message を出力します。

課題: このコードを変更して「Hello, World!」を出力するにはどうすればよいでしょうか?解決策を以下のコメント欄に書いてください*

4: コードを完成させる

出力が「Hello, World!」となるようにコードを完成させます。

定数オブジェクト = {
 メッセージ: 'Hello, World!'
};

関数logMessage() {
 console.log(this.message); // => "Hello, World!"
}

// ここにコードを記述します...

答え：

オブジェクトのメソッドとして logMessage() を呼び出す方法は少なくとも 3 つあります。いずれも正解とみなされます:

定数オブジェクト = {
 メッセージ: 'Hello, World!'
};

関数logMessage() {
 console.log(this.message); // => 'Hello, World!'
}

// func.call() メソッドを使用する logMessage.call(object);

// func.apply() メソッドを使用する logMessage.apply(object);

// 関数バインディングを使用します const boundLogMessage = logMessage.bind(object);
バウンドログメッセージ();

5. 挨拶と別れ

次のコードの出力は何でしょうか?

定数オブジェクト = {
 誰: '世界'、

 挨拶する（） {
 `Hello, ${this.who}!` を返します。
 },

 さようなら: () => {
 `さようなら、${this.who}!` を返します。
 }
};

console.log(object.greet()); // => ?
console.log(object.farewell()); // => ?

答え：

出力: 'Hello, World!' および 'Goodbye, undefined!'

object.greet() が呼び出されると、greet は通常の関数であるため、greet() メソッド内の this の値は object と等しくなります。したがって、object.greet() は 'Hello, World! ' を返します。 '。

しかし、 farewell() はアロー関数なので、アロー関数内の this の値は常に外側のスコープの this と等しくなります。 farewell() の外側のスコープはグローバルスコープであり、this はグローバルオブジェクトです。したがって、object.farewell() は実際には「Goodbye, ${window.who}!」を返し、これは「Goodbye, undefined!」と評価されます。

6: トリッキーな長さ

次のコードの出力は何でしょうか?

var 長さ = 4;
関数コールバック() {
 console.log(this.length); // => ?
}

定数オブジェクト = {
 長さ: 5,
 メソッド(コールバック) {
 折り返し電話（）;
 }
};

オブジェクト.メソッド(コールバック、1、2);

答え：

出力: 4

method() 内で通常の関数呼び出しを使用して callback() を呼び出します。通常の関数呼び出し中の this の値はグローバルオブジェクトと等しいため、callback() 関数内では this.length は window.length になります。

最も外側のレベルの最初のステートメント var length = 4 は、グローバルオブジェクトにプロパティ length を作成するため、window.length は 4 になります。

最後に、callback() 関数内では、this.length の値は window.length となり、4 が出力されます。

7: 呼び出しパラメータ

次のコードの出力は何でしょうか?

var 長さ = 4;
関数コールバック() {
 console.log(this.length); // 出力 }

定数オブジェクト = {
 長さ: 5,
 方法（） {
 引数[0]();
 }
};

オブジェクト.メソッド(コールバック、1、2);

答え：

出力: 3

obj.method(callback, 1, 2) は、callback、1、2 の 3 つの引数で呼び出されます。結果の method() 内の arguments 特殊変数は、次の構造を持つ配列のようなオブジェクトです。

{
 0: コールバック、
 1: 1、 
 22、 
 長さ: 3 
}

arguments[0]() は arguments オブジェクトのコールバックのメソッド呼び出しなので、コールバック内の this は arguments と等しくなります。その結果、callback() 内の this.length と arguments.length は同じになり、両方とも 3 になります。