7 interessante Interviewfragen zu „diesem' in JavaScript. Können Sie sie alle richtig beantworten?

Verwandte Empfehlungen: Zusammenfassung der großen Front-End-Interviewfragen 2021 (Sammlung)

In JavaScript ist this der Funktionsaufrufkontext. Gerade weil das Verhalten von this komplex ist, werden in JavaScript-Interviews immer Fragen zu this gestellt. this 是函数调用上下文。正是由于 this 的行为很复杂，所以在 JavaScript 面试中，总是会问到有关  this 的问题。

做好的准备面试的方法是练习，所以本文针对 this 关键字整理了 7 个有趣的面试：

注意：下面的 JavaScript 代码段以非严格模式运行。

目录：

• 问题1：变量 vs 属性

• 问题2：Cat 的名字

• 问题3：延迟输出

• 问题4：补全代码

• 问题5：问候与告别

• 问题6：棘手的 length

• 问题7：调用参数

相关教程推荐：javascript视频教程

问题1：变量 vs 属性

以下代码会输出什么：

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：Cat 的名字

以下代码会输出什么：

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 等于外部作用域中的 this ，也就是构造函数 Pet。

调用 cat.getName() 和 getName() 会返回表达式 this.name，其计算结果为 'Fluffy'。

问题3：延迟输出

以下代码输出什么：

const object = {
  message: 'Hello, World!',

  logMessage() {
    console.log(this.message); // 输出什么？？
  }
};

setTimeout(object.logMessage, 1000);

答案：

延迟1秒钟后，输出：undefined

尽管  setTimeout() 函数使用 object.logMessage 作为回调，但仍把 object.logMessage 作为常规函数而非方法调用。

在常规函数调用期间， this 等于全局对象，即浏览器环境中是 window。

这就是为什么 logMessage 方法内的 console.log(this.message) 输出 window.message ，即 undefined。

问题4：补全代码

如何调用logMessage函数，让它输出 "Hello，World!" 。

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 = {
  who: 'World',

  greet() {
    return `Hello, ${this.who}!`;
  },

  farewell: () => {
    return `Goodbye, ${this.who}!`;
  }
};

console.log(object.greet());    // 输出什么？？
console.log(object.farewell()); // 输出什么？？

答案：

输出： 'Hello, World!' 和 'Goodbye, undefined!'

当调用object.greet()时，在greet()方法内部，this值等于 object，因为greet是一个常规函数。因此object.greet()返回'Hello, World!'。

但是farewell()是一个箭头函数，箭头函数中的this值总是等于外部作用域中的this值。

farewell() 的外部作用域是全局作用域，其中 this 是全局对象。因此 object.farewell() 实际上会返回 'Goodbye, ${window.who}!' ，它的结果为 'Goodbye, undefined!'。

问题6：棘手的 length

以下代码会输出什么：

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()  函数中 this.length 结果为 window.length

Der beste Weg, sich auf ein Vorstellungsgespräch vorzubereiten, ist zu üben. Deshalb hat dieser Artikel 7 interessante Interviews basierend auf dem Schlüsselwort this zusammengestellt: 🎜🎜Hinweis: Das folgende JavaScript-Code-Snippet läuft im nicht-strikten Modus . 🎜🎜🎜Verzeichnis: 🎜🎜

• 🎜Frage 1: Variablen vs. Eigenschaften 🎜
• 🎜Frage 2 ：Name der Katze🎜
• 🎜Frage 3: Verzögerte Ausgabe🎜
• 🎜Frage 4: Vollständiger Code🎜
• 🎜Frage 5: Grüße und Abschied🎜
• 🎜Frage 6: Knifflige Länge🎜
• 🎜Frage 7: Aufrufparameter🎜

🎜🎜Verwandte Tutorial-Empfehlungen: Javascript-Video-Tutorial🎜🎜

Frage 1: Variablen vs. Attribute 🎜Was wird der folgende Code ausgeben:🎜

var length = 4;
function callback() {
  console.log(this.length); // 输出什么？？
}

const object = {
  length: 5,
  method() {
    arguments[0]();
  }
};

object.method(callback, 1, 2);

Antwort:

