javascript - javascript 中的闭包理解

Question

this is link from js fiddle

那里有一些像这样的js代码:

function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;  document.getElementById('size-16').onclick = size16;

我有两个问题，第一个问题: 使用这个额外变量有什么好处

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

当你可以写

document.getElementById('size-12').onclick = makeSizer(12)

第二个是: 为什么我们这样编写函数:

function makeSizer(size) {  document.body.style.fontSize = size + 'px';  }

一切都停止工作了。我知道这是重复的，并且有一些关于关闭的帖子，但它们没有帮助

Answer 1

第一个问题:

在此示例中，它不会给您带来任何好处，但如果您想将这些函数用作其他 onclick 处理程序，这将节省一些资源，并且代码将更易于维护。

第二个问题:

这是因为第一个 makeSize 函数返回函数，然后该函数绑定(bind)到单击处理程序 - 每次单击时都会调用此返回的函数。 您更改的函数不会返回任何内容(更具体地说，未定义)，因此 nothink 绑定(bind)到 onclick 事件。