Question

所以短版本，我不明白的是这行代码：

(new Function("paper", "window", "document", cd.value)).call(paper, paper);

长版本，看看这些功能：

window.onload = function () {
            var paper = Raphael("canvas", 640, 480);
            var btn = document.getElementById("run");
            var cd = document.getElementById("code");

            (btn.onclick = function () {
                paper.clear();
                paper.rect(0, 0, 640, 480, 10).attr({fill: "#fff", stroke: "none"});
                try {
                    (new Function("paper", "window", "document", cd.value)).call(paper, paper);
                } catch (e) {
                    alert(e.message || e);
                }
            })();
        };

此代码来自Raphael playground，这意味着它实现了raphael库。所以我不理解的顶部单行代码（它在try / catch表达式中），假设将用户输入的代码复制到函数中，该代码存储在cd.value中。但那怎么可能呢？

您可以在此处访问此页面：http://raphaeljs.com/playground.html

Answer 1

您了解new Function()的作用吗？它类似于eval()，因为它需要一串javascript代码 - 它使用该字符串来定义函数。所以你发布的那一行等同于：

(function(paper,window,document){
  /* the code in the cd.value string goes here */
}).call(paper,paper);

更多信息：https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function

Answer 2

Function类构造函数

functionName = new Function("function code should be written here");

此构造将代码评估为字符串，并且比分配匿名函数慢得多。它应该仅用于实际需要它的地方。

带参数的Function类构造函数

functionName = new Function("varName","varName2","etc.","function code");

看起来cd.value()提供了一个包含javascript代码的字符串，该代码将被解析和编译。后来你称之为......

您应该检查cd.value中的代码是什么样的。

Answer 3

它基本上是用动态体创建一个新的函数对象......我能解释它的最好方法就是这样：

function (paper, window, document) where {} = cd.value;

以下是阅读更多内容的资源：http://www.permadi.com/tutorial/jsFunc/index.html

Answer 4

Function函数创建一个新函数实例，最后一个参数作为函数的代码。

所以它基本上与：

相同

eval("function(paper,window,document){"+cd.value+"}").call(paper, paper);

call方法只是使用paper数组中的项来调用函数。

Answer 5

Function的参数是函数的命名参数，然后是函数体。在这种情况下，您有一个id为code的元素，该元素的value属性是一些Javascript代码。请考虑您在文档中的某个位置使用此HTML：

<textarea id="code">
  var a = "foo";
  var b = "bar";

  alert(a+b);
</textarea>

现在，您的代码示例（如果针对此code元素运行）将创建以下函数：

function(paper, window, document) {
  var a = "foo";
  var b = "bar";

  alert(a+b);
}

您可以查看the Mozilla Development Center's docs on Function，以便更全面地了解Function对象的工作原理。

空的Javascript函数？这是什么意思？

5 个答案: