为什么通过javascript改变字体大小需要关闭？

Question

我一直在阅读上的封文章mozdev它具有this小提琴例如：

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

的想法是调用makeSizer的大小，从上单击事件，它改变了字体大小。但是，如果你切出的匿名函数，只是做this：

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

的可点击的链接停下来有什么影响和字体大小直接到最大，仿佛被点击和size16链接的链接没有一个点击事件了。添加return不会改变行为。

（如果它是不清楚我说的，点击上面的例子中的链接，他们有小提琴）

我的问题是，为什么这种需要关闭/回调？不应该有简单的陈述吗？如果是为了调用函数，为什么在脚本加载后它不工作？我明白了为什么它会默认为最后一个尺寸，因为函数调用现在直接改变了尺寸（而size16最后被调用），而不是等待调用，但是为什么在页面加载后它不工作？

Answer 1

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

我们为什么去除内功能不起作用：

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

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

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

在第二行中，您将size12分配给clickable元素的onclick事件。所以这个事件的事件处理函数现在是将font-size设置为12的函数。它确实不是执行功能makeSizer！

如果您更改函数makeSizer，以便不再有内部函数，它不会返回任何内容，因此变量size12是“空的”。然后，当您将onclick-Event分配给size12时，将“nothing”分配给onclick-Event。这就是为什么没有发生。

Answer 2

没有回调的情况是，大小正在快速连续设置为12，然后是14，然后是16，如脚本加载。

回调是需要的，因为您正在定义点击链接时会发生什么。

要了解版本makeSizer，你应该先了解以下的版本，它应该做同样的事情：

var setSize12 = function() { document.body.style.fontSize = '12px'; }; 
var setSize14 = function() { document.body.style.fontSize = '14px'; }; 
var setSize16 = function() { document.body.style.fontSize = '16px'; }; 

document.getElementById('size-12').onclick = setSize12; 
document.getElementById('size-14').onclick = setSize14; 
document.getElementById('size-16').onclick = setSize16; 

Answer 3

因为onclick事件需要的功能。所以当你只是返回document.body.style.fontSize = size + 'px';时，它不会被执行。

Answer 4

在非工作示例，只要你定义变量

var size12 = makeSizer(12); 

你调用makeSizer(12)执行该功能并更改大小。

与此相反，在工作例如，当你定义变量

var size12 = makeSizer(12); 

要创建一个功能（这就是在这种情况下makeSixer()返回）与参数12但因为你只是返回函数你没有执行它。

Answer 5

您分配给onclick的值需要是由浏览器将click事件作为参数调用的函数。 你希望用size参数调用你的函数。这是行不通的。

解决的办法是找到一种方法将大小绑定到传递给onclick的函数中，并为此使用闭包。

如果在mozdev代码仔细观察，你会看到，当onclick处理他们分配不能指望任何参数的函数：

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

这个功能确实使用size变量，但它的范围没有定义。相反，它们会在定义size变量的函数上创建一个闭包。这个封闭他们通过你想给参数：

function makeSizer(size) { 
    // size is defined here, because it is a parameter 
    return function() { 
    // same size is here 
    document.body.style.fontSize = size + 'px'; 
    }; 
} 

的makeSizer('12px')返回值是上面的函数是不带参数并绑定到'12px'大小变量变化的中文字体。

Answer 6

由于您在点击事件中切换字体大小，因此您需要在执行单击事件时指定一个函数作为事件处理函数。

在代码示例中，函数被存储到变量中，被分配了makeSizer函数的返回值。

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

这需要makeSizer保留提供的参数的值，以便它可以在事件实际上是发射引用。闭包是一种机制，用于在调用内部函数时保留外部函数的作用域。在这种情况下，内部函数存储在您已声明的变量中，并将其称为每个相应锚标记的onclick。这些闭包包含由于闭包而声明函数时提供的size参数。

老实说，我认为这只是一个不好的例子。如果我设置通过Javascript的字体大小，我会简单地使用匿名函数：

document.getElementById("something").onclick = function(){ 
    document.body.style.fontSize = '16px'; 
}; 

或功能：

document.getElementById("something").onclick = function(){ 
    makeSizer(12); 
};