🎜Ausgabe: 'Hello, World!'🎜🎜object .getMessage () ist ein Methodenaufruf, weshalb this in der Methode gleich object ist. 🎜🎜Es gibt auch eine Variablendeklaration const message ='Hello, Earth!' in der Methode, aber diese Variable hat keinen Einfluss auf den Wert von this.message. 🎜

Frage 2: Name der Katze🎜

🎜Was wird der folgende Code ausgeben: 🎜

{
  0: callback,
  1: 1, 
  2: 2, 
  length: 3 
}

Antwort:

🎜Ausgabe: 'Fluffy' und 'Fluffy'🎜🎜Wenn eine Funktion als Konstruktor aufgerufen wird ( new Pet('Fluffy') ), this im Konstruktor ist gleich dem konstruierten Objekt. 🎜🎜Der Ausdruck this.name = name im Pet-Konstruktor erstellt die Eigenschaft name für das konstruierte Objekt. 🎜🎜this.getName = () => this.name Erstellen Sie die Methode getName für das konstruierte Objekt. Und aufgrund der Verwendung von Pfeilfunktionen ist this in der Pfeilfunktion gleich this im äußeren Bereich, der der Konstruktor Pet ist. 🎜🎜Der Aufruf von cat.getName() und getName() gibt den Ausdruck this.name zurück, der zu 'Fluffy' ausgewertet wird. . 🎜

Frage 3: Verzögerte Ausgabe🎜

🎜Was bewirkt die folgende Codeausgabe: 🎜rrreee

Antwort:

🎜1 Sekunde Verzögerung Anschließend Ausgabe: undefiniert🎜🎜Obwohl die Funktion setTimeout() object.logMessage als Rückruf verwendet, verwendet sie weiterhin object .logMessage wird als reguläre Funktion und nicht als Methode aufgerufen. 🎜🎜Während eines regulären Funktionsaufrufs entspricht <em>this</em> dem globalen Objekt, das in der Browserumgebung <code>window ist. 🎜🎜Aus diesem Grund gibt console.log(this.message) in der Methode logMessage window.message aus, also undefiniert code>. 🎜<h2 id="strong-Frage-Vervollständigen-Sie-den-Code-strong"><strong>Frage 4: Vervollständigen Sie den Code</strong></h2>🎜So rufen Sie die logMessage-Funktion auf, damit sie <code>"Hello, World!" ausgibt. 🎜rrreee

Antwort:

🎜Es gibt mindestens drei Möglichkeiten, dies zu tun: 🎜rrreee

Frage 5: Grüße und Abschied

🎜Was wird der folgende Code ausgeben:🎜rrreee

Antwort:

🎜Ausgabe: 'Hello, World!' und 'Goodbye, undefiniert !'🎜🎜Beim Aufruf von object.greet() innerhalb der Methode greet() ist der Wert this gleich widersprechen, weil greet eine reguläre Funktion ist. Daher gibt object.greet() 'Hello, World!' zurück. 🎜🎜Aber farewell() ist eine Pfeilfunktion, und der this-Wert in der Pfeilfunktion ist immer gleich dem this-Wert im äußeren Umfang. 🎜🎜Der äußere Bereich von farewell() ist der globale Bereich, wobei this das globale Objekt ist. object.farewell() gibt also tatsächlich 'Goodbye, ${window.who}!' zurück, was zu 'Goodbye, undefiniert!' führt . 🎜<h2 id="strong-Frage-Die-knifflige-Länge-strong"><strong>Frage 6: Die knifflige Länge</strong></h2>🎜Was wird der folgende Code ausgeben: 🎜rrreee<h4 id="strong-Antwort-strong"><strong>Antwort: </strong></h4>🎜Ausgabe: 4🎜🎜callback() wird mit einem regulären Funktionsaufruf innerhalb von method() aufgerufen. Da der Wert von this während eines regulären Funktionsaufrufs gleich dem globalen Objekt ist, führt this.length in der Funktion callback() zu window .length. 🎜

第一个语句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。

总结

如果你答对了 5 个以上，那么你对 this 关键字掌握的情况是很不错的。否则，你就需要好好复习一下 this 关键字。

本文翻译于：https://dmitripavlutin.com/javascript-this-interview-questions/

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt von7 interessante Interviewfragen zu „diesem' in JavaScript. Können Sie sie alle richtig beantworten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!