在JavaScript中，这是函数调用上下文。正是因为this行为的复杂性，所以在JavaScript面试中总是会问到关于this的问题。准备面试最好的方法就是练习，所以本文针对这个关键词整理了7个有趣的面试。注意：下面的JavaScript代码在非严格模式下运行。1.变量和属性以下代码的输出是什么：constobject={message:'Hello,World!',getMessage(){constmessage='Hello,Earth!';returnthis.message;}};console.log(object.getMessage());//=>?Answer:Output:'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());//=>?Answer:output:'Fluffy'and'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作为常规函数而不是方法。这相当于常规函数调用中的全局对象，以及浏览器环境中的窗口。这就是为什么logMessage方法中的console.log(this.message)会输出未定义的window.message。挑战：如何修改此代码以输出“Hello,World!”？在下面的评论中写下您的解决方案*4：完成代码完成代码，使其输出“Hello,World!”。constobject={message:'Hello,World!'};functionlogMessage(){console.log(this.message);//=>"Hello,World!"}//在这里写你的代码...答案：你至少有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!'和'再见，未定义！'当调用object.greet()时，在greet()方法内部，this的值等于object，因为greet是一个常规函数。所以object.greet()返回'Hello,World!'。但是farewell()是一个箭头函数，所以箭头函数中this的值总是等于外作用域的this。farewell()的外部范围是全局范围，其中this是全局对象。所以object.farewell()实际上会返回'Goodbye,${window.who}!'这将导致“再见，未定义！”。6.棘手的长度以下代码输出什么：varlength=4;functioncallback(){console.log(this.length);//=>?}constobject={length:5,method(callback){callback();}};object.method(回调,1,2);答案：输出：4Callback()是通过method()内的常规函数??调用调用的。因为在常规函数调用期间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(回调,1,2);答案：输出：调用3obj.method(callback,1,2)有3个参数：callback、1和2。因此，method()中的arguments特殊变量是一个类数组对象，具有以下结构：{0:callback,1:1,2:2,length:3}因为arguments[0]()是针对arguments对象方法调用的回调，所以回调中的this等于arguments。事实证明callback()中的this.length与arguments.length相同，都是3。总结如果你答对了5个以上，那么你就很好地掌握了this关键字。
