Question

我是javascript的新手，我正在浏览一些Raphael演示代码。我对这是如何运作感到困惑......

if (R) {
    (function (dx, dy, R, value) {
        var color = "hsb(" + [(1 - R / max) * .5, 1, .75] + ")";
...

从我所看到的，这是声明一个带有4个参数的匿名函数。当此函数没有名称时，如何调用此函数？

演示页面.. http://raphaeljs.com/github/dots.html

JS文件.. http://raphaeljs.com/github/dots.js

Answer 1

要简要回答您的问题，请在取消后立即调用。

你遗漏了一个重要的部分，功能定义的结尾：

})(leftgutter + X * (j + .5) - 60 - R, Y * (i + .5) - 10, R, data[o]);

这说的是}，它结束了函数，然后是)，它结束了用(function打开的括号。如果仍然看起来像一个参数列表，那是因为它是。

一个说明性的例子：

(function(arg){ alert(arg); })("Hi!");

Answer 2

你没有包含足够的代码来告诉你。查看源代码，此方法立即执行。忽略函数的内容，它看起来像这样

(function (dx, dy, R, value) {

// ... stuff

dot[0].onmouseover = function () {
    if (bg) {
        bg.show();
    } else {
        var clr = Raphael.rgb2hsb(color);
        clr.b = .5;
        dt.attr("fill", Raphael.hsb2rgb(clr).hex);
    }
    lbl.show();
};

// more stuff

})(leftgutter + X * (j + .5) - 60 - R, Y * (i + .5) - 10, R, data[o]);

这一切都发生在循环中，变量在事件处理程序方法中引用。匿名方法创建一个新的范围，以便保留循环运行时的值，而不是让每个事件处理程序指向变量所持有的最后一个值。

Answer 3

后来被称为28行：

...
    })(leftgutter + X * (j + .5) - 60 - R, Y * (i + .5) - 10, R, data[o]);

所以这就是四个论点。

如果你没有给一个函数一个名字，你唯一可以做的就是在那里调用它或将它传递给其他人。如果您熟悉事件监听器，这是非常标准的：

window.addEventListener("load", function(event) {
    document.body.innerHTML = "hello";
}, false);

在这种情况下，它用于控制变量的范围，以保证在循环迭代完成后不重用它们的值。许多库将整个脚本封装在一个功能块中，仅用于创建一个新的范围。（与其他大括号语言不同，单独{ }块不创建新范围。）

(function() {
    var foo; // guaranteed to not leak or interfere with someone else's foo
    // 6000 lines ...
})();

了解JavaScript Scope and Closures。

Answer 4

创建并动态调用匿名函数。

的简化版本

function(a){<some method code>}(x);

在此，值x在函数中作为a传递。在您的示例中，稍后将调用该函数：

(function (dx, dy, R, value) {
    var color = "hsb(" + [(1 - R / max) * .5, 1, .75] + ")";
    ...
})(leftgutter + X * (j + .5) - 60 - R, Y * (i + .5) - 10, R, data[o]);

如何/何时调用此匿名函数？

4 个答案: