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中的第二个工作（“点击”部分返回“未定义”。

我错过了什么？ .on中的函数（“click”段从属于zeichneKnoten函数，对吗？我可以在zeichneKnoten函数中访问arrayPosition就好了。这是一些一般的层次结构，我误解了JavaScript变量/函数或者这可能是某些东西特殊的d3.js库，我用来绘制圆圈？

感谢您的时间。

Answer 1

我认为这里发生的事情是，click circle 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)); }。尝试使用自调用函数。

.on("click",...)

<强>说明：我在这里使用javascript闭包。在单击圆圈之前，单击功能不会执行。当有人点击圆圈时，arrayPosition的值变得不确定。现在，如您所见，在将函数分配给圆的onclick事件时，我们自行调用该函数，该函数又返回另一个函数。执行position后立即执行外部功能。这意味着，当外部函数返回内部函数时，它将具有arrayPosition变量的闭包，其中包含arrayPosition的值。因此，即使arrayPosition未定义，我们也不关心每个圆圈将拥有它自己的函数赋值，并且它自己的position值存储在{{1}}闭包内。

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

1 个答案: