Understand JavaScript - Immediately invoked function expression
Trong bài viết này mình sẽ nói đến một điều cực kì phổ biến đó , tên gọi của nó cực kì dài dòng và khó hiểu Immediately Invoked Function Expression , chúng ta tạo ra nó như thế nàovà nó thực sự làm việc như thế nào ? tại sao chúng ta cần sử dụng nó.?
Chúng ta đã thấy sự khác biệt giữa function statement và function expression
- function statement xảy ra như là một tuyên bố , nó đơn giản là thực hiện cầu lệnh mà không thực sự tạo bất kì thứ gì trong bộ nhớ máy tính. Bạn khai báo một hàm và gọi nó JS thấy vật đặt nó vào trong bộ nhớ nhưng khi nó bắt đầu thực thi ,
- function expression bạn chú ý rằng function expression không được đặt vào trong bộ nhớ ở giai đoạn hosting..vì đơn thuần nó là giá trị của một biến , vì vậy bạn phải gọi nó sau khi nó được định nghĩa , nếu gọi trước sẽ xảy ra lỗi.
=> Một lưu ý thêm rằng bạn nên nhớ mọi function trong JS đề là Object chính xác hơn thì nó là một loại đối tượng đặc biệt nó có thêm một property so với object thông thường là property code.
Những kiến thức này bạn đã được học ở bài trước vậy chúng ta có thể làm gì với property code đó.??
=> Chúng ta có thể gọi nó . Bạn có thể nhìn thấy rằng chúng ta đã gọi property code và thực thi nó ở dòng số 70 và dòng số 64..nhưng đây là cách gọi thông thường chúng ta có thể gọi nó một cách nhanh chóng hơn ,
- Trong trường hợp này mình gọi nó ngay sau khởi tạo nó , bạn nhớ rằng vì đây là một function expression nên nó không bị hosting , trong giai đoạn Code Execution , chương trình được JSE chạy qua từng dòng JSE thiết lập giá trị cho biến greeting , nó sẽ khởi tạo một object (vì bản chất hàm là một object) , ngay khi khởi tạo xong JSE nhận thấy mình sử dụng () lên lập tức tạo ra một EC mới để chạy hàm này .
- Như vậy giá trị của biến greeting là kết quả của hàm chứ không phải bản thân đó như function expression (= underfine)
Kết quả :
Như bạn có thể thấy mình gọi hàm ngay tại thời điểm mà mình tạo ra nó, một lần nữa mình nói lại rằng mọi hàm đều là đối tượng , một Object kiểu Function . Mình đơn giản chỉ đặt dấu () sau khi định nghĩa hàm điều này sẽ gọi hàm ngay sau khi tạo ra nó đây chính là ví dụ điển hình của khái niệm
Imediately Invoked Funtion Expression (IIFE)
=> Chúng ta có một Function Expression và gọi nó NGAY sau khi khởi tạo nó.
Hãy thay đổi đoạn code bên trên một chút.
Kết quả :
Kết quả không có gì bất ngờ ..nhưng nếu mình đặt dấu ngoặc đơn sau nó thì sao ?
Kết quả :
Khi chương trình chạy EC tạo ra đẩy biến greeting gán nó bằng underfine => khi chạy đến dòng khởi tạo hàm , hàm được khởi tạo và gọi ngay lập tức và trả về giá trị là một string. => giá trị string này được gán cho biến greeting.
Kết quả :
Nó sẽ báo lỗi do Syntax Paser thấy rằng bạn bắt đầu một dòng bằng keyword function nó dự đoán rằng bạn sẽ tạo ra một function statement nó muốn bạn cho nó một cái tên (cách hoạt động của Syntax Parser mình đã giới thiệu qua ở bài đầu tiên)
Vậy làm cách nào để chúng ta có thể lừa thằng Syntax Parser để nó hiểu rằng chúng ta muốn tạo ra một function statement.
Bạn hãy nhớ rằng dấu ngoặc trong JS là một toán tử và bạn chỉ có thể sử dụng dấu ngoặc đơn với các biểu thức (expression)
=> Như vậy JSE giả định rằng mọi thứ bạn viết trong () đều là một biểu thức => chúng ta đặt hàm bên trong dấu () nó sẽ cho rằng bạn đang tạo ra một function expression rằng bạn đang tạo ra một function expression một cách nhanh chóng.
Vậy để chạy hàm này chúng ta làm thế nào ?
Vậy bạn đặt câu hỏi điều này có tác dụng gì chúng ta nên sử dụng chúng trong trường hợp nào ?
hãy quay lại với EC .
Khi code được load lần đầu tiên chúng ta có một EC Global nhưng rõ ràng không có function statement nào hoặc biến nào được hosting.
- Ngay khi JSE chạy đến các dòng của hàm toàn bộ ngay lập tức gọi hàm .
- JSE chạy đến thấy cặp ngoặc đơn nó sẽ tạo ra một EC mới và JSE sẽ chạy trong hàm qua 2giai đoạn Create Phase và Execution Phase , biến greeting được hosting lưu vào trong bộ nhớ và đặt trong Variable Environment của hàm đó , như vậy các biến của bạn được giữ an toàn .
Nhận xét
Đăng nhận xét