JavaScript IIFE

Hiểu các chức năng từ trong ra ngoài và sau đó học cách khai thác chúng để viết mã JavaScript hiện đại, sạch sẽ là một kỹ năng quan trọng để trở thành một ninja JavaScript

Một trong những mẫu mã hóa thường được sử dụng với các chức năng đã có một cái tên lạ mắt cho chính nó. Biểu thức hàm được gọi ngay lập tức. Hay được gọi thân mật hơn là IIFE và được phát âm là “iffy. ”

Trước khi chúng ta có thể hiểu IIFE là gì và tại sao chúng ta cần nó, chúng ta cần nhanh chóng xem xét một vài khái niệm cơ bản xung quanh các hàm JavaScript

Định nghĩa hàm tự nhiên

Các nhà phát triển mới sử dụng JavaScript đương nhiên cảm thấy thoải mái với cú pháp sau khi xử lý các hàm

1. Các dòng 1–3 định nghĩa một hàm có tên sayHi
2. Ở dòng 5, chúng ta gọi nó bằng cú pháp “()” thông thường để gọi hàm

Cách tạo hàm này được gọi là “định nghĩa hàm” hoặc “khai báo hàm” hoặc “câu lệnh hàm”. Thông thường, các nhà phát triển mới sử dụng JavaScript không gặp khó khăn khi sử dụng cú pháp này vì nó gần giống với các hàm/phương thức trong các ngôn ngữ lập trình phổ biến khác

Các định nghĩa hàm này luôn bắt đầu bằng từ khóa hàm và luôn được theo sau bởi tên của hàm. Bạn không thể bỏ qua tên vì cú pháp không hợp lệ

biểu thức hàm

Đây là lúc mọi thứ bắt đầu trở nên thú vị hơn trong JavaScript. Hãy xem biểu thức hàm trông như thế nào

Ví dụ có vẻ đơn giản này có thể giúp bạn nâng kỹ năng JavaScript của mình lên một tầm cao mới

1. Dòng 1 khai báo biến msg và gán giá trị chuỗi cho nó
2. Dòng 2–4 khai báo biến sayHi và gán giá trị cho biến đó là kiểu hàm
3. Dòng 6 gọi hàm sayHi này

Dòng 1 là tầm thường để hiểu. Nhưng khi các nhà phát triển nhìn thấy dòng 2–4 lần đầu tiên, nó thường bất chấp mong đợi của họ nếu chúng đến từ các ngôn ngữ lập trình khác như Java

Về cơ bản, trong các dòng 2–4, chúng tôi đã gán một giá trị thuộc loại hàm cho một biến có tên sayHi

Trong ví dụ trên, hàm ở phía bên tay phải của toán tử gán thường được gọi là “biểu thức hàm. ” Chúng ở khắp mọi nơi trong JavaScript. Hầu hết các cuộc gọi lại mà bạn có thể đã viết thường là các biểu thức hàm

Bạn có thể đã sử dụng các biểu thức hàm này mà không hiểu nền tảng. Nhưng thành thạo chúng sẽ cung cấp cho bạn một số siêu năng lực JavaScript bí mật

Vì vậy, khái niệm quan trọng cần nhớ ở đây là các hàm gần giống như bất kỳ giá trị nào khác trong JavaScript. Chúng có thể ở phía bên phải của toán tử gán hoặc chúng có thể được chuyển thành đối số cho các hàm khác

Biểu thức hàm ẩn danh

Vâng, bạn đã biết chúng là gì. Ví dụ trên là một biểu thức hàm ẩn danh. Chúng ẩn danh vì chúng không có tên theo sau từ khóa hàm

Biểu thức hàm được đặt tên

Các biểu thức hàm có thể có tên. Cách sử dụng phổ biến và nhàm chán nhất của các biểu thức hàm được đặt tên này là với đệ quy. Đừng lo lắng nhiều về những điều này vì bạn có thể thành thạo IIFE mà không cần hiểu các biểu thức hàm được đặt tên

Vì vậy, sự khác biệt ở đây là biểu thức hàm có tên “fibonacci” có thể được sử dụng bên trong biểu thức hàm đó để gọi chính nó theo cách đệ quy. (Còn nhiều thứ khác như tên hàm hiển thị trong dấu vết ngăn xếp, v.v., nhưng chúng ta đừng lo lắng về chúng trong hướng dẫn này. )

Đầy đủ. Cho tôi xem IIFE hoặc tôi sẽ rời đi ngay bây giờ

Cảm ơn vì đã kiên nhẫn và kiên nhẫn là kỹ năng quan trọng nhất cần có để thành thạo JavaScript

Bây giờ bạn đã học các định nghĩa hàm và biểu thức hàm, hãy đi sâu vào thế giới bí mật của IIFE. Họ đến trong một vài biến thể phong cách. Trước tiên hãy xem một biến thể thực sự, rất dễ hiểu

Đó là những người bạn của tôi, là IIFE thân yêu của chúng ta đang hoạt động. Khi bạn sao chép mã này và thử trong bảng điều khiển của trình duyệt, bạn sẽ thấy cảnh báo từ mã trên dòng 2. Và đó là khá nhiều nó. Không ai có thể nhận được thông báo này để hiển thị lại

Đó là một chức năng đã chết ngay sau khi nó xuất hiện

Bây giờ hãy hiểu rằng cú pháp không trực quan. Tôi biết bạn đã phát hiện ra rằng “. ” ở dòng 1;

1. Như chúng ta đã thấy trước đây, một câu lệnh hàm luôn bắt đầu bằng từ khóa hàm. Bất cứ khi nào JavaScript xem từ khóa hàm là từ đầu tiên trong một câu lệnh hợp lệ, nó sẽ cho rằng một định nghĩa hàm sẽ diễn ra. Vì vậy, để ngăn điều này xảy ra, chúng tôi thêm tiền tố “. ” trước từ khóa hàm ở dòng 1. Về cơ bản, điều này thực thi JavaScript để xử lý bất kỳ điều gì xảy ra sau “. ” như một biểu thức
2. Nhưng điều thú vị nhất xảy ra ở dòng 3 khi chúng ta thực hiện biểu thức hàm đó ngay lập tức

Vì vậy, chúng ta có một biểu thức hàm được gọi ngay lập tức sau khi nó được tạo. Và đó là, các bạn của tôi, được gọi là IIFE bất kể biến thể phong cách được sử dụng để đạt được hiệu ứng này

Biến thể phong cách ở trên có thể được sử dụng bằng cách thay thế “. ” với “+”, “-”, hoặc thậm chí là “~”. Về cơ bản, bất kỳ toán tử đơn hạng nào cũng có thể được sử dụng

Bây giờ, hãy dùng thử trong bảng điều khiển. Và chơi xung quanh với IIFE với niềm vui của bạn

Tất cả những gì ký tự đầu tiên, “. ”, việc làm ở đây là biến hàm đó thành một biểu thức thay vì một câu lệnh/định nghĩa hàm. Và sau đó chúng tôi thực hiện chức năng đó ngay lập tức

Một biến thể nhanh khác về điều này được hiển thị bên dưới

Một lần nữa void về cơ bản là buộc hàm được coi là một biểu thức

Tất cả các mẫu trên đều hữu ích khi chúng ta không quan tâm đến giá trị trả về từ IIFE

Nhưng sau đó, nếu bạn muốn một giá trị trả về từ IIFE và bạn muốn sử dụng giá trị trả về đó ở nơi khác thì sao?

Phong cách IIFE cổ điển

Mẫu IIFE chúng ta đã thấy ở trên rất dễ hiểu. Vì vậy, tôi bắt đầu với phong cách đó trước thay vì phong cách truyền thống và được sử dụng rộng rãi khác

Như chúng ta đã thấy trong các ví dụ về IIFE ở trên, mấu chốt của mẫu IIFE là lấy một hàm và biến nó thành một biểu thức và thực thi nó ngay lập tức

Đầu tiên, hãy xem một cách khác để tạo một biểu thức hàm sau đó

Trong đoạn mã trên, một biểu thức hàm được đặt trong dấu ngoặc đơn ở dòng 1–3. Nó chưa phải là IIFE vì biểu thức hàm đó chưa bao giờ được thực thi. Bây giờ để chuyển đổi mã đó thành IIFE, chúng tôi có hai biến thể phong cách sau

Bây giờ chúng tôi có hai IIFE đang hoạt động. Có thể rất khó để nhận ra sự khác biệt giữa Biến thể 1 và Biến thể 2. Vì vậy, hãy để tôi giải thích điều đó

1. Trong Biến thể 1, trên dòng 4, dấu ngoặc đơn () để gọi biểu thức hàm được chứa bên trong dấu ngoặc đơn bên ngoài. Một lần nữa cần có dấu ngoặc đơn bên ngoài để tạo một biểu thức hàm từ hàm đó
2. Trong Biến thể 2, trên dòng 9, dấu ngoặc đơn () để gọi biểu thức hàm nằm ngoài dấu ngoặc đơn bao quanh biểu thức hàm

Cả hai biến thể được sử dụng rộng rãi. Cá nhân tôi thích Biến thể 1 hơn. Nếu chúng ta đi vào chi tiết, thì cả hai biến thể đều hơi khác nhau về cách chúng hoạt động. Nhưng đối với tất cả các mục đích thực tế và giữ cho phần hướng dẫn vốn đã dài này trở nên ngắn gọn, tôi sẽ nói rằng bạn có thể sử dụng một trong số chúng theo ý thích của mình. (Tôi sẽ liên kết đến một bài viết trong tương lai mà tôi dự định viết về toán tử () và toán tử dấu phẩy để làm rõ các sắc thái giữa hai kiểu này. )

Hãy giải quyết vấn đề này một lần nữa bằng cách xem một ví dụ hoạt động và hai ví dụ không hoạt động. Chúng tôi sẽ bắt đầu đặt tên cho IIFE của mình từ bây giờ vì sử dụng các chức năng ẩn danh thường không bao giờ là một ý tưởng hay

Bây giờ bạn đã biết tại sao cần có các dấu ngoặc đơn xung quanh biểu thức hàm để tạo thành một mẫu IIFE

Nhớ điều này. Bạn cần một biểu thức hàm để tạo thành một IIFE. Các câu lệnh/định nghĩa hàm không bao giờ được sử dụng để tạo IIFE

IIFE và các biến riêng tư

Một điều mà IIFE thực sự giỏi là khả năng tạo phạm vi chức năng cho IIFE.

Bất kỳ biến nào được khai báo bên trong IIFE đều không hiển thị với thế giới bên ngoài

Hãy xem một ví dụ

Trong ví dụ này, chúng tôi đã khai báo hai biến bên trong IIFE và chúng là riêng tư đối với IIFE đó. Không ai bên ngoài IIFE có quyền truy cập vào chúng. Tương tự, chúng ta có một chức năng init mà không ai có quyền truy cập bên ngoài IIFE. Nhưng hàm init có thể truy cập các biến riêng tư đó

Lần tới, bất cứ khi nào bạn tạo một loạt các biến và hàm trong phạm vi toàn cầu mà không ai sử dụng bên ngoài mã của bạn, chỉ cần bọc tất cả những thứ đó trong IIFE và nhận được rất nhiều nghiệp JavaScript tốt để làm điều đó. Mã của bạn sẽ tiếp tục hoạt động, nhưng bây giờ bạn không gây ô nhiễm phạm vi toàn cầu. Ngoài ra, bạn đang bảo vệ mã của mình khỏi ai đó có thể vô tình thay đổi toàn cầu của bạn hoặc đôi khi cố ý

Khi chúng ta thấy mẫu mô-đun, tôi sẽ giải thích cách cấp quyền truy cập đặc quyền và được kiểm soát cho các biến riêng tư này cho thế giới bên ngoài IIFE. Vì vậy, hãy đọc tiếp để biết rằng ngay cả khi bạn đã cảm thấy mình là một IIFE Ninja

IIFE có giá trị trả về

Nếu bạn không cần giá trị trả về từ IIFE, thì bạn luôn có thể sử dụng biến thể IIFE phong cách đầu tiên mà chúng tôi đã thấy với các toán tử đơn nguyên như. , +, void, v.v.

