Một hàm tự gọi được gọi tự động sau định nghĩa của nó trong JavaScript. Có 2 loại cú pháp để viết nó. Họ cũng chấp nhận các tham số.

Bạn đang xem : hàm tự gọi trong javascript

Các hàm tự gọi (SIF) là một tính năng JavaScript mạnh mẽ cho phép bạn thực thi mã tự động. Trong bài viết này, chúng ta sẽ khám phá lý do tại sao bạn nên sử dụng SIF và cách tạo chúng. Chúng tôi cũng sẽ cung cấp một số triển khai ví dụ để xem chúng hoạt động như thế nào.

Hàm tự gọi (thực thi) trong JavaScript là gì?

Hàm tự gọi là một chức năng thực thi tự động khi nó được xác định. Nói cách khác, nó gọi chính nó. Một hàm ẩn danh được định nghĩa bên trong một tập hợp các dấu ngoặc đơn theo sau bởi một tập hợp các dấu ngoặc đơn khác. Nó còn được gọi là hàm ẩn danh thực thi hoặc một biểu thức hàm được gọi ngay lập tức ( IIFE ).

Có nhiều loại hàm khác nhau có sẵn trong JavaScript. Giống như hàm thông thường, một hàm ẩn danh, hàm nhà máy , hàm tạo , v.v … Nhưng một hàm tự thực thi hoạt động khác với các hàm còn lại.

Mặc dù mọi người gọi nó bằng các tên khác nhau nhưng mục đích hoặc cú pháp của nó đều giống nhau. Bạn có thể viết một hàm ẩn danh tự thực thi rất dễ dàng và nó cũng đơn giản để sử dụng.

Để hiểu loại hàm này, cách nó hoạt động và sự khác biệt so với một hàm thông thường, bạn nên biết về khai báo hàm thực thi .

  function myFunction () {
    // viết mã cho bạn
}  

Đây được gọi là khai báo hàm . Chúng tôi sử dụng từ khóa function và đặt tên cho hàm. Chúng tôi viết mã của chúng tôi ở giữa các dấu ngoặc nhọn làm thân hàm. Bạn cũng có thể sử dụng hàm mũi tên nếu muốn.

Nhưng khi chúng tôi viết một hàm như thế này, nó sẽ không được thực thi. Khai báo một hàm có nghĩa là lưu nó để sử dụng sau này. Bạn có thể sử dụng hàm đã khai báo của mình bằng cách gọi hàm với tên hàm theo sau là một tập hợp các dấu ngoặc đơn.

  myFunction ();  

Bây giờ, tôi đang gọi hoặc thực thi myFunction () như thế này. Một hàm bình thường phải được thực thi bằng cách gọi tên của nó.

Nếu một hàm không có tên, nó được gọi là hàm ẩn danh . Vì một hàm tự gọi không nhất thiết phải gọi một cách rõ ràng bằng tên, chúng ta có thể sử dụng một hàm không tên (ẩn danh).

Cách viết một hàm tự gọi trong JavaScript

Có 2 loại cú pháp mà bạn có thể làm theo để viết một hàm tự thực thi trong JavaScript. Có:

  (function () {
  // nội dung hàm
} ());
 

Cú pháp thay thế:

  (function () {
    // nội dung hàm
}) ();

// Hàm mũi tên
(() = & gt; {
    // nội dung hàm
}) ();

 

Cú pháp thứ hai phổ biến hơn và được sử dụng rộng rãi hơn cú pháp đầu tiên. Một sự khác biệt giữa chúng là bạn có thể sử dụng hàm mũi tên với cú pháp thứ hai. Nhưng nếu bạn cố gắng sử dụng hàm arrow với cú pháp đầu tiên, nó sẽ gây ra lỗi.

Tôi luôn thích cú pháp thứ hai hơn cú pháp khác. Hầu hết thời gian, bạn sẽ thấy mọi người sử dụng cái này thay vì cái đầu tiên. Bởi vì nó rất dễ viết và trông cũng rất gọn gàng và đơn giản.

  // --- Bước đầu tiên
() ()

// --- Bước thứ hai
(hàm số () {
    // nội dung hàm
}) ()  

Đầu tiên , nhập hai bộ dấu ngoặc đơn cạnh nhau. Thứ hai , viết hàm của bạn giữa tập hợp các dấu ngoặc đơn đầu tiên. Tập hợp các dấu ngoặc đơn thứ hai sẽ hoạt động như việc thực thi hàm.

Vậy là xong. Bạn có thể viết hàm tự gọi trong JavaScript với 2 bước đơn giản sau.

Cách hàm tự gọi hoạt động trong JavaScript

Bạn đã biết trong JavaScript, một hàm tự gọi có thể được gọi (thực thi) mà không được gọi. Khi một công cụ JavaScript tìm thấy một hàm như thế này, nó sẽ ngay lập tức chạy mã bên trong hàm.

Một công cụ JavaScript thực thi hàm này chỉ một lần sau khi khai báo. Vì hàm này ẩn danh nên nó không giữ tham chiếu đến hàm đó

Sau khi hàm này được thực thi, sẽ không có tham chiếu của hàm này trong bộ nhớ như một hàm thông thường. Do đó, bạn không thể sử dụng hàm này lần thứ hai, kể cả giá trị trả về của nó.

Ví dụ về một hàm tự thực thi trong JavaScript

Chúng ta đã thấy cú pháp và cách các hàm tự thực thi công việc. Bây giờ chúng ta hãy xem một ví dụ về trường hợp sử dụng trong thế giới thực.

Giả sử bạn có một trang web hiển thị danh sách tên. Nó có thể là bất cứ thứ gì. Trong ví dụ này, tôi đang hiển thị danh sách các tên ngôn ngữ lập trình.

  const Languages ​​= ['Python', 'PHP', 'Go', 'Rust', 'C ++', 'Swift', 'Java', 'JavaScript'];
 

Bạn hiển thị những tên này trên trang web của mình. Nhưng bạn muốn hiển thị những tên này theo một thứ tự khác nhau mỗi khi người dùng tải lại trang. Điều đó có nghĩa là bạn cần xáo trộn mảng trong JavaScript khi trang web của bạn tải.

Đây là một nơi hoàn hảo để sử dụng -thực hiện hàm ẩn danh trong JavaScript vì bạn phải xáo trộn mảng của mình chỉ một lần khi tải trang của bạn.

  const Languages ​​= ['Python ',' PHP ',' Go ',' Rust ',' C ++ ',' Swift ',' Java ',' JavaScript '];

(() = & gt; {
    ngôn ngữ.reverse (). forEach ((item, index) = & gt; {
        const j = Math.floor (Math.random () * (index + 1));
        [ngôn ngữ [chỉ mục], ngôn ngữ [j]] = [ngôn ngữ [j], ngôn ngữ [chỉ mục]];
    });
}) ();

console.log (ngôn ngữ);
// ['Rust', 'Python', 'Swift', 'PHP', 'Java', 'C ++', 'Go', 'JavaScript']
 

Ở đây, tôi đã tạo một hàm tự thực thi. Khi trang tải, chức năng này sẽ tự động được thực thi và xáo trộn mảng. Vì vậy, mỗi lần chúng ta sẽ nhận được mảng ngôn ngữ theo một thứ tự khác nhau.

Cách chuyển các tham số trong một hàm tự gọi trong JavaScript

Trong ví dụ trước, bạn đã sử dụng < mã> ngôn ngữ mảng trực tiếp bên trong hàm tự thực thi. Nhưng bạn có thể chuyển mảng dưới dạng tham số nếu muốn.

Một hàm tự thực thi có thể chấp nhận các tham số khi nó được thực thi. Nó rất dễ thiết lập.

  const Languages ​​= ['Python', 'PHP', 'Go', 'Rust ',' C ++ ',' Swift ',' Java ',' JavaScript '];

((danh sách) = & gt; {
    list.reverse (). forEach ((item, index) = & gt; {
        const j = Math.floor (Math.random () * (index + 1));
        [list [index], list [j]] = [list [j], list [index]];
    });
}) (ngôn ngữ);

console.log (ngôn ngữ);
// ['JavaScript', 'Java', 'Swift', 'PHP', 'C ++', 'Python', 'Rust', 'Go']
 

Lần này bên trong hàm ẩn danh tự gọi của chúng tôi, chúng tôi không sử dụng trực tiếp mảng ngôn ngữ . Thay vào đó, tôi chuyển mảng này qua bộ dấu ngoặc đơn thứ hai và nhận mảng dưới dạng danh sách trong hàm ẩn danh.

Bạn có thể chuyển như nhiều tham số như bạn muốn cho hàm này bằng cách thêm chúng vào giữa các dấu ngoặc đơn được phân tách bằng dấu phẩy (,) . Bạn sẽ nhận được các tham số đó trong hàm ẩn danh đó giống như một hàm thông thường.

Hàm tự gọi không đồng bộ trong JavaScript

