Nó là một biểu thức hàm, nó là viết tắt của Biểu thức hàm được gọi ngay lập tức (IIFE). IIFE đơn giản là một chức năng được thực thi ngay sau khi nó được tạo. Vì vậy, do chức năng phải đợi cho đến khi nó được gọi để thực thi, IIFE được thực thi ngay lập tức. Hãy xây dựng IIFE bằng ví dụ. Giả sử chúng ta có một hàm add có hai số nguyên là arg và trả về tổng cho phép biến hàm add thành IIFE,
Bước 1: Xác định chức năng
function add (a, b){
return a+b;
}
add(5,5);
Bước2: Gọi hàm bằng cách gói toàn bộ khai báo dấu chấm vào dấu ngoặc đơn
(function add (a, b){
return a+b;
})
//add(5,5);
Bước 3: Để gọi hàm ngay lập tức, chỉ cần xóa văn bản 'thêm' khỏi cuộc gọi.
(function add (a, b){
return a+b;
})(5,5);
Lý do chính để sử dụng IFFE là để duy trì phạm vi riêng tư trong chức năng của bạn. Bên trong mã javascript của bạn, bạn muốn đảm bảo rằng, bạn không ghi đè bất kỳ biến toàn cục nào. Đôi khi bạn có thể vô tình xác định một biến ghi đè lên một biến toàn cục. Hãy thử làm ví dụ. giả sử chúng ta có một tệp html có tên iffe.html và các mã bên trong thẻ body là-
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Chà, đoạn mã trên sẽ thực thi với bất kỳ câu hỏi nào, bây giờ giả sử bạn tuyên bố một biến có tên là tài liệu vô tình hoặc cố ý.
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
bạn sẽ kết thúc bằng SyntaxError : khai báo lại tài liệu thuộc tính toàn cầu không thể cấu hình.
Nhưng nếu mong muốn của bạn là từ chối một tài liệu tên biến, bạn có thể thực hiện bằng cách sử dụng IFFE.
<body>
<div id = 'demo'></div>
<script>
(function(){
const document = "hi there";
this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
console.log(document);
})();
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Đầu ra:
Hãy thử một ví dụ khác, giả sử chúng ta có một đối tượng máy tính như dưới đây-
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
</script>
</body>
Chà, nó hoạt động như một bùa mê, điều gì sẽ xảy ra nếu chúng ta vô tình gán lại giá trị của đối tượng máy tính.
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
calculator = "scientific calculator";
console.log(calculator.mul(5,5));
</script>
</body>
vâng, bạn sẽ kết thúc với TypeError: Calculator.mul không phải là một hàm iffe.html
Nhưng với sự giúp đỡ của IFFE, chúng ta có thể tạo một phạm vi riêng tư nơi chúng ta có thể tạo một máy tính tên biến khác và sử dụng nó;
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
var cal = (function(){
var calculator = {
sub:function(a,b){
return a-b;
},
div:function(a,b){
return a/b;
}
}
console.log(this.calculator.mul(5,10));
console.log(calculator.sub(10,5));
return calculator;
})();
console.log(calculator.add(5,10));
console.log(cal.div(10,5));
</script>
</body>
Đầu ra:
