箭头函数无法正常工作，但传统匿名函数可以？JavaScript技术咨询

这大概率是箭头函数的this绑定特性在搞鬼！我之前也踩过一模一样的坑，咱们来拆解清楚：

核心原因：箭头函数与普通函数的this绑定差异 #

箭头函数没有自己独立的this，它的this是词法绑定的——也就是定义箭头函数时，直接继承自外层作用域的this；而传统匿名函数的this是动态绑定的，会根据调用它的上下文来确定指向。

举个贴近你场景的例子，假设你的run函数大概是这样的：

// 有问题的箭头函数版本
function run(num) {
  this.base = 12; // 预期用这个值加上num得到42
  return {
    value: (() => {
      // 这里的this不是指向当前run函数的上下文，而是外层全局作用域的this！
      return this.base + num; 
    })()
  }
}

这时候run(30).value会拿到undefined + 30（如果全局没有base变量），自然得不到预期的42。

而换成传统匿名函数后：

// 正常工作的普通函数版本
function run(num) {
  this.base = 12;
  return {
    value: (function() {
      // 这里的this动态绑定到当前run函数的上下文，能正确拿到base=12
      return this.base + num; 
    })()
  }
}

普通函数作为立即执行函数调用时，this指向run函数的上下文，所以12+30=42，完全符合预期。

两种可选解决方案 #

1. 继续使用传统匿名函数：如果你的逻辑依赖调用时的动态this，这是最直接的方案，就像你已经验证的那样。
2. 用箭头函数但手动固定上下文：如果你偏好箭头函数的写法，可以提前把需要的this用变量保存下来：

function run(num) {
  const self = this; // 保存当前上下文的this
  this.base = 12;
  return {
    value: (() => {
      return self.base + num; // 用self替代this，就能拿到正确的base值
    })()
  }
}

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