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,thisis the function calling context. It is precisely because the behavior ofthisis complicated that questions aboutthisare always asked in JavaScript interviews.

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

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 whythisin the method is equal toobject.

There is also a variable declaration in the methodconst message ='Hello, Earth!', but this variable will not affect the value ofthis.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 ')),thisinside the constructor is equal to the constructed object.

PetThethis.name = nameexpression in the constructor creates thenameproperty on the constructed object.

this.getName = () => this.nameCreate methodgetNameon the constructed object. And because of the use of arrow functions,thisin the arrow function is equal tothisin the outer scope, which is the constructorPet.

Callingcat.getName()andgetName()will return the expressionthis.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 thesetTimeout()function usesobject.logMessageas a callback, it stillobject.logMessageCalled as a regular function rather than a method.

During a regular function call,thisis equal to the global object, which iswindowin the browser environment.

This is whyconsole.log(this.message)in thelogMessagemethod outputswindow.message, which isundefined.

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 callingobject.greet(), inside thegreet()method,thisThe value is equal to object becausegreetis a regular function. Thereforeobject.greet()returns'Hello, World!'.

Butfarewell()is an arrow function, and thethisvalue in the arrow function is always equal to thethisvalue in the outer scope. The outer scope of

farewell()is the global scope, wherethisis the global object. Thereforeobject.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 insidemethod(). Since thethisvalue during a regular function call is equal to the global object,this.lengthin thecallback()function results inwindow.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!