关于前端:烦人的this7个关于js关键词的面试题

在 JavaScript 中，this是函数的调用上下文。
难度在于this具备简单的行为。
本文，整顿了一个对于this关键字的7个乏味面试问题的列表。
留神：上面的 JavaScript 片段在非严格模式下运行，也称为 sloppy 模式。

1: 变量 vs 属性

以下代码会在控制台打印什么：

const object = {message: 'Hello, World!',getMessage() {const message = 'Hello, Earth!';return this.message;}};console.log(object.getMessage()); // 会打印什么？

<details>
<summary>点击查看答案</summary>

'Hello, World!' 被打印到控制台。
object.getMessage() 是一个办法调用，所以this指向object。
办法外面还有一个变量申明 const message = 'Hello, Earth!'。 该变量并不会影响this.message的值。
</details>

2: Cat name

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()); // 会打印什么?

<details>
<summary>点击查看答案</summary>

控制台会打印出'Fluffy' 和 'Fluffy'。
当一个函数作为结构函数调用 new Pet('Fluffy') 时，构造函数外部的 this 等于结构的对象。
Pet构造函数中的 this.name = name 代码会在结构的对象上创立 name 属性。
this.getName = () => this.name 在结构的对象上创立一个办法 getName 。 并且因为应用了箭头函数，所以箭头函数外部的 this 就等于内部作用域的 this——构造函数 Pet。
调用 cat.getName() 和 getName()，返回的后果都是为“Fluffy”。
</details>

3.setTimeout和this

const object = {  message: 'Hello, World!',  logMessage() {    console.log(this.message); // 会打印什么?  }};setTimeout(object.logMessage, 1000);

<details>
<summary>点击查看答案</summary>

提早 1 秒后， undefined 会打印到控制台。
尽管 setTimeout() 函数应用 object.logMessage 作为回调，但它会将 object.logMessage 作为惯例函数而不是办法。

并且在惯例函数调用期间，this指向全局对象，在浏览器环境的状况下是window。

这就是 logMessage 办法中的 console.log(this.message) 打印undefined的 的起因。

</details>

附带挑战：如何修复此代码以便'Hello，World！' 打印到控制台？

4.人工办法

如何调用 logMessage 函数能力使他打印出“Hello, World！”？

const object = {message: 'Hello, World!'};function logMessage() {console.log(this.message); // "Hello, World!"}// 这里写下你的代码...

<details>
<summary>点击查看答案</summary>

至多有 3 种办法能够对象的办法调用 logMessage() 。

const object = {message: 'Hello, World!'};function logMessage() {console.log(this.message); // logs 'Hello, World!'}// 应用 func.call() logMessage.call(object);// 应用 func.apply() logMessage.apply(object);// Creating a bound functionconst boundLogMessage = logMessage.bind(object);boundLogMessage();

</details>

5.箭头函数

const object = {who: 'World',greet() {return `Hello, ${this.who}!`;},farewell: () => {return `Goodbye, ${this.who}!`;}};console.log(object.greet()); // 会打印什么?console.log(object.farewell()); // 会打印什么?

<details>
<summary>点击查看答案</summary>

'Hello, World!' 和 'Goodbye, undefined!' 会被打印到控制台。
当调用 object.greet() 时，在办法greet() 中，因为greet 是一个惯例函数，this指向object。 因而 object.greet() 返回 'Hello, World!'。

然而farewell() 是一个箭头函数，所以箭头函数外部的this总是等同于内部作用域的this。

farewell() 的内部作用域是全局作用域，这里 this 是全局对象。 因而 object.farewell() 实际上返回“Goodbye, ${window.who}!”，其计算结果为“Goodbye, undefined!”。

</details>

 6.困惑的length

以下代码会打印什么？

var length = 4;function callback() {console.log(this.length); // What is logged?}const object = {length: 5,method(callback) {callback();}};object.method(callback, 1, 2);

<details>
<summary>点击查看答案</summary>

4会被打印到控制台中。
callback() 是以惯例函数形式来调用的。 因为在惯例函数调用时this指向全局对象，因而在callback()函数内的this.length 被评估为 window.length。

在最外层的作用域中，第一条语句 var length = 4，在全局对象上创立了一个属性 length：window.length 变为 4。

最初，在 callback() 函数中 this.length 计算为 window.length ,所以4 被记录到控制台。
</details>

7.调用参数

var length = 4;function callback() {console.log(this.length); // What is logged?}const object = {length: 5,method() {arguments[0]();}};object.method(callback, 1, 2);

<details>
<summary>点击查看答案</summary>

3 会被打印到控制台。
obj.method(callback, 1, 2) 应用 3 个参数调用：callback, 1 和 2。因而，method() 中的arguments变量是以下构造的类数组对象：

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

因为arguments[0]() 是arguments对象的callback办法的调用，所以回调中的this指向arguments。 因而 callback() 中的 this.length 与 arguments.length 雷同，即 3。
</details>

总结

如果您正确答复了 5 个或更多问题，那么您就对this关键字有了很好的了解！

否则，您须要好好温习一下this关键字。

作者：Dmitri Pavlutin 译者：前端css和js干货 起源：dmitripavlutin