我如何使用回调函数外部范围的变量[重复]答案

【问题标题】：How can i use varaible from outer scope of the callback function [duplicate]我如何使用回调函数外部范围的变量[重复]
【发布时间】：2020-03-11 23:46:46
【问题描述】：

如何使用函数外部范围的变量。我在这里创建了这个简单的例子

var view = {
    init(){
    const targetOne = document.querySelector(".targetOne"); 
    const targetTwo = document.querySelector(".targetTwo"); 
    var val = "outer scope";

    targetOne.addEventListener('click', (e) => {
      console.log('target one', val)

    });
    targetTwo.addEventListener('click', this.handleEvent);
  },

  handleEvent(e) {
        console.log('targetTwo ', val);
    }
}

view.init();

JS小提琴链接：https://jsfiddle.net/jr7b521x/50/

对于 targetOne 回调，我可以使用变量 val，但是当我为 targetTwo 回调定义一个函数时，该变量 val 没有在范围内定义。我觉得我在这里遗漏了一些非常简单的东西，我刷新了作用域链和闭包，但我无法得到它

【问题讨论】：

val 仅在init 函数的范围内；我不确定是什么让你相信它会在它之外可用。
omg，基于它在词汇上的位置对吗？这就是为什么 targetOne 回调能够记录 val，因为该函数在词法上位于 init 内部。我说的对吗？
这是因为对 targetOne 列表器的回调是一个内联函数，因此它与它的父级具有相同的上下文。但是，第二个不是，您需要将其作为参数显式传递。
你需要做一个闭包，就像你对targetOne 所做的那样——如果val 仅在init 范围内是本地的，则没有办法解决这个问题。如果需要，您可以从该闭包调用 handleEvent 方法并将值作为参数传递。或者，将值存储在其他地方 - 而不是（仅）局部变量 - 以便 handleEvent 可以访问它。
@Bergi 我很困惑如何将事件与回调一起传递。如果我执行类似 this.handleKeydown.bind(null, e, val) 的操作。 handleEvent 方法是如何获取事件对象的？

标签： javascript html closures

【解决方案1】：

变量val在init()函数的作用域内

要在 handleEvent 函数中获取它，您需要通过参数传递它，或者它必须是视图对象的属性

【讨论】：