如何将当前范围传递给函数引用？

Question

我有以下代码构造一个字符串并将一个事件添加到一个显示所述字符串的按钮：

function initEvents() {
  const message = processSomeString();
  myButton.addEventListener( () => {
    //Some other code
    alert(message);
  })
}

上述方法之所以有效，是因为在内存中，任意事件函数与其外部作用域一起存储。

我想删除嵌套匿名函数以提高可读性，但是如何将message 变量附加到引用函数？

考虑到 ES6+，最好采用现代方式

Function.prototype.bind() 并不理想，因为我需要 this 引用不改变我的实际上下文。

function initEvents () {
  const message = processSomeString();
  myButton.addEventListener(myButtonClick);
}

function myButtonClick () {
  //Some other code
  alert(message??);
}

Answer 1

使用.bind:

function initEvents () {
  const message = 'any string' //processSomeString();
  
  // pass `myButton` as first argument of `.bind`
  // so that in your `myButtonClick()` you still have reference to `this`
  myButton.addEventListener('click', myButtonClick.bind(myButton, message));
}

function myButtonClick(message, e){
  console.log(`this: ${this}`);
  console.log(`message: ${message}`);
}

initEvents();

<button id="myButton">Button</button>

请注意，在您的代码中，这行：myButton.addEventListener(myButtonClick) 将不起作用，因为您缺少一个用于 .addEventListener 的 "eventType" argument。

编辑以适应问题：

要保留this 关键字引用，只需将this 作为第一个参数传递：

function initEvents () {
  const message = 'any string' //processSomeString();

  // For JS beginners, just read the documentation link above for explanation
  myButton.addEventListener('click', myButtonClick.bind(this, message));
}

function myButtonClick(message, e){
  console.log(`this: ${this}`);
  console.log(`message: ${message}`);
}

initEvents();

<button id="myButton">Button</button>

Answer 2

你不能传递范围，你需要传递参数：

function myButtonClick(message) {
  //Some other code
  alert(message);
}

function initEvents() {
  const message = processSomeString();

  myButton.addEventListener(() => myButtonClick.call(this, message));
  // or:
  myButton.addEventListener(myButtonClick.bind(this, message));
}

请注意，我觉得在这里保留this 很奇怪。这只有在两个函数都是同一个对象上的方法时才有意义，在这种情况下.bind(this) 是一个常见的习惯用法。如果它们是不相关的函数，那么以这种方式传递 this 上下文是……意想不到的。