Bạn cũng có thể sử dụng async ... await trong các hàm tự gọi trong JavaScript. Điều này là cần thiết nếu bạn muốn tải một số dữ liệu từ máy chủ khi trang web tải.

Tìm hiểu thêm về cú pháp async / await đây .

Bạn có thể xác định một hàm tự thực thi bằng cách sử dụng async await để thực hiện lệnh gọi máy chủ không đồng bộ. Khi trang web của bạn tải, chức năng này sẽ tự động gửi yêu cầu đến máy chủ.

  (async () = & gt; {
    const response = await fetch ('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json ();

    console.log (dữ liệu);
}) ();

console.log ('tải xong');
 

Trong ví dụ này, tôi đang thực hiện cuộc gọi không đồng bộ bằng cách sử dụng API fetch () trong JavaScript. Điều này trả lại một lời hứa với tôi rằng tôi đang sử dụng async await tại đây.

Khi chúng tôi thực thi chức năng này trên một trang web, bạn sẽ thấy rằng điều thứ hai < code> console.log () sẽ hiển thị đầu tiên vì hàm tự thực thi của chúng ta sẽ chạy không đồng bộ. Sau đó, nó sẽ tải dữ liệu.

Cũng đọc: Lập trình đồng bộ VS không đồng bộ với các ví dụ

Sự khác biệt giữa chức năng tự gọi và chức năng bình thường

Chúng ta sẽ ngay lập tức nhận thấy một vài điểm khác biệt nếu chúng ta xem xét một hàm tự gọi và một hàm bình thường vì có một số khác biệt về cú pháp hoặc hành vi của chúng.

  • Chúng ta có thể sử dụng tên hàm cho một hàm thông thường hoặc định nghĩa nó là một hàm không tên (ẩn danh). Nhưng chúng tôi luôn sử dụng một hàm ẩn danh như một hàm tự thực thi.
  • Chúng trông cũng khác nhau do cú pháp của chúng. Một hàm bình thường sử dụng từ khóa function hoặc nó được định nghĩa là một hàm mũi tên mà không có bất kỳ dấu ngoặc đơn nào thêm. Nhưng chúng tôi luôn khai báo một hàm tự gọi giữa một tập hợp các dấu ngoặc đơn theo sau bởi một tập hợp các dấu ngoặc đơn khác.
  • Một hàm bình thường không bao giờ có thể tự thực thi. Có 2 bước: khai báo thực hiện . Đầu tiên, chúng ta khai báo một hàm và sau đó thực thi nó bằng cách gọi tên của nó. Nhưng trong trường hợp của một hàm tự gọi, cả hai bước xảy ra đồng thời. Nó được thực thi ngay sau khi khai báo. Bạn không cần phải gọi nó như một hàm thông thường.

Nhưng không có gì khác biệt khi một công cụ JavaScript thực thi phần thân của hàm (mã bên trong hàm), ngoại trừ cách chúng được gọi và cú pháp của chúng.

Cách sử dụng của các hàm tự thực thi trong JavaScript

Các hàm tự thực thi là một cách tuyệt vời để chạy một đoạn mã ngay lập tức, chỉ một lần. Bạn cũng có thể tổ chức mã của mình và tạo một mô-đun riêng biệt bằng cách sử dụng một đoạn mã.

Chúng cũng thực sự hữu ích cho mục đích thử nghiệm - bạn có thể dễ dàng tạo một hàm tự thực thi nhỏ để kiểm tra một tính năng hoặc dòng mã mà không phải lo lắng về các biến toàn cục hoặc các tác dụng phụ khác.

Đây là một ứng cử viên tuyệt vời khi bạn muốn khai báo một hàm và thực thi nó mà không cần gọi hàm một cách rõ ràng.

Sử dụng loại nếu bạn muốn chạy nó một lần mà không cần giữ lại tham chiếu. Sau khi thực thi, công cụ JavaScript sẽ xóa mọi thứ liên quan đến hàm này khỏi bộ nhớ.

Ưu điểm của các hàm tự gọi trong JavaScript

Sau khi biết về các hàm tự gọi và cú pháp của chúng, một câu hỏi có thể nảy ra trong đầu bạn: Bạn sẽ nhận được lợi ích gì khi sử dụng hàm tự gọi trong JavaScript .

Để trả lời câu hỏi này, tôi đã liệt kê một số lợi ích cho bạn: < / p>

  • Hàm này nhằm mục đích tạo một không gian tên nhân tạo không tồn tại trong JavaScript.
  • Vì nó có cú pháp nhẹ hơn so với một hàm đã đặt tên nên nó có thể dễ sử dụng hơn một hàm tự gọi nếu hàm được sử dụng một lần.
  • Mặc dù các hàm này nhận đối số, nhưng không nên chuyển quá nhiều đối số. Cho dù tên của các đối số có đơn giản đến đâu, thì mã sẽ trông phức tạp.
  • Vì các hàm này không có mã định danh hoặc hàm đóng nên chúng được gọi trực tiếp mà không cần sử dụng bất kỳ mã định danh hoặc hàm đóng nào, bảo toàn phạm vi của hàm. < / li>
  • Các mẫu mô-đun thường được phát triển bằng cách sử dụng các hàm tự gọi, trong đó tham chiếu đến đối tượng được trả về bởi các hàm đó được lưu giữ.

Kết luận

Chúng ta đã tìm hiểu về < strong> Các hàm tự gọi trong JavaScript và cách chúng tôi có thể sử dụng chúng trong JavaScript. Tôi đã liệt kê một vài ưu điểm để cung cấp một cái nhìn tổng quan ngắn gọn về tính năng này.

Trong JavaScript, một hàm tự thực thi chỉ là một hàm ẩn danh với một cú pháp khác được thực thi một lần ngay sau đó tờ khai. Nó cũng nhận các tham số và xử lý các lời hứa bằng cú pháp async / await .

Tôi đã trình bày một vài ví dụ về các hàm đó và sự khác biệt giữa các hàm Ẩn danh và Được đặt tên. < / p>

Bạn cũng đã biết cách chuyển đối số và cách sử dụng async-await với các hàm ẩn danh tự thực thi trong JavaScript.

< p> Tôi hy vọng nó hữu ích. Cảm ơn bạn rất nhiều vì thời gian của bạn. Chúc bạn viết mã vui vẻ!


Xem thêm những thông tin liên quan đến chủ đề tự gọi hàm trong javascript

Bài 10 - Function trong JavaScript

  • Tác giả: CodersX
  • Ngày đăng: 2018-12-28
  • Đánh giá: 4 ⭐ ( 3171 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript từ A - Z
    Bài 10 - Function trong JavaScript

    🍣Chia sẻ vì cộng đồng sinh viên Việt Nam
    🍣Các bài giảng: https://coders.tokyo/tuts/
    🍣Blog: https://coders.tokyo/blog/
    🍣School: http://school.coders.tokyo

    Facebook Page: http://fb.com/coders.tokyo
    Youtube Playlist: https://www.youtube.com/c/CodersTokyo
    Website: https://coders.tokyo/
    Instagram: https://www.instagram.com/Coders.Tokyo

    coders tokyo coders_tokyo free_coding_class es6 javascript CodersTokyo react

Hàm trong JavaScript

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 5 ⭐ ( 3109 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn tự học Javascript này, bạn sẽ học cách định nghĩa và gọi một hàm trong JavaScript. Cách thêm tham số, truyền đối số, hàm khai báo, hàm biểu thức...

Function trong Javascript - cách tạo hàm và gọi hàm trong JS

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 6898 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách tạo function trong Javascript, phân biệt cách gọi hàm bằng arrow function và function bình thường trong javascript, truyền tham số cho hàm trong javascript

Function trong JavaScript với cách tạo và gọi hàm

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 5 ⭐ ( 7696 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có 4 phương pháp tạo hàm trong JavaScript là sử dụng từ khóa function, sử dụng biểu thức, sử dụng hàm tạo (constructor) và sử dụng hàm Arrow. Trong bài học này, chúng ta sẽ cùng học về cách tạo hàm Ja

Hàm trong javascript là gì ? Khái niệm và cách sử dụng

  • Tác giả: nguyenvanhieu.vn
  • Đánh giá: 4 ⭐ ( 3506 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hàm trong javascript là gì ? Tại sao phải sử dụng hàm ? Và sử dụng hàm như thế nào ? Vẫn là ba câu hỏi tuy cũ  nhưng lại mới. Nếu các bạn ....

Làm cách nào để gọi hàm JavaScript khi tải trang?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 4229 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Nếu bạn muốn phương thức onload lấy tham số, bạn có thể làm một cái gì…

Gọi hàm trong javascript

  • Tác giả: blog.daovanhung.com
  • Đánh giá: 5 ⭐ ( 7498 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các cách gọi hàm trong javascript

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Làm thế nào để sử dụng iframe trong html? - mã cho iframe trong html

By ads_php