Question

我正在查看此http://raphaeljs.com/australia.html示例的源代码，并试图解释为了使用RaphaelJS图形库创建类似项目所做的工作。

但是，我对部分代码感到困惑。具体来说，作者在for循环内部的函数中使用参数“st”，之前没有定义，而第二个参数“state”具有。我不确定我错过了什么，但有人可以解释一下这里发生了什么吗？这是一个通用参数还是对特定事物的调用？

for (var state in aus) {
            aus[state].color = Raphael.getColor();
            (function (st, state) {
                st[0].style.cursor = "pointer";
                st[0].onmouseover = function () {
                    current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
                    st.animate({fill: st.color, stroke: "#ccc"}, 500);
                    st.toFront();
                    R.safari();
                    document.getElementById(state).style.display = "block";
                    current = state;
                };
                st[0].onmouseout = function () {
                    st.animate({fill: "#333", stroke: "#666"}, 500);
                    st.toFront();
                    R.safari();
                };
                if (state == "nsw") {
                    st[0].onmouseover();
                }
            })(aus[state], state);
        }

Answer 1

st是周围闭包的命名参数：

(function (st, state) {
    // ...
})(aus[state], state);

此被称为一个立即调用的函数表达式（通常称为自执行块或临时范围）用来“保存“从周围环境中提取代码的状态。

为了从闭包外部引入变量，可以将它们作为参数传递给尾随括号（此处为aus[state], state），并将它们命名为函数的签名（此处为st, state）。

参考

Temporary Scope和Closures and Looping关于John Resig的学习高级JavaScript 互动教程
Closures在Mozilla开发者网络上

进一步阅读

Immediately-Invoked Function Expression

Answer 2

使用值aus[state]和state调用该函数（查看倒数第二行）。所以它相当于：

for (var state in aus) {
        aus[state].color = Raphael.getColor();

        var st = aus[state]; // This line replaces the function

        st[0].style.cursor = "pointer";
        st[0].onmouseover = function () {
            current && aus[current].animate({fill: "#333", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
            st.animate({fill: st.color, stroke: "#ccc"}, 500);
            st.toFront();
            R.safari();
            document.getElementById(state).style.display = "block";
            current = state;
        };

        st[0].onmouseout = function () {
            st.animate({fill: "#333", stroke: "#666"}, 500);
            st.toFront();
            R.safari();
        };

        if (state == "nsw") {
            st[0].onmouseover();
        }
    }

使用Raphael JS矢量图形库 - 帮助解释示例

2 个答案:

参考

进一步阅读