Nói ngắn gọn
Tóm lược
Ở dạng đơn giản nhất, kỹ thuật này nhằm mục đích bọc mã bên trong một phạm vi chức năng .
Nó giúp giảm cơ hội:
- xung đột với các ứng dụng / thư viện khác
- phạm vi gây ô nhiễm (rất có thể là toàn cầu)
Nó không phát hiện khi tài liệu đã sẵn sàng - nó không phải là một loại document.onloadcũng khôngwindow.onload
Nó thường được gọi là một Immediately Invoked Function Expression (IIFE)hoặc Self Executing Anonymous Function.
Mã giải thích
var someFunction = function(){ console.log('wagwan!'); };
(function() { /* function scope starts here */
console.log('start of IIFE');
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})(); /* function scope ends */
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Trong ví dụ trên, bất kỳ biến nào được xác định trong hàm (nghĩa là được khai báo sử dụng var) sẽ là "riêng tư" và có thể truy cập trong phạm vi hàm CHỈ (như Vivin Paliath đặt nó). Nói cách khác, các biến này không thể nhìn thấy / có thể truy cập bên ngoài hàm. Xem bản demo trực tiếp .
Javascript có chức năng phạm vi. "Các tham số và biến được định nghĩa trong hàm không hiển thị bên ngoài hàm và rằng một biến được xác định ở bất kỳ đâu trong hàm có thể nhìn thấy ở mọi nơi trong hàm." (từ "Javascript: Bộ phận tốt").
Thêm chi tiết
Mã thay thế
Cuối cùng, mã được đăng trước đó cũng có thể được thực hiện như sau:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
};
myMainFunction(); // I CALL "myMainFunction" FUNCTION HERE
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Xem bản demo trực tiếp .
Nhưng cai rê
Lặp lại 1
Một ngày nọ, có lẽ ai đó đã nghĩ rằng "phải có một cách để tránh đặt tên 'myMainFunction', vì tất cả những gì chúng ta muốn là thực hiện nó ngay lập tức."
Nếu bạn quay lại những điều cơ bản, bạn sẽ thấy rằng:
expression: một cái gì đó đánh giá đến một giá trị. I E3+11/xstatement: dòng (s) mã đang làm gì đó NHƯNG nó không đánh giá thành giá trị. I Eif(){}
Tương tự, các biểu thức hàm đánh giá một giá trị. Và một hậu quả (tôi giả sử?) Là chúng có thể được gọi ngay lập tức:
var italianSayinSomething = function(){ console.log('mamamia!'); }();
Vì vậy, ví dụ phức tạp hơn của chúng tôi trở thành:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
}();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Xem bản demo trực tiếp .
Lặp lại 2
Bước tiếp theo là suy nghĩ "tại sao lại có var myMainFunction =nếu chúng ta thậm chí không sử dụng nó!?".
Câu trả lời rất đơn giản: hãy thử loại bỏ điều này, chẳng hạn như dưới đây:
function(){ console.log('mamamia!'); }();
Xem bản demo trực tiếp .
Nó sẽ không hoạt động vì "khai báo hàm không thể xâm phạm" .
Thủ thuật là bằng cách loại bỏ var myMainFunction =chúng ta đã chuyển đổi biểu thức hàm thành khai báo hàm . Xem các liên kết trong "Tài nguyên" để biết thêm chi tiết về điều này.
Câu hỏi tiếp theo là "tại sao tôi không thể giữ nó như một biểu thức chức năng với cái gì khác hơn var myMainFunction =?
Câu trả lời là "bạn có thể", và thực tế có nhiều cách bạn có thể làm điều này: thêm a +, a !, a -hoặc có thể gói trong một cặp dấu ngoặc đơn (như bây giờ được thực hiện theo quy ước), và tôi tin hơn. Ví dụ như:
(function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.
hoặc là
+function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console
hoặc là
-function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console
Vì vậy, một khi sửa đổi có liên quan được thêm vào cái đã từng là "Mã thay thế" của chúng tôi, chúng tôi sẽ quay lại mã chính xác giống như mã được sử dụng trong ví dụ "Giải thích mã"
var someFunction = function(){ console.log('wagwan!'); };
(function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
Đọc thêm về Expressions vs Statements:
Làm sáng tỏ phạm vi
Một điều người ta có thể tự hỏi là "điều gì xảy ra khi bạn KHÔNG định nghĩa biến 'đúng' bên trong hàm - tức là thực hiện một phép gán đơn giản?"
(function() {
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
myOtherFunction = function(){ /* oops, an assignment instead of a declaration */
console.log('haha. got ya!');
};
})();
myOtherFunction(); // reachable, hence works: see in the console
window.myOtherFunction(); // works in the browser, myOtherFunction is then in the global scope
myFunction(); // unreachable, will throw an error, see in the console
Xem bản demo trực tiếp .
Về cơ bản, nếu một biến không được khai báo trong phạm vi hiện tại của nó được gán một giá trị, thì "việc tra cứu chuỗi phạm vi xảy ra cho đến khi tìm thấy biến hoặc chạm vào phạm vi toàn cầu (tại đó nó sẽ tạo ra nó)".
Khi ở trong môi trường trình duyệt (so với môi trường máy chủ như nodejs), phạm vi toàn cục được xác định bởi windowđối tượng. Do đó chúng ta có thể làm window.myOtherFunction().
Mẹo "Thực hành tốt" của tôi về chủ đề này là luôn luôn sử dụng varkhi xác định bất cứ điều gì : cho dù đó là số, đối tượng hoặc chức năng, và ngay cả khi trong phạm vi toàn cầu. Điều này làm cho mã đơn giản hơn nhiều.
Ghi chú:
- javascript không có
block scope(Cập nhật: chặn các biến cục bộ phạm vi được thêm vào trong ES6 .)
- javascript chỉ có
function scope& global scope( windowphạm vi trong môi trường trình duyệt)
Đọc thêm về Javascript Scopes:
Tài nguyên
Bước tiếp theo
Khi bạn có được IIFEkhái niệm này , nó sẽ dẫn đến module pattern, thường được thực hiện bằng cách tận dụng mẫu IIFE này. Chúc vui vẻ :)