烦这个，关于js关键字的7道面试题

更多文章见公众号【前端css和js干货】在JavaScript中，this是函数的调用上下文。困难在于这具有复杂的行为。在这篇文章中，我整理了一份关于this关键字的7个有趣的面试问题列表。注意：下面的JavaScript片段在非严格模式下运行，也称为草率模式。1：变量与属性以下代码将在控制台上打印什么：constobject={message:'Hello,World!',getMessage(){constmessage='Hello,Earth!';returnthis.message;}};控制台.log(object.getMessage());//会打印什么？

点击查看答案

'Hello,World!'被打印到控制台。object.getMessage()是一个方法调用，所以this指向对象。还有一个变量声明constmessage='Hello,Earth!'在方法中。此变量不影响this.message的值。

2:CatnamefunctionPet(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.name在构造的对象上创建一个方法getName。并且因为使用了箭头函数，所以箭头函数内部的this等于外部作用域的this——构造函数Pet。调用cat.getName()和getName()都返回“Fluffy”。

3.setTimeoutandthisconstobject={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)打印未定义的原因。

附带挑战：如何修复此代码以便“Hello,World!'打印到控制台？4、手动方法如何调用logMessage函数让他打印出“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()方法中，由于greet是一个普通函数，所以this指向object。所以object.greet()返回'Hello,World!'。但是farewell()是一个箭头函数，所以箭头函数内部的this总是等于外部作用域中的this。farewell()的外部范围是全局范围，其中this是全局对象。所以object.farewell()实际上返回“再见，${window.who}！”，其计算结果为“再见，未定义！”。

6.混淆长度下面的代码会打印什么？varlength=4;functioncallback(){console.log(this.length);//记录了什么？}constobject={length:5,method(callback){callback();}};object.method(callback,1,2);<详情>

点击查看答案

4将打印到控制台。callback()以常规函数方式调用。由于this指向普通函数调用中的全局对象，因此callback()函数中的this.length被评估为window.length。在最外层的作用域中，第一个语句varlength=4在全局对象上创建了一个属性length：window.length变为4。最后，在callback()函数中，this.length的计算结果为window.length，因此4被记录到安慰。7。调用参数varlength=4;函数回调（）{console.log（this.length）;//记录了什么？}constobject={length:5,method(){arguments[0]();}};object.method(callback,1,2);

点击查看answer

3会打印到控制台。obj.method(callback,1,2)使用3个参数调用：callback,1和2。因此，method()中的参数变量是具有以下结构的类数组对象：{0:callback,1:1,2:2,length:3}因为arguments[0]()是调用arguments对象的回调方法，所以回调中的this指向arguments。所以callback()中的this.length和arguments.length是一样的，都是3。否则，您需要重温this关键字。作者：DmitriPavlutin译者：前端css和js干货来源：dmitripavlutin