对使用实际关闭方式的怀疑

Question

我正在尝试查找有关Java闭包的更多信息，并正在经历以下过程： https : //developer.mozilla.org/en/JavaScript/Guide/Closures#Practical_closures

根据本文，通过使用这样的功能：

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;

虽然我在这里理解了概念-即size12，size14和size16成为允许访问内部函数的闭包，但我不禁感到这是不必要的。 拥有它不是更容易吗？

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

，然后用这些调用它？

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

谁能告诉我我的想法是否正确-也许我只是Java的新手，并且不了解在这种情况下使用闭包的优势，在这种情况下，如果您能解释一下Java的优势，我将非常高兴这样做。

在此先感谢大家。

Answer 1

不，你不能那样做。

好像您已经写过：

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

该函数将立即被调用 ，样式将立即应用，并且不会注册.onclick处理程序，因为该函数的返回值是undefined 。

该示例的真正目的是表明您可以从另一个函数返回一个函数，然后可以将该结果分配给事件处理程序。

---

如果未修改makeSizer()则可以按建议分配处理程序，而无需中间变量，即：

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

但是如果您按照描述的方式更改makeSizer() ， 则将无法使用。

如果不止一次使用同一个sizer，它的效率也比将“ sizer”存储在变量中的效率低。

Answer 2

是的，这些变量（ sizeN ）是不必要的。 您可以直接将makeSizer()的结果分配为处理程序，这看起来要好得多。

但是，使用这些变量不是闭包的概念。 此示例中的闭包是函数makeSizer ，该函数返回一个函数 （即使没有参数），该函数仍然可以访问size变量。

不过，您需要了解两者之间的区别

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

和

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

执行makeSizer(5)不会执行任何操作，它会返回一个函数，该函数在调用时将大小设置为预定义的大小。 而是执行resize(5)会直接设置大小。 您不能将后一个函数的结果用作事件处理程序。

Answer 3

对于您提供的示例，当然不需要闭包，但是我想只是为了简单地介绍这个概念。 在某些情况下，闭包是最好的解决方案：考虑如何在javascript中实现“私有”属性，或者何时需要使用curryng封装参数（例如，用于回调函数）。

希望以下示例对您有所帮助：

var makeSequencer = function() {
    var _count = 0; // not accessible outside this function
    var sequencer = function () {
        return _count++;
    }
    return sequencer;
}

var fnext = makeSequencer();
var v0 = fnext();     // v0 = 0;
var v1 = fnext();     // v1 = 1;
var vz = fnext._count // vz = undefined