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