更多文章详见公众号【前端css和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 function
const 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
