Javascript d3js onClick函数可以'；t从上级函数访问变量

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

然而，这似乎并不适用——否则我又犯了一个愚蠢的错误

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

我有两个console.log语句来检查arrayPosition的值。第一个可以正常工作，但是.on（“click”）段中的第二个返回“undefined”

我遗漏了什么？在.on（“单击”）中的函数segment从属于zeichneKnoten函数，对吗？我可以访问zeichneKnoten函数中的arrayPosition。这是我对JavaScript变量/函数的一般层次结构的误解，还是我用来画圆的d3.js库的特殊内容

---

谢谢您的时间。

我想这里发生的事情是，当您在

圆圈上单击
时，
数组位置
正在变得
未定义
。请尝试使用自调用函数

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事件时，我们正在自调用函数，该函数反过来返回另一个函数.Outer函数在“单击”上的
.on后立即执行执行
。这意味着，当外部函数返回内部函数时，它将有一个
位置
变量的闭包，该变量包含
数组位置
的值。因此，即使数组位置变得未定义，我们也不在乎，因为每个圆都将有自己的函数赋值，并有自己的
数组位置
存储在
位置中的值
闭包。
谢谢，这似乎有效！但是我必须承认，我不知道确切的原因/方式。我不太理解您对返回函数（）的构造.你能试着一步一步地解释它是如何工作的吗？添加了一些解释。如果你认为这是你需要的，请接受答案。
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));
}