empty Javascript function? What does it mean?

Question

So the short version, what I don't understand is this line of code:

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

The long version, look at these functions:

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);
                }
            })();
        };

This code is from Raphael playground, which mean it implements the raphael library. So the single line of code at the top that I don't understand (it's inside the try/catch expression), suppose to copy the code that user enter that is stored inside cd.value into the function. But how is that possible?

You can visit the page here: http://raphaeljs.com/playground.html

Answer 1

Do you understand what new Function() does? It is similar to eval() in that it takes a string of javascript code - it uses that string to define a function. So the line you posted would be equivalent to doing:

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

More info: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function

Answer 2

The Function class constructor

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

This construct evaluates the code as a string, and is much slower than assigning anonymous functions. It should only be used in places where it is actually needed.

The Function class constructor with parameters

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

It looks like cd.value() provides a string with javascript code that is going to be parsed and compiled. Later you call it...

You should check how the code in cd.value looks like.

Answer 3

It's basically creating a new function object with a dynamic body... the best way I can explain it is like this:

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

Here's a resource to read more: http://www.permadi.com/tutorial/jsFunc/index.html

Answer 4

The Function function creates a new function instance with the last parameter as the code of the function.

So it basically does the same as:

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

The call method simply calls the function with the items in the paper array for arguments.

Answer 5

The arguments to Function are the named parameters of the function, and then the body of the function. In this case, you have an element whose id is code and the value attribute on that element is some Javascript code. Consider that you have this HTML somewhere in your document:

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

  alert(a+b);
</textarea>

Now, your code example, if run against this code element, would create the following function:

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

  alert(a+b);
}

You can take a look at the Mozilla Development Center's docs on Function to get a fuller explanation about how the Function object works.