javascript - 尝试以错误的方式关闭？

Question

我无法弄清楚以下代码有什么问题以及为什么当我使用第二种方法时它会起作用。谁能帮我理解这一点吗？

我有以下 Javascript 代码:

var clsFunc = function(prefix) {
  var id = 0;
  return function() {
    id = id + 1;
    console.log(prefix + id);
  }
}

第一种方法(不起作用):

如果我尝试像这样调用这个函数，什么也不会发生

clsFunc('div') 

第二种方式(有效)

var getId = {'div': clsFunc('div')}

getId.div()

结果:

div1
undefined

getId.div()

结果:

div2

Answer 1

clsFunc 函数创建一个函数并返回它。所以只是做

clsFunc('div');

...毫无意义，因为它创建了一个函数，然后将其丢弃，因为您没有将其存储在任何地方。

第二种方式存储在对象属性中创建的函数。该函数具有对创建它的上下文的引用(对 clsFunc 的调用)，即使该调用已返回，其中包含 id 变量。当您调用函数 (getId.div()) 时，它会向 id 加 1，然后输出后面的前缀 ("div")通过新值 if id(1、然后 2、然后、3 等)。

第二种方式不需要对象，您可以只使用变量:

var clsFunc = function(prefix) {
  var id = 0;
  return function() {
    id = id + 1;
    console.log(prefix + id);
  }
};

var f = clsFunc('div');
f(); // "div1"
f(); // "div2"

<小时/>

(您看到的 undefined 只是因为您在 JavaScript 控制台中运行它，该控制台向您显示调用该函数的结果；由于该函数不返回任何内容，因此调用它的结果是未定义。)