2012-02-01 39 views
44

Tôi đã đọc nguồn JS từ Twitter — trên đường để cải thiện nền tảng kiến ​​thức JS của tôi, khi tôi đi qua con đường lạ gọi chức năng ẩn danh:Javascript nặc danh gọi hàm

!function($) { 
    ... 
}(window.jQuery); 

... và các công trình này ! :)

Đó là hiển nhiên đối với tất cả mọi người, rằng đây:

function ($) { ... } (window.jQuery) 

không hoạt động (lỗi cú pháp), trong khi một điều này là đúng:

(function ($) { .... })(window.jQuery) 

bất cứ ai có thể vui lòng giải thích kỳ diệu này (tại sao trường hợp với !function hoạt động)?

+1

Xem http://benalman.com/news/2010/11/immediately-invoked-function-expression/ để biết các mẫu IIFE hợp lệ khác. –

+1

@AtesGoral, cảm ơn bạn, bài viết này rất hữu ích. –

Trả lời

61

Khi từ khóa function được đáp ứng ở vị trí tuyên bố (làm mã thông báo đầu tiên trong câu lệnh), khai báo hàm được biểu thị dưới dạng câu lệnh hàm . Các câu lệnh chức năng được treo lên đầu phạm vi, không thể được gọi ngay lập tức và phải có tên.

Khi từ khóa được đáp ứng ở một vị trí biểu thức (tức là không phải là những dấu hiệu đầu tiên trong một tuyên bố, trong ví dụ của bạn ! là dấu hiệu đầu tiên), khai báo hàm được thể hiện như một biểu chức năng, có thể ẩn danh và trả về giá trị của hàm mới được tạo. Vì nó trả về giá trị của hàm mới được tạo ra, bạn có thể ngay lập tức gọi nó bằng cách thêm dấu ngoặc đơn sau nó.

Bao bì các tuyên bố bên trong ngoặc cũng làm như vậy nhưng là phổ biến hơn so với tiền tố nó với một ! hoặc +:

(function() { 
    ... 
}()); 
+3

Có lẽ họ đã sử dụng! thay vì gói nó vào() vì nó sử dụng ít hơn 50% ký tự. :) Ít đi qua dây = thời gian tải nhanh hơn. – jinglesthula

0

Theo như dấu chấm than, đó không phải là ma thuật. Nó chuyển đổi kết quả thành true/false.

Sự cố của bạn có thể là chức năng ẩn danh của bạn có lỗi bên trong.

+4

Chỉ cần thử đánh giá 'hàm (a) {alert (a); } (5); '- bạn sẽ gặp lỗi. Sau đó, thay thế 'function' bằng'! Function' và thử lại. Cũng lưu ý rằng '(hàm (a) {...}) (5)' và '(hàm (a) {...} (5))' hoạt động thành công. –

6

Biểu mẫu thứ hai function() {} là một tuyên bố . Toán tử ! chuyển đổi số này thành một biểu thức . Bạn cũng sẽ tìm thấy các trường hợp mọi người sử dụng - hoặc + trước từ khóa function.

Khi bạn có biểu thức đánh giá hàm, bạn có thể gọi hàm đó bằng cách sử dụng toán tử ().

khác (có lẽ dễ hiểu hơn) cách để đạt được lưu cùng hiệu quả là với một tập hợp các dấu ngoặc đơn:

(function(x) { body; })(arg); 

Bằng cách đặt các chức năng bên trong ngoặc đơn, bạn lại chuyển nó sang một biểu thức, trong đó đánh giá cho một hàm. Hàm này được gọi với một đối số là arg.

0

này nghe có vẻ giống như một cú pháp lỗi javascript:

một hàm có tên có thể là một tuy nhiên, một hàm ẩn danh chỉ xem nó như một biểu thức.

Pro: bạn có thể làm function() { ... }()

Côn: bạn không thể làm function() { ... }

Nhưng tại sao mọi người sẽ muốn xác định một chức năng ẩn danh mà không gọi nó? Vì vậy, con không thực sự là một mối quan tâm.

Các vấn đề liên quan