javascript - 关于Javascript闭包的问题

Question

我正在使用 JQuery 和 jsTree，但我对闭包的工作原理遇到了一些困惑。

我有一个具有 .jsTree 成员和 .populateTree 方法的对象。该方法是用一个字符串数组调用的，它应该用它来创建 jsTree 的节点。

jsTree构建了一个树形控件，其中每个节点都有一个 anchor “”，其中包含该节点的文本。我想单击文本来切换节点的打开或关闭，就像单击树中的 +/- 按钮一样。因此，我尝试添加一个 click() 函数来执行此操作，但出现了意外的行为。

所以，这是代码:

populateTree: function populateTree(nodeNames)
{
    if (!this.jsTree) // Note 1
        return;

    var me = this; // Note 2

    for (var i = 0; i < nodeNames.length; i++)
    {
        var nodeName = nodeNames[i];

        var node = this.jsTree.create_node(-1, "last", { state: 'open', data: nodeName }); //Note 3

        this.jsTree.create_node(node, "last", { data: "child one" }); // Note 4
        this.jsTree.create_node(node, "last", { data: "child two" });
        this.jsTree.create_node(node, "last", { data: "child three" });

        var anchor = node.find("a"); // Note 5
        anchor.click(function() { me.jsTree.toggle_node(node); }); // Note 6
    }
},

• 注1:这是一个javascript对象的成员函数，因此当调用它时，“this”指向该对象。该对象包含一个 jsTree 成员变量，该变量应该已经初始化为包含一个没有节点的 jsTree 对象。

• 注释2:我们在注释6中定义了一个“click”函数，当调用该函数时，“this”不会指向包含jsTree的对象，所以我们将“this”保存在名为“me”的变量中，当“click”函数执行时，该变量将在作用域内，因为创建函数创建了一个闭包，其中包括对定义函数时作用域内的所有变量的引用.

• 注解3:对于数组中的每个元素，我们创建一个顶级节点(父节点为-1)。

• 注释 4:对于我们创建的每个顶级节点，我们创建三个子节点。

• 注释 5:每个节点都包含一个 anchor 元素(“”)，我们要为其附加“点击”功能。

• 注释6:在“click”函数中，“me”应该指向包含树的对象(参见注释2)，“node”应该指向节点我们刚刚创建的，在当前循环中(参见注释 3)。

我的问题？无论我单击哪个 anchor ，它始终是最后一个打开和关闭的顶级节点。就像我们创建的每个“click”函数的闭包都有一个仅引用最后一个“node”变量的闭包。我认为这并不是闭包的工作方式。

有人可以帮助我理解我的理解哪里出了问题吗？

谢谢。

Answer 1

一旦循环完成执行，以及许多秒后，当用户单击执行匿名函数的树，它将查看创建时关闭的范围，并查看 node 的值是它最后保存的值，就​​像您注意到的那样，这是最终的值循环的迭代。

快速修复可能是:

anchor.click((function(node){ return function() { me.jsTree.toggle_node(node); }; })(node));

这样，节点的闭合值就是传递的值，每次迭代都会保存不同的值。