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

我认为这里发生的情况是，当您在circle 上click 时，arrayPosition 正在变为undefined。尝试使用自调用函数。

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