技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

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.messageundefined

挑战一下:如何修复此代码以便将'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、12,结果,method()内部的arguments特殊变量是如下结构的类似数组对象:

{
  0: callback,
  1: 1, 
  2: 2, 
  length: 3 
}

因为arguments[0]()callback对参数对象的方法调用,callback内部的this,等于arguments。结果callback()内部的this.lengtharguments.length相同,等于3

总结

本文通过6个关于this关键字的面试问题,介绍了this的一些基础知识,通过本文的介绍,你应该对this关键字的认识有了进一步的了解。 

相关文章

标签: this  
x
x
  • 站长推荐