如何在JavaScript中将函数结果存储到父级变量中？

我遇到一个问题：代码里的console.log(e)能输出正确结果（1或2），但console.log(test)返回的是函数本身。请问如何将函数的执行结果存储到test变量中，以便后续使用？非常感谢！

相关代码如下：

const spans = selectPager.getElementsByTagName('span');
const test = function() {
  for (let i = 0, len = spans.length; i < len; i++) {
    (function(e) {
      spans[i].onclick = function() {
        console.log(e)
      }
    })(i);
  }
}
test();
console.log(test);

嘿，我来帮你理清楚这个问题！首先得搞明白为什么console.log(test)会输出函数本身——因为你把test变量直接赋值给了那个函数，而不是函数执行后返回的结果。你的test函数目前只是给每个span绑定了点击事件，没有返回任何值（默认返回undefined），而且你也没去接收这个返回值，反而直接打印了函数本身。

再看你的核心需求：你想存储的是用户点击span后对应的e值（也就是1或2）对吧？这里要注意，点击事件是异步触发的，不能在函数执行时直接拿到结果，得通过变量来存储点击后的状态。下面给你几个可行的方案：

方案1：用外部变量存储点击结果 #

在函数外部定义一个变量，每次点击span时更新它的值，后续就能随时调用这个变量：

const spans = selectPager.getElementsByTagName('span');
let clickedValue; // 专门用来存点击后的结果

const bindClickEvents = function() {
  for (let i = 0, len = spans.length; i < len; i++) {
    // 这里可以去掉IIFE，因为let在for循环里已经形成块级作用域，每次循环的i都是独立的
    spans[i].onclick = function() {
      clickedValue = i + 1; // 对应你要的1/2结果
      console.log(clickedValue);
    }
  }
}
bindClickEvents();

// 后续需要使用时直接调用clickedValue即可，比如：
// setTimeout(() => console.log("最新点击值：", clickedValue), 3000);

方案2：让函数返回获取结果的闭包方法 #

如果不想暴露全局变量，可以让函数返回一个闭包函数，用来安全获取最新的点击值：

const spans = selectPager.getElementsByTagName('span');
const createClickTracker = function() {
  let clickedValue;
  for (let i = 0, len = spans.length; i < len; i++) {
    spans[i].onclick = function() {
      clickedValue = i + 1;
      console.log(clickedValue);
    }
  }
  // 返回一个函数，用来访问内部的clickedValue
  return function() {
    return clickedValue;
  }
}
const test = createClickTracker();

// 后续需要结果时，调用test()就能拿到最新值：
// setTimeout(() => console.log("最新点击值：", test()), 3000);

小补充：为什么原来的IIFE可以去掉？ #

你原本用IIFE来保存e的值，但其实let在for循环中会创建块级作用域，每次循环的i都是独立的副本，不需要额外用IIFE来包裹，这样代码更简洁清晰。

最后要提醒一句：因为点击事件是用户触发的异步操作，你不能在绑定事件的函数执行完立刻拿到结果，必须等用户点击后，存储变量才会有有效值哦！

内容的提问来源于stack exchange，提问作者Stéphan E