JavaScript面试题：关于this关键字的6个面试问题
作者:admin 时间:2022-6-8 19:55:48 浏览:在这篇文章中，我整理了关于this关键字的6个面试问题，这些问题在JavaScript面试中常常会被问到，你能回答吗？
注意：下面的 JavaScript 片段在非严格模式下运行。
1、以下代码片段在控制台输出什么？
const object = {
message: 'Hello, World!',
getMessage() {
const message = 'Hello, Earth!';
return this.message;
}
};
console.log(object.getMessage()); // 输出什么?答案
Hello, World! 被记录到控制台。查看演示。
object.getMessage()是一个方法调用，这就是为什么this在方法内部等于object。
方法内部还有一个变量声明const message = 'Hello, Earth!'。该变量无论如何都不会影响this.message的值。
2、以下代码片段在控制台输出什么？
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()); // 输出什么?答案
'Fluffy'和'Fluffy'记录到控制台。查看演示。
当函数作为构造函数new Pet('Fluffy')调用时，构造函数内部的this等于构造的对象。
Pet构造函数中的表达式 this.name = name 在构造对象上创建name属性。
this.getName = () => this.name 在构造对象上创建一个方法getName。并且由于使用了箭头函数，箭头函数内部的this等于外部作用域(构造函数Pet)的this。
调用cat.getName()以及getName()返回this.name计算结果为'Fluffy'的表达式。
3、以下代码片段在控制台输出什么？
const object = {
message: 'Hello, World!',
logMessage() {
console.log(this.message); // 输出什么?
}
};
setTimeout(object.logMessage, 1000);答案
延迟 1 秒后，undefined记录到控制台。查看演示。
虽然setTimeout()函数将object.logMessage用作回调，但object.logMessage仍然是作为常规函数调用而不是方法。
在常规函数调用期间，this等于全局对象，window在浏览器环境中也是如此。
这就是为什么logMessage内部的console.log(this.message)方法输出window.message是undefined。
挑战一下：如何修复此代码以便将'Hello, World!'输出到控制台？查看演示
4、以下代码片段在控制台输出什么？
const object = {
who: 'World',
greet() {
return `Hello, ${this.who}!`;
},
farewell: () => {
return `Goodbye, ${this.who}!`;
}
};
console.log(object.greet()); // 输出什么?
console.log(object.farewell()); // 输出什么?答案
'Hello, World!'和'Goodbye, undefined!'记录到控制台。查看演示。
调用object.greet()时，greet()方法内部的this值等于object因为greet是一个常规函数。从而object.greet()返回'Hello, World!'。
但是farewell()是一个箭头函数，箭头函数内部的this值总是等于外部范围的this。
farewell()的外部作用域是全局作用域，这里this是全局对象。因此object.farewell()实际上返回'Goodbye, ${window.who}!'，其计算结果为'Goodbye, undefined!'。
5、以下代码片段在控制台输出什么？
var length = 4;
function callback() {
console.log(this.length); // 输出什么?
}
const object = {
length: 5,
method(callback) {
callback();
}
};
object.method(callback, 1, 2);
答案
4被记录到控制台。查看演示。
callback()使用method()内部的常规函数调用来调用， 由于在常规函数调用期间this值等于全局对象，因此callback()函数内部的this.length被评估为window.length。
第一条语句var length = 4位于最外层范围内，在全局对象上创建一个length属性：window.length 等于 4。
最后，在callback()函数内部，this.length评估为window.length——4被记录到控制台。
6、以下代码片段在控制台输出什么？
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]()是callback对参数对象的方法调用，callback内部的this，等于arguments。结果callback()内部的this.length与arguments.length相同，等于3。
总结
本文通过6个关于this关键字的面试问题，介绍了this的一些基础知识，通过本文的介绍，你应该对this关键字的认识有了进一步的了解。
相关文章
标签: this
- 站长推荐
