面试题：JavaScript 箭头函数与普通函数 this 对比及应用场景

Question

假设你正在开发一个网页应用，有一个对象 `obj` 包含一个方法 `fetchData`，该方法需要发起网络请求并处理响应数据。在 `fetchData` 方法内部，你需要使用 `setTimeout` 来模拟异步操作，并在异步操作完成后更新 `obj` 的某个属性。请分别使用普通函数和箭头函数来实现 `fetchData` 方法，并阐述为什么在这种场景下选择或不选择箭头函数，同时说明这两种实现方式中 `this` 的指向有何不同。

Answer 1

普通函数实现

const obj = {
    data: null,
    fetchData: function() {
        setTimeout(function() {
            // 模拟网络请求获取的数据
            const newData = '模拟数据'; 
            this.data = newData; 
            console.log(this.data); 
        }.bind(this), 1000); 
    }
};
obj.fetchData();

箭头函数实现

const obj = {
    data: null,
    fetchData: () => {
        setTimeout(() => {
            // 模拟网络请求获取的数据
            const newData = '模拟数据'; 
            // 这里的this指向window（非严格模式）或undefined（严格模式），不是obj
            this.data = newData; 
            console.log(this.data); 
        }, 1000); 
    }
};
obj.fetchData();

选择或不选择箭头函数的原因

• 普通函数：选择普通函数是因为普通函数有自己独立的 this 指向，通过 bind(this) 可以将 setTimeout 回调函数内部的 this 绑定到 obj，这样就能正确更新 obj 的属性。
• 箭头函数：不选择箭头函数，是因为箭头函数没有自己独立的 this，它的 this 取决于外层作用域。在 fetchData 是箭头函数的情况下，setTimeout 回调中的 this 指向外层作用域（通常是全局作用域，非严格模式下是 window，严格模式下是 undefined），无法直接更新 obj 的属性。

两种实现方式中 this 的指向不同

• 普通函数：在普通函数实现中，通过 bind(this) 将 setTimeout 回调函数的 this 绑定到 obj，所以在回调函数内部 this 指向 obj，能够正确更新 obj 的属性。
• 箭头函数：箭头函数没有自己独立的 this，fetchData 是箭头函数时，setTimeout 回调中的 this 取决于外层作用域，不是 obj，因此不能正确更新 obj 的属性。