共计 3350 个字符，预计需要花费 9 分钟才能阅读完成。
在 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