Nhưng một tính năng thực sự quan trọng và mạnh mẽ khác của IIFE là chúng có thể trả về một giá trị có thể được gán cho một biến.

1. Trong biến thể này, chúng tôi có một IIFE có câu lệnh trả về trên dòng 2
2. Khi chúng tôi thực thi đoạn mã trên, dòng 5 hiển thị cảnh báo với giá trị trả về từ IIFE

Về cơ bản, IIFE được thực thi, tất nhiên là ngay lập tức, và sau đó giá trị trả về từ nó được gán cho biến kết quả

Đây là một mẫu thực sự mạnh mẽ mà chúng ta sẽ sử dụng khi xem xét ví dụ về mẫu mô-đun

IIFE với các tham số

Không chỉ IIFE có thể trả về giá trị mà IIFE còn có thể nhận đối số khi chúng được gọi. Hãy xem một ví dụ nhanh

1. Trong ví dụ trên, ở dòng 1, IIFE có hai tham số hình thức lần lượt là msg, times
2. Khi chúng tôi thực thi IIFE trên dòng 5, thay vì dấu ngoặc đơn trống () mà chúng tôi đã thấy cho đến nay, chúng tôi hiện đang chuyển đối số cho IIFE
3. Dòng 2 và 3 sử dụng các tham số đó bên trong IIFE

Đây là một mẫu thực sự mạnh mẽ và chúng ta thường thấy điều này trong mã jQuery cũng như trong các thư viện khác

Trong ví dụ trên, chúng tôi đang chuyển jQuery, cửa sổ và tài liệu làm đối số cho IIFE trên dòng 3. Mã bên trong IIFE có thể gọi chúng là $, toàn cầu, tài liệu tương ứng

Dưới đây là một vài ưu điểm của việc chuyển những thứ này cho IIFE

1. JavaScript luôn thực hiện tra cứu phạm vi từ phạm vi của hàm hiện tại và tiếp tục tìm kiếm trong phạm vi cao hơn cho đến khi tìm thấy mã định danh. Khi chúng tôi chuyển tài liệu trên dòng 3, đó là lần duy nhất chúng tôi thực hiện tra cứu phạm vi ngoài phạm vi cục bộ cho tài liệu. Bất kỳ tham chiếu nào trong IIFE đến tài liệu sẽ không bao giờ cần phải tra cứu ngoài phạm vi địa phương của IIFE. Điều tương tự cũng áp dụng cho jQuery. Hiệu suất đạt được bằng cách này có thể không lớn dựa trên mức độ tầm thường hoặc phức tạp của mã IIFE, nhưng đây vẫn là một mẹo hữu ích để biết
2. Ngoài ra, các công cụ khai thác JavaScript có thể thu nhỏ các tên tham số được khai báo trong một hàm một cách an toàn. Nếu chúng ta không chuyển các tham số này dưới dạng tham số, thì các công cụ khai thác sẽ không thu nhỏ các tham chiếu trực tiếp đến tài liệu hoặc jQuery vì chúng nằm ngoài phạm vi của hàm này

Mẫu mô-đun JavaScript cổ điển

Bây giờ bạn đã thành thạo IIFE, hãy xem một ví dụ về mẫu mô-đun đặt IIFE và bao đóng trên steroid

Chúng tôi sẽ triển khai một đối tượng Sequence singleton cổ điển hoạt động trơn tru mà không ai có thể vô tình làm hỏng giá trị trình tự hiện tại

Chúng tôi sẽ viết mã này theo hai bước để chúng tôi hiểu những gì đang xảy ra dần dần

1. Trong ví dụ trên, chúng ta có một IIFE trả về một đối tượng. Xem dòng 7 và 8
2. Chúng tôi cũng có một biến cục bộ trong IIFE có tên là hiện tại
3. Giá trị trả về của IIFE, là một đối tượng trong ví dụ này được gán cho biến Sequence. Dòng 12 cảnh báo chính xác “đối tượng” vì chúng tôi đang trả lại một đối tượng từ IIFE

