How many of the 7 interview questions about JS this can you answer correctly

Preface

In JavaScript, this is the function call context. It is precisely because of the complexity of this's behavior that questions about this are always asked in JavaScript interviews.

The best way to prepare for an interview is to practice, so this article sorts out seven interesting interviews for this keywords.

Note: The following JavaScript code runs in non-strict mode.

1: Variables and Properties

What does the following code output:

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, which is why this in the method is equal to object.

There is also a variable in the method declaring const message = 'Hello, Earth! ', which does not affect the value of this. message.

2: The name of the cat

What does 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.

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

this.getName = () = > this. name this. getName = () = > this. name creates the method getName on the constructed object. Because the arrow function is used, this in the arrow function is equal to this in the outer scope, which is the constructor Pet.

Calling cat. getName () and getName () returns the expression this. name with the result of 'Fluffy'.

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 1 second delay, output: undefined

Although the setTimeout () function uses object. logMessage as a callback, it still uses object. logMessage as a regular function rather than a method call. And this equals the global object in a regular function call and window in a browser environment. This is why console. log (this. message) within the logMessage method outputs window. message, which is undefined.

Challenge: How to modify this code to output 'Hello, World! '? Write your solution in the comments below *

4: Complete the code

Complete the code so that the result outputs "Hello, World! ".

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

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

// Write your code here...

Answer:

There are at least three ways to call logMessage () as a method on an object. Any one is regarded as the correct answer:

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

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

//  Use  func.call()  Method 
logMessage.call(object);

//  Use  func.apply()  Method 
logMessage.apply(object);

//  Using function binding 
const boundLogMessage = logMessage.bind(object);
boundLogMessage();

5: Greetings and Farewell

What does 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 object. greet () is called, the value of this inside the method greet () is equal to object because greet is a regular function. So object. greet () returns' Hello, World! '.

But farewell () is an arrow function, so the value of this in the arrow function is always equal to this in the outer scope. The outer scope of farewell () is global scope, where this is a global object. So object. farewell () actually returns' Goodbye, ${window. who}! ', and the result is' Goodbye, undefined! '.

6: Tricky length

What does 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

Use the regular function calls inside method () to call callback (). Because the value of this during a regular function call is equal to the global object, this. length is window. length in the callback () function.

The first statement on the outermost layer, var length = 4, creates the attribute length on the global object, so window. length becomes 4.

Finally, inside the callback () function, the value of ` ` this. length is window. length, and the final output is 4 `.

7: Call parameters

What does the following code output:

var length = 4;
function callback() {
 console.log(this.length); //  Output what 
}

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

object.method(callback, 1, 2);

Answer:

Output: 3

obj. method (callback, 1, 2) is called with three parameters: callback, 1, and 2. The resulting arguments special variable in 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 to callback on an arguments object, this inside callback is equal to arguments. Results this. length inside callback () are identical to arguments. length, both 3.

Summarize

If you get more than 5 correctly, you have a good grasp of this keywords.