闭包中局部变量的错误行为

Question

我被下面的代码困住了。首先，我将描述用例：使用 ColorGradient 实例调用函数“addPreset”。当调用 this.listController.addItem(...) 时，会提供名为 onSelect 的回调函数，每次触发 listController-item 上的 onSelect 事件时都会调用该函数。我想做的是将 GLab.ColorSlider.applyColorGradient(...) 的调用包装到一个新的闭包中，以便为 addPreset 的“cg”参数”分配值”* 将被“捕获”在其中，但它不起作用

问题：现在每次调用 addPreset 时，cg 的值（通过调用传递）。将覆盖之前分配的所有值。但是， this.presetList 始终保留正确的值（我期望在闭包函数中捕获的值）。即使插入匿名函数来破坏范围也不会。请帮助

我。:-)

谢谢，到目前为止

function addPreset(cg) {
    if (!(cg instanceof ColorGradient)) {
        throw new TypeError("PresetManager: Cannot add preset; invalid arguments received");
    }

    var newIndex = this.listController.addItem(cg.getName(), {
        onSelect: (function(cg2) {
            return function() {
                // addPreset's scope should now be broken
                GLab.ColorSlider.applyColorGradient(cg2);
                console.log(cg2);
            }
        })(cg)
    });

    this.presetList[newIndex] = cg;
}

@bobince：当然可以，

上面的代码片段是 PresetManager.js 的一部分，并且 listController 是该类的一个实例。强>ListWrapper.js

http:// /code.assembla.com/kpg/subversion/nodes/GradientLab/lib-js/PresetManager.js http://code.assembla.com/kpg/ subversion/nodes/GradientLab/lib-js/ListWrapper.js

@Matt：cg是ColorGradient的一个实例。我自己的自定义类。此外，可以保证的是，始终将“有效”值作为 cg 传入。 （如果您有几分钟的时间，您可以将整个汇编存储库下载为 zip 存档。在启用 Firebug 控制台的情况下解压缩并在 FF > 3.5 中进行测试。）

Answer 1

答案可以在这个问题中找到：JavaScript不支持带有局部变量的闭包吗？

Answer 2

如果我错了，请有人纠正我，因为我对 JavaScript 闭包和作用域还很陌生。但在我看来，您所拥有的包装匿名函数只是为它返回的函数提供适当的作用域变量/闭包。可以这样简化吗？

function addPreset(cg) {
            if (!(cg instanceof ColorGradient)) {
                throw new TypeError("PresetManager: Cannot add preset; invalid arguments received");
            }

            var closured = cg;
            var newIndex = this.listController.addItem(cg.getName(), {
                onSelect: function() {
                    // addPreset's scope should now be broken
                    GLab.ColorSlider.applyColorGradient(closured);
                    console.log(closured);
                }
            });

            this.presetList[newIndex] = cg;
        }

Answer 3

只是想告诉你，我终于自己解决了我的问题。我花了将近两天的时间（在业余时间）来解决这个问题，但我认为这是值得的。至少我的代码仍然很优雅，而且我确实通过闭包得到了整个事情。我们来看一下：

我的错误代码

第 1 部分（共 2 部分）：

function addPreset(cg) {
    if (!(cg instanceof ColorGradient)) {
        throw new TypeError("PresetManager: blablabla");
    }
    // calls the function in Part 2
    var newIndex = this.listController.addItem(cg.getName(), {
        onSelect: (function(cg2) {
            return function() {
                // addPreset's scope should now be broken
                GLab.ColorSlider.applyColorGradient(cg2);
                console.log(cg2);
            }
        })(cg)
    });

    this.presetList[newIndex] = cg;
}

第 2 部分（共 2 部分）：

// The method being called by this.listController.addItem(..)
function addItem(caption, args) {
    var _this = this,
        currIndex,
        id,
        newItem
        itemSelectCb = (!!args && typeof args.onSelect == "function") ?
                            args.onSelect :
                            undefined;

    currIndex = this.numOfItems;
    id = this.ITEM_ID_PREFIX + currIndex;
    newItem = this.$itemTemplate
        .clone()
        .text(caption)
        .attr("id", id)
        .bind("click", function(e) {
            e.stopPropagation();
            if (typeof itemSelectCb != "undefined") {
                itemSelectCb();
            }    
            _this._onSelect($(".ListWrapperItem").index(this));
        })
        .appendTo(this.$container);

    this.numOfItems = $("." + this.DEFAULT_ITEM_CLASS, this.$container).length;

    return currIndex;
}

固定代码

该错误出现在第 2 部分中；当调用 jQuery 的绑定方法来添加点击事件侦听器时，我使用了一个匿名函数（=新闭包），但在内部引用了 itemSelectCb ；因此匿名函数的作用域与 addItem 的作用域保持“连接”。每次我调用 addItem 时，都会向 itemSelectCb 分配另一个值，这会导致未知的副作用，即先前创建的匿名函数内对 itemSelect 的所有引用都指向该值。这意味着，最后分配的值已被所有匿名函数使用。

要“打破”范围，我所要做的就是修改第 2 部分的行> 创建 jQuery 绑定的事件处理程序的位置。固定代码如下所示：

function addItem(caption, args) {
    var _this = this,
        currIndex,
        id,
        newItem
        itemSelectCb = (!!args && typeof args.onSelect == "function") ?
                            args.onSelect :
                            undefined;

    currIndex = this.numOfItems;
    id = this.ITEM_ID_PREFIX + currIndex;
    newItem = this.$itemTemplate
        .clone()
        .text(caption)
        .attr("id", id)
        .bind("click", (function(itemSelectCb) {    

            return function(e) {                    
                e.stopPropagation();
                if (typeof itemSelectCb != "undefined") {
                    itemSelectCb();
                }    
                _this._onSelect($(".ListWrapperItem").index(this));                    
            }

        })(itemSelectCb))
        .appendTo(this.$container);

    this.numOfItems = $("." + this.DEFAULT_ITEM_CLASS, this.$container).length;

    return currIndex;
}