JavaScript Biểu thức hàm được gọi ngay lập tức (IIFE)

Biểu thức hàm được gọi ngay là một cách để thực thi các hàm ngay lập tức, ngay sau khi chúng được tạo. IIFE rất hữu ích vì chúng không gây ô nhiễm đối tượng toàn cục và chúng là một cách đơn giản để tách các khai báo biến


AnBiểu thức hàm được gọi ngay lập tức(IIFE cho bạn bè) là một cách để thực thi các chức năng ngay lập tức, ngay sau khi chúng được tạo.

IIFE rất hữu ích vìhọ không làm ô nhiễm đối tượng toàn cầuvà chúng là một cách đơn giản đểcô lập các khai báo biến.

Đây là cú pháp xác định IIFE:

(function() {
  /* */
})()

IIFE cũng có thể được định nghĩa bằng các hàm mũi tên:

(() => {
  /* */
})()

Về cơ bản, chúng ta có một hàm được định nghĩa bên trong dấu ngoặc đơn, sau đó chúng ta thêm vào()để thực thi chức năng đó:(/* function */)().

Các dấu ngoặc đơn đó thực sự là thứ làm cho hàm của chúng ta, về mặt nội bộ, được coi là một biểu thức. Nếu không, khai báo hàm sẽ không hợp lệ, vì chúng tôi không chỉ định bất kỳ tên nào:

Invalid function declaration

Khai báo hàm muốn có tên, trong khi biểu thức hàm không yêu cầu.

Bạn cũng có thể đặt dấu ngoặc đơn gọiphía trongdấu ngoặc đơn của biểu thức, không có sự khác biệt, chỉ là tùy chọn kiểu dáng:

(function() {
  /* */
}())

(() => { /* */ }())

Cú pháp thay thế sử dụng toán tử một ngôi

Có một số cú pháp khác thường mà bạn có thể sử dụng để tạo IIFE, nhưng nó rất hiếm khi được sử dụng trong thế giới thực và nó phụ thuộc vào việc sử dụngbất kìtoán tử một ngôi:

-(function() {
  /* */
})() +
  (function() {
    /* */
  })()

~(function() { /* */ })()

!(function() { /* */ })()

(không hoạt động với các hàm mũi tên)

Được đặt tên là IIFE

Một IIFE cũng có thể được đặt tên là các hàm thông thường (không phải hàm mũi tên). Điều này không thay đổi thực tế là hàm không "rò rỉ" vào phạm vi toàn cục và nó không thể được gọi lại sau khi thực thi:

(function doSomething() {
  /* */
})()

IIFE bắt đầu bằng dấu chấm phẩy

Bạn có thể thấy điều này trong tự nhiên:

;(function() {
  /* */
})()

Điều này ngăn chặn sự cố khi nối hai tệp JavaScript một cách mù quáng. Vì JavaScript không yêu cầu dấu chấm phẩy, bạn có thể nối tệp với một số câu lệnh ở dòng cuối cùng gây ra lỗi cú pháp.

Vấn đề này về cơ bản được giải quyết bằng các gói mã "thông minh" nhưwebpack.

Tải xuống miễn phí của tôiSổ tay dành cho Người mới bắt đầu JavaScript


Các hướng dẫn js khác: