7道关于JS this的面试题，你能答对几个
前言
在JavaScript中，this是函数调用上下文。正是由于this的行为很复杂，所以在JavaScript面试中，总是会问到有关 this的问题。
做好的准备面试的方法是练习，所以本文针对this关键字整理了7个有趣的面试。
注意：下面的JavaScript代码以非严格模式运行。
1：变量与属性
以下代码输出什么：
constobject={
message:'Hello,World!',
getMessage(){
constmessage='Hello,Earth!';
returnthis.message;
}
};
console.log(object.getMessage());//=>?
答案：
输出：'Hello,World!'
object.getMessage()是方法调用，这就是为什么方法中的this等于object的原因。
方法中还有一个变量声明constmessage='Hello，Earth!'，该变量不会影响this.message的值。
2：猫的名字
以下代码输出什么：
functionPet(name){
this.name=name;
this.getName=()=>this.name;
}
constcat=newPet('Fluffy');
console.log(cat.getName());//=>?
const{getName}=cat;
console.log(getName());//=>?
答案：
输出：'Fluffy'和 'Fluffy'
当一个函数被当作构造函数调用时（newPet('Fluffy')），构造函数内部的this等于构造的对象。
Pet构造函数中的this.name=name 表达式在构造的对象上创建name属性。
this.getName=()=>this.namethis.getName=（）=>this.name 在构造的对象上创建方法getName。因为使用了箭头函数，所以箭头函数中的this等于外部作用域中的this，也就是构造函数Pet。
调用cat.getName()和getName()会返回表达式this.name，其结果为'Fluffy'。
3：延迟输出
以下代码输出什么：
constobject={
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：补全代码
补全代码，使结果输出"Hello，World!"。
constobject={
message:'Hello,World!'
};
functionlogMessage(){
console.log(this.message);//=>"Hello,World!"
}
//Writeyourcodehere...
答案：
至少有3种方式可以把logMessage()作为对象上的方法调用。任何一个都被看作是正确答案：
constobject={
message:'Hello,World!'
};
functionlogMessage(){
console.log(this.message);//=>'Hello,World!'
}
//使用func.call()方法
logMessage.call(object);
//使用func.apply()方法
logMessage.apply(object);
//使用函数绑定
constboundLogMessage=logMessage.bind(object);
boundLogMessage();
5：问候与告别
以下代码输出什么：
constobject={
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!'。
6：棘手的length
以下代码输出什么：
varlength=4;
functioncallback(){
console.log(this.length);//=>?
}
constobject={
length:5,
method(callback){
callback();
}
};
object.method(callback,1,2);
答案：
输出：4
使用method()内部的常规函数调用来调用callback()。因为在常规函数调用期间的this值等于全局对象，所以在callback() 函数中this.length为window.length。
位于最外层的第一个语句varlength=4在全局对象上创建了属性length，所以window.length变为4。
最后，在callback() 函数内部，``this.length的值为window.length，最后输出4`。
7：调用参数
以下代码输出什么：
varlength=4;
functioncallback(){
console.log(this.length);//输出什么
}
constobject={
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关键字掌握的情况是很不错的。
到此这篇7道关于JSthis面试题的文章就介绍到这了,更多相关JSthis面试题内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。