javascript - d3js onClick 函数无法从上级函数访问变量

Question

我似乎不太明白一个函数什么时候可以访问外部/全局变量，什么时候不能。据我了解，在函数外部定义的变量可以在函数内部使用，因为对它来说变量是全局的...

但这似乎并不适用 - 或者我又犯了一个愚蠢的错误。

我有一个对象数组“knotenListe[ ]”。我使用 for 循环调用函数为每个对象绘制一个圆。作为参数，我使用对象本身“knotenHandle”和 knotenListe[] 数组中当前对象的索引作为“arrayPosition”:

function zeichneKnoten (knotenHandle,arrayPosition) {
    console.log("Function called. Parameter arrayPosition=" + arrayPosition);
    kreisListe[arrayPosition] = svg.append("circle")
        .style("stroke", "white")
        .style("fill", "grey")
        .attr("r", 20)
        .attr("cx", knotenHandle.positionX)
        .attr("cy", knotenHandle.positionY)
        .attr("id", knotenHandle.name)
        .on("click", function(){
            console.log("onClick triggered. arrayPosition=" + arrayPosition);
            doStuff(arrayPosition);
        });
}

我有两个 console.log 语句来检查 arrayPosition 的值。第一个工作正常，但 .on("click"段中的第二个返回 "undefined"。

我错过了什么？ .on("click"段中的函数从属于 zeichneKnoten 函数，对吗？我可以在 zeichneKnoten 函数中访问 arrayPosition 就好了。这是我对 JavaScript 变量/函数的一些一般层次结构的误解，还是这可能是什么我用来画圆圈的 d3.js 库有什么特殊之处？

感谢您的宝贵时间。

Answer 1

我认为这里发生的事情是，当您单击 圆 时，arrayPosition 变为未定义。尝试使用自调用函数。

function zeichneKnoten (knotenHandle,arrayPosition) {
    console.log("Function called. Parameter arrayPosition=" + arrayPosition);
    kreisListe[arrayPosition] = svg.append("circle")
        .style("stroke", "white")
        .style("fill", "grey")
        .attr("r", 20)
        .attr("cx", knotenHandle.positionX)
        .attr("cy", knotenHandle.positionY)
        .attr("id", knotenHandle.name)
        .on("click", function(position){
            return function(){ 
               console.log("onClick triggered. arrayPosition=" + position);
               doStuff(position);
            }
        }(arrayPosition));
}

解释:我在这里使用 javascript 闭包的优势。 On Click 函数在单击圆圈之前不会执行。当有人点击圆圈时，arrayPosition 的值变得未定义。现在，如您所见，当将函数分配给圆的 onclick 事件时，我们正在自调用该函数，该函数又返回另一个函数。 .on("click",...) 执行后，外部函数立即执行。这意味着，当外部函数返回内部函数时，它将有一个 position 变量的闭包，其中包含 arrayPosition 的值。因此，即使 arrayPosition 变得未定义，我们也不在乎，因为每个圆都有自己的函数分配，它自己的 arrayPosition 值存储在 position 闭包中。