面试题：JavaScript 中箭头函数在异步编程的基本应用

Question

请描述在 JavaScript 异步编程场景下，箭头函数相较于普通函数在定义和使用上的主要区别，并举例说明如何使用箭头函数来处理异步操作的回调函数。

Answer 1

定义和使用上的主要区别

1. 语法简洁性：
   • 箭头函数：语法更为简洁，例如普通函数function add(a, b) { return a + b; }，箭头函数可写成const add = (a, b) => a + b;。
   • 普通函数：需要完整的function关键字、函数名、参数列表和花括号包裹函数体。
2. this绑定：
   • 箭头函数：没有自己的this，它的this继承自外层作用域。例如在对象方法中使用箭头函数，this不会指向该对象。
   • 普通函数：this的值在函数调用时确定，在对象方法中调用，this通常指向该对象。
3. 构造函数使用：
   • 箭头函数：不能用作构造函数，不能使用new关键字调用。
   • 普通函数：可以通过new关键字作为构造函数创建对象实例。
4. arguments对象：
   • 箭头函数：没有自己的arguments对象，如果要访问参数，需使用剩余参数语法（...args）。
   • 普通函数：内部有arguments对象，包含传入函数的所有参数。

用箭头函数处理异步操作回调函数示例

以setTimeout为例：

// 普通函数作为回调
setTimeout(function() {
    console.log('普通函数回调执行');
}, 1000);

// 箭头函数作为回调
setTimeout(() => {
    console.log('箭头函数回调执行');
}, 1000);

在处理异步操作如fetch时：

fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('错误:', error));

这里.then和.catch的回调函数都使用了箭头函数，简洁地处理了fetch异步操作的成功和失败情况。