javascript - 循环内的闭包 - FocusEvent 的问题

Question

我正在用这种方法检查循环中的闭包most popular question on closure in JS

我不明白的是我在哪里更改了闭包代码。我尝试将“help”的值作为参数传递给闭包函数。

function showHelp(help) {
  document.getElementById('help').innerHTML = help;
}

function makeHelpCallback(help) {

/// HERE'S THE CHANGE
  return function (help) {
// instead of return function () {
    showHelp(help);
  };
}

function setupHelp() {
  const helpText = [
    { id: 'email', help: 'Your e-mail address' },
    { id: 'name', help: 'Your full name' },
    { id: 'age', help: 'Your age (you must be over 16)' },
  ];

  for (let i = 0; i < 1; i++) {
    const item = helpText[i];
    document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
  }
}

setupHelp();

我预计“help”的值会绑定(bind)到外部范围，因此我仍然会得到“你的年龄(你必须超过 16 岁)”值的三倍。但是，我得到了[object FocusEvent]。我不知道这是怎么发生的。

我尝试用 Chrome 调试此问题，但没有效果。

Answer 1

执行此操作时，您将使用同名的函数参数来隐藏闭包:

function makeHelpCallback(help) {        // this<- |
                                         //        |
  return function (help) {  // <-- this shadows -  |
    showHelp(help);        // help is no longer refers to the closure it refers to the argument 
  };
}

如果您创建一个不带 help 参数的内部函数，函数体中的帮助将引用外部闭包:

function showHelp(help) {
  console.log(help)
}

function makeHelpCallback(help) {
  return function() {
    showHelp(help); // here help refers to the closure
  };
}

let f = makeHelpCallback("test1")
let f2 = makeHelpCallback("test2")

f()
f2()

如果您的内部函数需要接受参数，请将其命名为其他名称，这样它就不会破坏外部帮助。