闭包变量未定义：如何在 JS 中访问外部变量？答案

【问题标题】：Closure variable undefined: How to access outer variables in JS?闭包变量未定义：如何在 JS 中访问外部变量？
【发布时间】：2019-03-25 18:19:10
【问题描述】：

我有一个事件侦听器，它通过回调进行响应。
此回调是实际回调的包装器。
我在最外层的函数blockNumber 中定义了一个变量，并希望从最内层的函数中访问它（读/写）。

代码如下。

startWeb3 = async () => { 
  await initWeb3();

  var blockNumber = await web3.eth.getBlockNumber();
  console.log(blockNumber) //=> "184"

  window.KYCinstance.events.ReportedFraudA({ fromBlock:0 }, 
  (error, event) => {
    console.log(blockNumber); //=> "184"
    listenCallback(error, event, "fromFraudEvents");
  });

listenCallback = async (error, event, type) => {
  if (error) { console.log(error); }
  else {
    console.log(blockNumber); //=> "ERROR"
  }
}

结果是一条错误消息，当然如果我这样做this.blockNumber 它是一个未定义的变量。

startWeb3是最外层的函数，
它有一个事件监听器调用listenCallback,
在这个回调中，我试图回到最外面的范围。

【问题讨论】：

您能否更清楚地知道这里的哪个功能是您的innermost，哪个是outermost？

标签： javascript scope closures wrapper

【解决方案1】：

根据MDN定义

闭包是函数和词法环境的组合在其中声明了该函数。

所以按照上面的定义，listenCallback 在声明自身时并没有在其词法范围内声明。 listenWrapperFrom 或 listenCallback 将从其闭包中接收变量，这些变量是在声明它们的地方而不是在它们被引用的地方。

为了解决这个问题，您可以在 listenCallbackFrom 和 listenCallback 方法的词法范围内定义 blockNumber

var blockNumber;

listenToEvent = async () => { 

  blockNumber = await web3.eth.getBlockNumber();

  KYCinstance.events.ReportedFraudA({ fromBlock:0 }, listenWrapperFrom); 

};

function listenWrapperFrom(error, event) {
  listenCallback(error, event, "fromFraudEvents");
}

async function listenCallback (error, event, type) {
  if (error) { console.log(error); }
  else {
    console.log(blockNumber);
    let value = await someFunction();
  }
}

【讨论】：