JavaScript の「これ」に関する 7 つの興味深い面接の質問、すべて正しく答えることができますか?
Mar 25, 2021 am 10:18 AM関連する推奨事項: 2021 年のフロントエンド面接での大きな質問の概要 (コレクション)
JavaScript では、 this
は関数呼び出しコンテキストです。 this
の動作は複雑であるため、JavaScript の面接では常に this
に関する質問が行われます。
面接に備える最善の方法は練習することです。そのため、この記事では this
キーワードに関する 7 つの興味深いインタビューをまとめました:
注: 次の JavaScript コード スニペットは始まります。非厳密モードで実行します。
ディレクトリ:
質問 1: 変数と属性
質問 2: 猫の名前
質問 3: 遅延出力
質問 4: 完全なコード
質問 5: 挨拶と別れ
質問 6: 難しい長さ
質問 7: パラメーターの呼び出し
関連チュートリアルの推奨事項: javascript ビデオ チュートリアル
質問 1: 変数と属性
次のコードが出力されます。内容:
const object = { message: 'Hello, World!', getMessage() { const message = 'Hello, Earth!'; return this.message; }}; console.log(object.getMessage()); // 输出什么??
答え:
出力: 'Hello, World!'
object.getMessage( )
はメソッド呼び出しです。そのため、メソッド内の this
は object
と同等です。
メソッド const message ='Hello, Earth!'
にも変数宣言がありますが、この変数は this.message
の値には影響しません。
#質問 2: 猫の名前
次のコードは何を出力しますか:
function Pet(name) { this.name = name; this.getName = () => this.name; } const cat = new Pet('Fluffy'); console.log(cat.getName()); // 输出什么?? const { getName } = cat; console.log(getName()); // 输出什么??
答え:
出力:'Fluffy' および
'Fluffy'
new Pet('Fluffy ') )、コンストラクター内の
this は、構築されたオブジェクトと同等です。
Pet コンストラクター内の
this.name = name 式は、構築されたオブジェクトに
name プロパティを作成します。
this.getName = () => this.name 構築されたオブジェクトにメソッド
getName を作成します。また、アロー関数を使用しているため、アロー関数の
this は、外側のスコープ (コンストラクター Pet) の
this と等しくなります。
cat.getName() および
getName() を呼び出すと、式
this.name が返され、これは
' Fluffy として評価されます。 「。
次のコードは何を出力しますか:
const object = { message: 'Hello, World!', logMessage() { console.log(this.message); // 输出什么?? } }; setTimeout(object.logMessage, 1000);
1 秒の遅延後、出力:
unknown 関数は object.logMessage
をコールバック、それはまだ object.logMessage
メソッドではなく通常の関数として呼び出されます。 通常の関数呼び出し中、
はグローバル オブジェクト (ブラウザ環境では window) と等しくなります。 これが、
メソッドの console.log(this.message)
が window.message
を出力する理由であり、これは 未定義です###。
質問 4: コード
「Hello, World!」 を出力するように logMessage 関数を呼び出す方法のコードを完成させてください。
const object = { message: 'Hello, World!' }; function logMessage() { console.log(this.message); // => "Hello, World!" } // 把你的代码写在这里.....
答え:
少なくとも 3 つの方法があります: const object = {
message: 'Hello, World!'
};
function logMessage() {
console.log(this.message); // => 'Hello, World!'
}
// 使用 func.call() 方法
logMessage.call(object);
// 使用 func.apply() 方法
logMessage.apply(object);
// 使用函数绑定
const boundLogMessage = logMessage.bind(object);
boundLogMessage();
ログイン後にコピー
質問 5: 挨拶と別れconst object = { message: 'Hello, World!' }; function logMessage() { console.log(this.message); // => 'Hello, World!' } // 使用 func.call() 方法 logMessage.call(object); // 使用 func.apply() 方法 logMessage.apply(object); // 使用函数绑定 const boundLogMessage = logMessage.bind(object); boundLogMessage();
次のコードは何を出力しますか: const object = {
who: 'World',
greet() {
return `Hello, ${this.who}!`;
},
farewell: () => {
return `Goodbye, ${this.who}!`;
}
};
console.log(object.greet()); // 输出什么??
console.log(object.farewell()); // 输出什么??
ログイン後にコピー
答え:
const object = { who: 'World', greet() { return `Hello, ${this.who}!`; }, farewell: () => { return `Goodbye, ${this.who}!`; } }; console.log(object.greet()); // 输出什么?? console.log(object.farewell()); // 输出什么??
出力: 'Hello, World!' および
「さようなら、未定義です!」object.greet()
を呼び出すとき、
メソッド内で、this
greet
は通常の関数であるため、値は object と等しくなります。したがって、object.greet()
は 'Hello, World!'
を返します。 ただし、
farewell()
はアロー関数であり、アロー関数の
値は常に、外側のスコープ。 farewell()
の外側のスコープはグローバル スコープであり、this
はグローバル オブジェクトです。したがって、
は実際には 'Goodbye, ${window.who}!'
を返し、結果は 'Goodbye, unknown!'
となります。 #質問 6: トリッキーな長さ
次のコードは何を出力しますか:
var length = 4; function callback() { console.log(this.length); // 输出什么?? } const object = { length: 5, method(callback) { callback(); } }; object.method(callback, 1, 2);
答え:
出力:4
callback()
は、method() 内の通常の関数呼び出しを使用して呼び出されます。通常の関数呼び出し中の
this
callback() 第一个语句 最后,在 以下代码会输出什么: 输出: 因为 如果你答对了 5 个以上,那么你对 本文翻译于:https://dmitripavlutin.com/javascript-this-interview-questions/ 更多编程相关知识,请访问:编程视频!! 関数の
this.length は
window になります。長さ# ##。 var length = 4
,处于最外层的作用域,在全局对象上创建了属性 length
,所以 window.length
变为 4
。callback()
函数内部,`this.length
的值为 window.length
,最后输出 4
。问题7:调用参数
var length = 4;
function callback() {
console.log(this.length); // 输出什么??
}
const object = {
length: 5,
method() {
arguments[0]();
}
};
object.method(callback, 1, 2);
答案:
3
obj.method(callback, 1, 2)
被调用时有3
个参数:callback
、1
和 2
。结果, method()
内部的arguments
特殊变量是有如下结构的数组类对象:{
0: callback,
1: 1,
2: 2,
length: 3
}
arguments[0]()
是 arguments
对象上 callback
的方法调用,所以 callback
内部的 this
等于 arguments
。所以 callback()
内部的 this.length
与 arguments.length
的结果是相同的,都是3
。总结
this
关键字掌握的情况是很不错的。否则,你就需要好好复习一下 this
关键字。
以上がJavaScript の「これ」に関する 7 つの興味深い面接の質問、すべて正しく答えることができますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











WebSocket と JavaScript を使用してオンライン音声認識システムを実装する方法

WebSocket と JavaScript: リアルタイム監視システムを実装するための主要テクノロジー

WebSocketとJavaScriptを使ったオンライン予約システムの実装方法

JavaScript と WebSocket を使用してリアルタイムのオンライン注文システムを実装する方法

簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法

JavaScript と WebSocket: 効率的なリアルタイム天気予報システムの構築

JavaScript で HTTP ステータス コードを簡単に取得する方法
