7个关于“this“面试题，你能回答上来吗？

小灰灰 2022-11-07 11:45 109阅读 0赞

> 作者：Shadeed  
> 译者：前端小智  
> 来源：dmitripavlutin

> **点赞再看**，微信搜索\*\*【[大迁世界][Link 1]】**,B站关注**【[前端小智][Link 2]】\*\*这个没有大厂背景，但有着一股向上积极心态人。本文 `GitHub` https://github.com/qq449245884/xiaozhi 上已经收录，文章的已分类，也整理了很多我的文档，和教程资料。

最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。

**github 地址：https://github.com/qq449245884/vue-okr-tree**

在JavaScript中，`this` 表示函数调用上下文。`this`难点在于它有一个复杂的行为，这也是面试中经常被考的点。

本文列举`7`个关于`this`有趣的面试问题:

*  问题1：变量 vs 属性
 *  问题2：Cat 的名字
 *  问题3：延迟打招呼
 *  问题4：人工方法
 *  问题5：问候和告别
 *  问题6：棘手的 length
 *  问题7：调用参数

### 问题1：变量 vs 属性 ###

下面的打印结果是啥：

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：Cat 的名字 ###

下面代码打印什么：

function Pet(name) { 
      this.name = name;
    
      this.getName = () => this.name;
    }
    
    const cat = new Pet('Fluffy');
    
    console.log(cat.getName()); // What is logged?
    
    const {  getName } = cat;
    console.log(getName());     // What is logged?

答案：`'Fluffy'` 和 `'Fluffy'`

当函数作为构造函数`new Pet('Fluffy')`调用时，构造函数内部的`this`等于构造的对象

`Pet`构造函数中的`this.name = name`表达式在构造的对象上创建`name`属性。

`this.getName = () => this.name`在构造的对象上创建方法`getName`。 而且由于使用了箭头函数，箭头函数内部的`this`值等于外部作用域的`this`值, 即 `Pet`。

调用`cat.getName()`以及`getName()`会返回表达式`this.name`，其计算结果为`'Fluffy'`。

### 问题3：延迟打招呼 ###

下面代码打印什么：

const object = { 
      message: 'Hello, World!',
    
      logMessage() { 
        console.log(this.message); // What is logged?
      }
    };
    
    setTimeout(object.logMessage, 1000);

答案：1秒后，打印 `undefined`。

尽管`setTimeout()`函数使用`object.logMessage`作为回调，但仍将`object.logMessage`用作常规函数，而不是方法。

在常规函数调用期间，`this`等于全局对象，即浏览器环境中的 window。

这就是为什么`logMessage`方法中的 `this.message`等于 `window.message`,即`undefined`。

### 问题4：人工方法 ###

如何调用`logMessage`函数，让它打印 `"Hello, World!"` ?

message: 'Hello, World!'
    };
    
    function logMessage() { 
      console.log(this.message); // "Hello, World!"
    }

答案:

至少有 3 种方式，可以做到：

message: 'Hello, World!'
    };
    
    function logMessage() { 
      console.log(this.message); // logs 'Hello, World!'
    }
    
    // Using func.call() method
    logMessage.call(object);
    
    // Using func.apply() method
    logMessage.apply(object);
    
    // Creating a bound function
    const boundLogMessage = logMessage.bind(object);
    boundLogMessage();

### 问题5：问候和告别 ###

下面代码打印什么：

答案: `'Hello, World!'` 和 `'Goodbye, undefined!'`。

当调用`object.greet()`时，在`greet()`方法内部，`this`值等于 object，因为`greet`是一个常规函数。因此`object.greet()`返回`'Hello, World!'`。

但是`farewell()`是一个箭头函数，箭头函数中的`this`值总是等于外部作用域中的`this`值。

`farewell()`的外部作用域是全局作用域，它是全局对象。因此`object.farewell()`实际上返回`'Goodbye， ${window.who}!'`，它的结果为`'Goodbye, undefined!'`。

### 问题6：棘手的 length ###

下面代码打印什么：

答案: `4`

`callback()`是在`method()`内部使用常规函数调用来调用的。由于在常规函数调用期间的`this`值等于全局对象，所以`this.length`结果为`window.length`。。

第一个语句`var length = 4`，处于最外层的作用域，在全局对象 `window` 上创建一个属性`length`。

### 问题7：调用参数 ###

下面代码打印什么：

答案: `3`

`obj.method(callback, 1, 2)`被调用时有`3`个参数:`callback`, `1`和`2`。结果，`method()`内部的参数特殊变量是如下结构的数组类对象:

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

因为`arguments[0]()`是arguments对象上的回调的方法调用，所以回调内部的参数等于`arguments`。 所以 `callback()`中的`this.length`与`arguments.length`相同，即`3`。

~ 完，我是小智，我要去刷碗了，我们下期见！

--------------------

**代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 [Fundebug][]。**

原文：https://dmitripavlutin.com/javascript-this-interview-questions/

## 交流 ##

文章每周持续更新，可以微信搜索「 大迁世界 」第一时间阅读和催更（比博客早一到两篇哟），本文 GitHub [https://github.com/qq449245884/xiaozhi][https_github.com_qq449245884_xiaozhi] 已经收录，整理了很多我的文档，欢迎Star和完善，大家面试可以参照考点复习，另外关注公众号，后台回复**福利**，即可看到福利，你懂的。

[Link 1]: https://mp.weixin.qq.com/s/sY9ufGGKfcdaAQ7KJQs3HA
[Link 2]: https://space.bilibili.com/31089477
[Fundebug]: https://www.fundebug.com/?utm_source=xiaozhi
[https_github.com_qq449245884_xiaozhi]: https://github.com/qq449245884/xiaozhi