Bây giờ, hãy cải thiện điều này bằng cách thêm một vài hàm vào đối tượng mà chúng ta trả về

1. Trong ví dụ này, chúng tôi thêm hai hàm trên đối tượng mà chúng tôi trả về từ IIFE
2. Dòng 8–10 thêm hàm getCurrentValue trả về giá trị trong biến hiện tại
3. Các dòng 12–15 thêm hàm getNextValue tăng giá trị ở hiện tại lên 1 rồi trả về giá trị ở hiện tại

Vì biến hiện tại là riêng tư đối với IIFE, nên không ai ngoài các hàm có quyền truy cập vào nó thông qua bao đóng có thể sửa đổi hoặc truy cập biến hiện tại

(Nếu bạn muốn thành thạo kỹ thuật đóng cửa, vui lòng đọc hướng dẫn tuyệt vời và lan truyền của tôi về cách đóng cửa. Học cách đóng JavaScript thông qua Luật Karma. )

Bây giờ, đó là một mẫu JavaScript thực sự mạnh mẽ mà bạn đã học. Nó kết hợp sức mạnh của cả IIFE và đóng cửa

Đây là một biến thể rất cơ bản trên mẫu mô-đun. Có nhiều mẫu hơn, nhưng hầu hết tất cả chúng đều sử dụng IIFE để tạo phạm vi đóng riêng

Khi bạn có thể bỏ qua dấu ngoặc đơn

Dấu ngoặc đơn xung quanh biểu thức hàm về cơ bản buộc hàm trở thành một biểu thức thay vì một câu lệnh

Nhưng khi công cụ JavaScript rõ ràng rằng đó là một biểu thức hàm, thì về mặt kỹ thuật, chúng tôi không cần những dấu ngoặc đơn xung quanh như được hiển thị bên dưới

Trong ví dụ trên, từ khóa hàm không phải là từ đầu tiên trong câu lệnh. Vì vậy, JavaScript không coi đây là một câu lệnh/định nghĩa hàm. Tương tự, có những chỗ khác mà bạn có thể bỏ dấu ngoặc khi biết đó là một biểu thức

Nhưng tôi luôn thích sử dụng dấu ngoặc đơn ngay cả trong trường hợp này. Sử dụng dấu ngoặc đơn giúp cải thiện khả năng đọc bằng cách gợi ý theo phong cách cho người đọc ở dòng đầu tiên rằng hàm sẽ là IIFE. Rốt cuộc, họ không cần phải cuộn đến dòng cuối cùng của chức năng để nhận ra những gì họ vừa đọc qua là IIFE

Đó là tất cả những gì cần biết về IIFE để bắt đầu sử dụng chúng trong mã của bạn. Chúng không chỉ giúp tổ chức và thể hiện mã của bạn đẹp hơn mà còn giúp bạn giảm lỗi bằng cách tránh tạo ra các toàn cầu không cần thiết. Bây giờ, bạn là một Ninja IIFE được chứng nhận

Tôi thích viết những bài hướng dẫn JavaScript này. Thật thú vị khi viết chúng. Nhưng họ phải mất rất nhiều thời gian và công sức để đánh bóng và xuất bản. Nếu bạn thấy hướng dẫn này hữu ích, bạn có thể “vỗ tay” để thể hiện sự đánh giá cao của mình và giúp giới thiệu hướng dẫn này cho người khác. Vui lòng theo dõi tôi tại đây trên Medium và cả trên Twitter để nhận thông tin cập nhật bất cứ khi nào có bài viết mới được xuất bản

Nếu bạn có bất kỳ suy nghĩ và ý tưởng nào về hướng dẫn này, bạn luôn có thể để lại phản hồi bên dưới. Nếu các bạn muốn mình viết về chủ đề nào khác thì cũng để lại tin nhắn nhé

Bây giờ, đó là rất nhiều JavaScript, hãy hít một hơi thật sâu và tạm dừng JavaScript bằng cách đọc bài đăng mới nhất của tôi

IIFE trong JavaScript là gì?

Làm cách nào để gọi IIFE trong JavaScript?

Sử dụng JavaScript IIFE ở đâu?

Mã chính xác cho IIFE là gì?