7 interesting interview questions about 'this' in JavaScript, can you answer them all correctly?

Related recommendations: 2021 Big Front-End Interview Questions Summary (Collection)

In JavaScript, this is the function calling context. It is precisely because the behavior of this is complicated that questions about this are always asked in JavaScript interviews.

The best way to prepare for an interview is to practice, so this article has compiled 7 interesting interviews for this keywords:

Note: The following JavaScript code snippet begins with Run in non-strict mode.

Directory:

• Question 1: Variables vs Attributes

• Question 2: Cat’s name

• Question 3: Delayed output

• Question 4: Complete code

• Question 5: Greetings and Farewells

• Question 6: The tricky length

• Question 7: Calling parameters

Related tutorial recommendations: javascript video tutorial

Question 1: Variables vs attributes

The following code will be output What:

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

  getMessage() {
    const message = 'Hello, Earth!';
    return this.message;
  }};

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

Answer:

Output: 'Hello, World!'

object.getMessage( ) is a method call, that's why this in the method is equal to object.

There is also a variable declaration in the method const message ='Hello, Earth!', but this variable will not affect the value of this.message.

Question 2: Cat’s name

What will the following code output:

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());     // 输出什么？？

Answer:

Output: 'Fluffy' and 'Fluffy'

When a function is called as a constructor ( new Pet('Fluffy ') ), this inside the constructor is equal to the constructed object.

Pet The this.name = name expression in the constructor creates the name property on the constructed object.

this.getName = () => this.name Create method getName on the constructed object. And because of the use of arrow functions, this in the arrow function is equal to this in the outer scope, which is the constructor Pet.

Calling cat.getName() and getName() will return the expression this.name, which evaluates to ' Fluffy'.

Question 3: Delayed Output

What does the following code output:

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

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

setTimeout(object.logMessage, 1000);

Answer:

After a delay of 1 second, output: undefined

Although the setTimeout() function uses object.logMessage as a callback, it still object.logMessage Called as a regular function rather than a method.

During a regular function call, this is equal to the global object, which is window in the browser environment.

This is why console.log(this.message) in the logMessage method outputs window.message, which is undefined.

Question 4: Complete the code

How to call the logMessage function so that it outputs "Hello, World!".

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

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

// 把你的代码写在这里.....

Answer:

There are at least 3 ways to do it:

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();

Question 5: Greetings and Farewells

What will the following code output:

const object = {
  who: 'World',

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

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

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

Answer:

Output: 'Hello, World!' and 'Goodbye, undefined!'

When calling object.greet(), inside the greet() method, thisThe value is equal to object because greet is a regular function. Therefore object.greet() returns 'Hello, World!'.

But farewell() is an arrow function, and the this value in the arrow function is always equal to the this value in the outer scope. The outer scope of

farewell() is the global scope, where this is the global object. Therefore object.farewell() will actually return 'Goodbye, ${window.who}!', which results in 'Goodbye, undefined!' .

Question 6: Tricky length

What will the following code output:

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

const object = {
  length: 5,
  method(callback) {
    callback();
  }
};

object.method(callback, 1, 2);

Answer:

Output: 4

callback() is called using a regular function call inside method(). Since the this value during a regular function call is equal to the global object, this.length in the callback() function results in 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/

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

The above is the detailed content of 7 interesting interview questions about 'this' in JavaScript, can you answer them all correctly?. For more information, please follow other related articles on the PHP Chinese website!