接收数据参数的回调函数是否可通过闭包访问外部作用域变量

解决方案 #

你的代码从JS语法规则来看，箭头函数本身会继承外层作用域的变量，正常情况下可以直接访问到外部声明的foo。出现foo为undefined的问题，通常是变量声明作用域不匹配、上下文引用错误或者执行时序导致的，以下是几种可以同时保证foo可访问、data参数正常接收的实现方案：

• 方案1：高阶闭包显式捕获变量（最稳妥，不受上下文变动影响）

const foo = 1;

// 高阶函数接收需要捕获的foo，返回符合入参要求的回调函数
const getTargetCallback = (capturedFoo) => (data) => {
  const bar = capturedFoo + data.num;      
  return bar;
}

this.editor.functionThatExpectsCallback('genericString', getTargetCallback(foo))

• 方案2：检查foo的引用方式
  如果foo是当前类的实例属性，而非普通块级/全局常量，需要添加this前缀访问：

// 示例foo为实例属性的场景
this.foo = 1;

this.editor.functionThatExpectsCallback('genericString', (data) => {
  const bar = this.foo + data.num;      
  return bar;
})

• 方案3：通过bind预先注入foo变量

const foo = 1;

// bind的后续参数会作为前置参数注入到回调中，调用时传入的data会作为第二个参数接收
this.editor.functionThatExpectsCallback('genericString', ((capturedFoo, data) => {
  const bar = capturedFoo + data.num;
  return bar;
}).bind(null, foo))

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