[JavaScript知识库]面试官：什么时候不能使用箭头函数

今天看到这个面试题，特别有意思。一般来说面试官应该问的是箭头函数和普通函数的区别，这样应该大多数人都能答得上来，但是现在反过来，考验逆向思维，很多人可能都一下子反应不过来。

我们先来回顾一下箭头函数和普通函数的区别：

箭头函数没有自己的 this ，没有 argument 对象，没有 prototype ，不能作为构造函数（用 new 调用会报错）。箭头函数会自动捕获上级词法作用域的 this ，并且箭头函数的 this 在声明的时候就已经确定了，不能通过 call 或者 apply 修改。

因此以下场景不能使用箭头函数：

• 需要函数提升时（箭头函数只能写成表达式形式）；
• 需要使用函数的 this 、arguments 、prototype 时；
• 需要使用命名函数时（箭头函数是匿名的）；
• 需要作为构造函数时（箭头函数不能作为构造函数）；
• 需要在对象方法中访问当前对象时;

let obj = {
    a: 1,
    fn1: () => {
        console.log(this)
    },
    fn2: function() {
        console.log(this)
    }
}
obj.fn1(); // Window
obj.fn2(); // {a: 1, fn1: ?, fn2: ?} ，这是 this 的隐式绑定

const f1 = obj.fn1;
const f2 = obj.fn2;
f1(); // Window
f2(); // Window ，隐式绑定取决于谁来调用，谁调用就指向谁

使用箭头函数之所以会指向 Window 是因为箭头函数等价于下面的代码：

var that = this; // 直接使用闭包缓存 this
let obj = {
    a: 1,
    fn1: function() {
		console.log(that);
	}
}

在对象方法（例如 Vue Options API）的异步回调中经常会遇到 this 丢失的情况，一般会使用闭包进行缓存：

// 使用 _this 变量进行缓存
const _this = this;
api.get("/api/xxx", function(res) {
	_this.tableData = res;
})

// 除了使用闭包缓存 this ，还可以使用箭头函数
api.get("/api/xxx", (res) => {
	this.tableData = res;
})

顺便再说一个问题，JS 中的 this 指向确实是一个难点，以前的面试经常会考，但是现在考的越来越少了。为什么？因为现在开发中需要跟 this 打交道的机会变少了。以前 React 类组件和 Vue Options API 经常需要进行 this 绑定，但是现在前端流行函数式编程，React 17 引入的 Hooks 和 Vue Composition API 彻底干掉了 this ，不用担心 this 指向问题，让开发人员可以把更多精力放在业务逻辑上。但这不是说就不用了解 this 了，这是一个非常基础的知识点，假如你对这块很熟悉，那么在调试代码和定位 bug 的时候就很快了。即使业务代码不出现，在各种源码中还是有涉及的，对深入了解源码很有帮助。