Hướng dẫn iife trong javascript
Nội dung bài viết Nội dung chính Video học lập trình mỗi ngàyỞ bài trước chúng ta đã đi tìm hiểu về khái niệm "Discuss About Closures In JavaScript." Một khái niệm mà các bạn hỏi rất nhiều và hôm nay chúng ta sẽ đi thêm một khái niệm mà cũng nhiều bạn cũng đang mơ hồ và không biết giải thích như thế nào trước nhà tuyển dụng. Đó là IIFE (Immediately Invoked Function Expression). Có rất nhiều bài viết về khái niệm này nhưng, mình khá hài lòng và hiểu nhiều hơn khi đọc bài viết này của Anh Thâu Nguyễn. Dưới đây xin republish bài của của anh. Tham gia cùng chúng tôi: Facebook: Cộng đồng lập trình javascript Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam IIFE là viết tắt của Immediately Invoked Function Expression, có nghĩa là khởi tạo một function và thực thi nó ngay lập tức. (function(){ //code here })(); Ta có thể truyền tham số cho IIFE như sau: (function(window, name){ //code here })(window, name); Vậy tại sao lại dùng IIFE? Bởi vì IIFE như là một các hộp đóng gói code của chính nó. Do đó, những biến trong hộp này là private, bên ngoài(global) không thể truy xuất hay thay đổi được. Và nếu vô tình bạn đặt tên biến giống với global thì cũng không bị ảnh hưởng bên ngoài. Xem ví dụ sau nhé: var greeting = 'Hola'; var name = 'Thau'; (function(window, name){ //code here var greeting = 'Hello'; console.log(greeting + ' ' + name) })(window, name); Bạn có thể thấy rằng ta có hai biến greeting. Một là toàn cục, một trong IIFE. Hai biến này nằm ở hai context và bộ nhớ khác nhau, nên khi ta thay đổi biến greeting trong IIFE không làm ảnh hưởng greeting ở ngoài và ngược lại. Có một điều lưu ý là khi tạo thư viện bằng khối IIFE thì bạn nên sử dụng ‘use strict’ để tránh được một số lỗi về type, scope trong js. Nếu như ví dụ trên nếu không có strict mode như sau: var greeting = 'Hola'; var name = 'Thau'; (function(window, name){ //code here greeting = 'Hello'; console.log(greeting + ' ' + name) })(window, name); Biến greeting ở đây vô tình là global và sẽ thay đổi luôn giá trị của biến bên ngoài. Cho nên để hạn chế điều này bạn có thể sử dụng strict mode. (function(window, name){ //code here 'use strict'; greeting = 'Hello'; console.log(greeting + ' ' + name) })(window, name); Ở đoạn code này JS sẽ throw error vì bạn đang cố truy cập một biến gobal trong IIFE Cùng xem một ví dụ khác: for(var i = 0; i < 10; i++){ setTimeout(function(){ console.log(i);//biến i ở đây là biến i của for }); } setTimeout sẽ chạy khi vòng for chạy xong, do đó i = 10; for(var i = 0; i < 10; i++){ (function(i){//IIFE tạo ra một scope khác cho từng i, nên giá trị của i là khác nhau setTimeout(function(){ console.log(i); }); })(i);//biến i ở đây được tạo riêng cho từng IIFE } Mỗi vòng lặp IIFE tạo một scope mới cho i, nên i ở đây là khác nhau. Tóm lại, IIFE hữu ích khi chúng ta muốn đóng gói code để nó không ảnh hưởng đến các biến toàn cục. Nó hữu ích khi chúng ta viết những thư viện. Sau đó, chúng ta nhúng vào những trang web khác nhau thì cũng không ảnh hưởng đến code của chúng ta. Tham gia cùng chúng tôi: Facebook: Cộng đồng lập trình javascript Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam Xin cảm ơn Source : http://thaunguyen.com - Javascript – Web Development – Personal Development 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: 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 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: 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:
Cú pháp thay thế sử dụng toán tử một ngôiCó 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:
(không hoạt động với các hàm mũi tên) Được đặt tên là IIFEMộ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:
IIFE bắt đầu bằng dấu chấm phẩyBạn có thể thấy điều này trong tự nhiên:
Đ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. Các hướng dẫn js khác:
|