7 interview questions about "this", how many do you know?

Author: Shadeed
Translator: Frontend Xiaozhi
Source: dmitripavlutin

If you have dreams and dry goods, search on [Moving to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

In JavaScript, this represents the function call context. this difficulty of 061808693a8fb4 is that it has a complicated behavior, which is often tested in interviews.

This article lists 7 interesting interview questions about this

• Question 1: Variables vs attributes
• Question 2: Cat’s name
• Question 3: Delay in greeting
• Question 4: Manual method
• Question 5: Greetings and farewell
• Question 6: The tricky length
• Question 7: call parameters

Question 1: Variables vs attributes

What is the following print result:

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

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

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

Answer: 'Hello, World!'

object.getmessage() is a method call. At this time, this means object .

The method also has a variable declaration const message = 'Hello, Earth!' . This variable will not affect the value of this.message

Question 2: Cat’s name

What does the following code print:

function Pet(name) {
  this.name = name;

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

const cat = new Pet('Fluffy');

console.log(cat.getName()); // What is logged?

const { getName } = cat;
console.log(getName());     // What is logged?

Answer: 'Fluffy' and 'Fluffy'

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

Pet constructor this.name = name expressions created on the constructed object name property.

this.getName = () => this.name getName on the constructed object. And the use of the function of the arrow, the arrows inside the function this value is equal to the external scope this value, i.e. Pet .

Calling cat.getName() and getName() will return the expression this.name , which is calculated as 'Fluffy' .

Question 3: Delay in greeting

What does the following code print:

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

  logMessage() {
    console.log(this.message); // What is logged?
  }
};

setTimeout(object.logMessage, 1000);

Answer: After 1 second, print undefined .

Although the setTimeout() function uses object.logMessage as a callback, it still object.logMessage as a regular function instead of a method.

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

This is why logMessage methods this.message equal window.message , namely undefined .

Question 4: Manual method

How to call the logMessage and let it print "Hello, World!" ?

 message: 'Hello, World!'
};

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

Answer:

There are at least 3 ways to do it:

 message: 'Hello, World!'
};

function logMessage() {
  console.log(this.message); // logs 'Hello, World!'
}

// Using func.call() method
logMessage.call(object);

// Using func.apply() method
logMessage.apply(object);

// Creating a bound function
const boundLogMessage = logMessage.bind(object);
boundLogMessage();

Question 5: Greetings and farewell

What does the following code print:

const object = {
  who: 'World',

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

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

console.log(object.greet());    // What is logged?
console.log(object.farewell()); // What is logged?

Answer: 'Hello, World!' and 'Goodbye, undefined!' .

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

However farewell() is a function of the arrows, the arrow in the function this value is always equal to the external scope of this value.

farewell() is the global scope, which is a global object. So object.farewell() actually returns 'Goodbye， ${window.who}!' , which results in 'Goodbye, undefined!' .

Question 6: The tricky length

What does the following code print:

var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}

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

object.method(callback, 1, 2);

Answer: 4

callback() is called using regular function calls inside method() Since, during the regular function calls this equal to the global target value, so this.length result window.length . .

The first statement var length = 4 , in the outermost scope, the global object window create a property on length .

Question 7: call parameters

What does the following code print:

var length = 4;
function callback() {
  console.log(this.length); // What is logged?
}

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

object.method(callback, 1, 2);

Answer: 3

obj.method(callback, 1, 2) is called, there are 3 parameters: callback , 1 and 2 . As a result, method() is an array-like object with the following structure:

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

Because arguments[0]() is a method call of the callback on the arguments object, the parameters inside the callback are equal to arguments . Therefore callback() in this.length the arguments.length same, i.e. 3 .

~ End, I’m Xiaozhi, I’m going to do the dishes, see you next time!

---

possible BUGs that may exist after the 161808693a9582 code is deployed cannot be known in real time. In order to solve these BUGs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://dmitripavlutin.com/javascript-this-interview-questions/

comminicate

If you have dreams and dry goods, search on [Moving the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.