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 函数返回函数，然后绑定到单击处理程序 - 每次单击时都会调用此返回函数。 您更改的函数不会返回任何内容（未定义更具体），因此 nothink 绑定到 onclick 事件。

Answer 2

onclick 属性需要一个在事件发生时执行的函数。

该函数将接收鼠标事件作为参数。但是，在您的情况下，该函数需要知道字体应设置为的大小。

这是通过动态创建函数并使用闭包来捕获大小来解决的。