向Array方法提供thisArg参数时如何正确使用箭头函数？

首先要明确：箭头函数本身不支持动态绑定this，因此无法直接通过数组方法的thisArg参数给箭头函数绑定自定义this值，这是JavaScript语言的固有设计：箭头函数的this在定义时就继承自外层词法作用域的this，所有动态修改this的机制（包括call/apply/bind、数组方法的thisArg参数）都对其无效。

如果想要保留箭头函数的简洁写法，同时获取到目标thisArg的值，可以用以下两种替代方案：

• 方案1：将需要传入的thisArg值提前保存到外层作用域的变量中，箭头函数直接引用该变量
  示例代码：

  const context = 'Hello';
  Array.from({ length: 1 }, () => console.log(context));
  

• 方案2：用普通函数作为回调的中转层，把动态绑定的this值传递给内部的箭头函数
  示例代码：

  Array.from(
    { length: 1 },
    function() {
      // 内部箭头函数会继承普通函数当前的this值
      return (() => console.log(this))();
    },
    'Hello'
  );
  

如果没有特殊要求必须用箭头函数，更建议直接使用普通函数作为回调，无需额外的包裹逻辑，代码可读性和执行效率都更高：

Array.from({ length: 1 }, function() { console.log(this) }, 'Hello');

内容的提问来源于stack exchange，提问作者Guerric P