chức năng Javascript trống? Nó có nghĩa là gì?

Question

Vì vậy, phiên bản ngắn, những gì tôi không hiểu là dòng mã này:

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

Phiên bản dài, nhìn vào những chức năng:

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

Mã này là từ Raphael sân chơi, mà có nghĩa là nó triển khai thư viện raphael. Vì vậy, dòng mã duy nhất ở trên cùng mà tôi không hiểu (bên trong biểu thức try/catch), giả sử sao chép mã mà người dùng nhập vào được lưu trữ bên trong cd.value vào hàm. Nhưng sao điều đó có thể xảy ra?

Bạn có thể truy cập vào trang ở đây: http://raphaeljs.com/playground.html

Answer 1

Bạn hiểu những gì new Function() không? Nó tương tự như eval() trong đó phải mất một chuỗi mã javascript - nó sử dụng chuỗi đó để xác định một hàm. Vì vậy, các dòng bạn đăng sẽ tương đương với thực hiện:

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

Thông tin thêm: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function

Answer 2

Chức năng lớp constructor

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

cấu trúc này đánh giá các mã như một chuỗi, và là chậm hơn nhiều so với giao chức năng ẩn danh. Nó chỉ nên được sử dụng ở những nơi thực sự cần thiết.

Chức năng lớp constructor với các thông số

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

Dường như cd.value() cung cấp một chuỗi với mã javascript có nghĩa là sẽ được phân tích và biên soạn. Sau đó bạn gọi nó là ...

Bạn nên kiểm tra xem mã trong cd.value trông như thế nào.

Answer 3

Đó là cơ bản tạo ra một đối tượng chức năng mới với một cơ thể năng động ... là cách tốt nhất tôi có thể giải thích nó là như thế này:

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

Dưới đây là một nguồn tài nguyên để đọc thêm: http://www.permadi.com/tutorial/jsFunc/index.html

Answer 4

Chức năng Function tạo ra một trường hợp chức năng mới với tham số cuối cùng là mã của hàm.

Vì vậy, nó về cơ bản không giống như:

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

Phương pháp call chỉ đơn giản là gọi hàm với các mục trong mảng paper cho các đối số.

Answer 5

Đối số cho Function là các tham số được đặt tên của hàm và sau đó là phần thân của hàm. Trong trường hợp này, bạn có một phần tử có id là code và thuộc tính value trên phần tử đó là một số mã Javascript.Hãy xem xét rằng bạn có HTML này ở đâu đó trong tài liệu của bạn:

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

    alert(a+b); 
</textarea> 

Bây giờ, ví dụ mã của bạn, nếu chạy chống lại yếu tố code này, sẽ tạo ra các chức năng sau:

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

    alert(a+b); 
} 

Bạn có thể có một cái nhìn tại the Mozilla Development Center's docs on Function để nhận được giải thích đầy đủ hơn về cách đối tượng Function hoạt động.