为什么通过javascript更改字体大小与事件需要关闭？ [英] Why does changing font size with an event through javascript require closures?

问题描述

我一直在阅读mozdev文章关于闭包，它有这个小提示示例：

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

这个想法是用一个大小调用makeSizer并更改字体大小。但是如果你切掉了无名的功能，只需这：

  function makeSizer（size）{
 document.body.style.fontSize = size +'px'; 
} 
  

可点击的链接停止有任何效果和字体大小直接到最大，就好像点击了size16链接，并且链接没有点击事件了。添加 return 不会改变行为。

（如果我不清楚我在说什么，链接上面的例子，他们有fiddles）

我的问题是，为什么需要闭包/回调？应该不是一个简单的语句工作？如果是关于调用一个函数，为什么它不工作后脚本加载？我得到为什么它将默认为最后的大小，因为函数调用现在直接改变大小（和size16被称为最后），而不是等待调用，但仍然，为什么它不工作后页面加载？ / p>

解决方案

要回答您的问题：更改字体大小不需要闭包。

现在，为什么删除内部函数不起作用：

makeSizer 不是事件处理程序。它是一个创建函数并返回它们的函数。这些函数是事件处理程序。让我们分解一下：

  var size12 = makeSizer（12）; 
 document.getElementById（size-12）。onclick = size12; 
  

第一行执行函数 makeSizer 12 作为参数。它创建另一个无名的函数，将主体的字体大小设置为12并返回它。这意味着变量 size12 现在保存由 makeSizer 创建的函数。 size12 不持有 makeSizer 本身。

在第二行中，您将 size12 分配给可点击元素的onclick-Event。因此，此事件的事件处理程序现在是将字体大小设置为12的函数。它不执行函数 makeSizer ！

如果你改变函数 makeSizer ，使得没有内部函数，它不会返回任何东西，因此变量 size12 为空。然后，当您分配 size12 onclick-Event时，您将为onclick-Event分配无。这就是为什么没有发生。

I've been reading the mozdev article on closures and it has this fiddle example:

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

the idea is to call makeSizer with a size, from an on-click event and it changes the font size. But if you cut out the nameless function and just do this:

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

the clickable links stop having any effect and font size goes directly to the largest, as if the size16 link was clicked and the links don't have an on-click event anymore. Adding return doesn't change the behaviour.

(if it's unclear what I'm talking about, click the links above the examples, they have the fiddles)

My question is, why does this need closures/callbacks? Shouldn't a simple statement work? If it's about making a call to a function, why doesn't it work after the script loads? I get why it would default to the last size, since the function call now directly alters the size (and size16 is called last), instead of waiting for the call, but still, why doesn't it work after the page loads?

解决方案

To answer your question: Changing the font-size does not require closures.

Now to why removing the inner function does not work:

makeSizer is not the event handler. It is a function that creates functions and returns them. These functions are the event handlers. Let's break it down a bit:

var size12 = makeSizer(12);
document.getElementById("size-12").onclick = size12;

The first line executes the function makeSizer with 12 as a parameter. It creates another nameless function that sets the body's font-size to 12 and returns it. That means, that the variable size12 now holds the function that has been created by makeSizer. size12 does not hold the function makeSizer itself.

In the second line you assign size12 to the onclick-Event of the clickable element. So the event handler for this event is now the function that sets the font-size to 12. It does not execute the function makeSizer!

If you change the function makeSizer so that there is no inner function anymore, it does not return anything, hence the variable size12 is "empty". Then, when you assign size12 the the onclick-Event, you assign "nothing" to the onclick-Event. That is why nothing happens.

这篇关于为什么通过javascript更改字体大小与事件需要关闭？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！