Hướng dẫn về các hàm tự gọi trong JavaScript. Ở đây chúng ta thảo luận về Giới thiệu về các chức năng tự gọi và làm việc với các ví dụ và triển khai mã.

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

Các hàm tự gọi trong JavaScript

Giới thiệu về các hàm tự gọi trong JavaScript

Chúng tôi có rất nhiều tính năng thú vị trong JavaScript. Một trong số đó là chức năng Tự gọi. Bạn có thể chưa nghe về từ này nhưng đã sử dụng tính năng này trong các chương trình hàng ngày của mình. Bạn thậm chí có thể không biết làm thế nào để google nó. Thuật ngữ JavaScript kỳ lạ này sẽ muốn bạn làm quen với việc phát triển phần mềm hàng ngày. JavaScript Các hàm tự gọi là các hàm tự thực thi không tên và được gọi ngay sau khi định nghĩa nó. Các hàm tự gọi này là do con người tạo ra, các hàm này sẽ tự động thực thi khi được theo sau bởi (). Không có (), một hàm không thể tự gọi.

Cú pháp

Dưới đây là Cú pháp:

Bắt đầu khóa học phát triển phần mềm miễn phí của bạn

Phát triển web, ngôn ngữ lập trình, Kiểm tra phần mềm & amp; những người khác

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

Cặp dấu ngoặc đơn chuyển đổi mã bên trong dấu ngoặc đơn thành biểu thức:

function () {…. }

cặp dấu ngoặc đơn thứ hai tiếp tục lệnh gọi hàm.

Ví dụ: bên dưới là một hàm ẩn danh và lệnh gọi của nó:

(function () {
console.log ("Xem này, bài viết này là về các hàm tự gọi");
}) ();

Điều này tương tự như đặt tên một hàm và gọi nó,

function sample () {
console.log ("Xem này, bài viết này là về các hàm tự gọi");
}
sample ();

Mặc dù bạn có thể tìm thấy các biến thể nhỏ ở đây, nhưng nội dung của hàm vẫn giống nhau và cả hai biến thể đều được thực thi ngay lập tức. Ngay sau khi hàm được xác định, nó sẽ được gọi ngay lập tức. Điều này rất hữu ích trong việc khởi tạo, thêm trình xử lý sự kiện, v.v. Trong jQuery, thay vì sử dụng tài liệu. sẵn sàng, một hàm tự gọi đã được sử dụng.

Những hàm này được gọi là Biểu thức hàm được gọi ngay lập tức, là hàm IIFE hoặc Hàm tự thực thi. Mục đích của việc gói các chức năng này là để kiểm soát khả năng hiển thị của các thành viên của nó. Bạn có thể đang nghĩ tại sao chúng ta cần sử dụng các hàm tự gọi này. Vì vậy, hãy cùng chúng tôi tìm hiểu sâu hơn về nó.

Tại sao các hàm tự gọi lại hoạt động?

Trong JavaScript, mỗi hàm có phạm vi riêng. Lấy ví dụ như điều này, các biến được xác định bằng cách sử dụng hàm bên trong ‘var’ không thể được truy cập bên ngoài. Bằng cách bao quanh các ứng dụng bằng các hàm ẩn danh, chúng tôi tạo một phạm vi xung quanh hàm nơi các biến được khai báo chỉ có thể truy cập được bởi hàm đó. Chúng tôi có thể làm cho các biến được khai báo có thể truy cập bên ngoài hàm nhưng theo mặc định, chúng tôi không có tính năng này áp dụng cho cô ấy. Hãy cùng chúng tôi xem xét một số điểm chính của các Hàm Tự gọi điện trong JavaScript.

  • Thực thi một lần duy nhất và sẽ không để không gian tên chung bị chồng chất bởi những thứ thô thiển kéo dài suốt đời.
  • Thuận tiện cho việc thực thi logic khởi tạo, chúng tôi có thể thực hiện khởi tạo chỉ một lần vì chúng tôi sẽ mất tham chiếu đến hàm sau khi thực thi.
  • Chúng tôi có hai biến thể cú pháp cho các hàm Tự gọi như bên dưới,
Xem Thêm  Phần mềm lập trình Arduino IDE là gì - ide là gì

Douglas Crockford’sJSLint:

(function () {
// nội dung
} ());
'Quả bóng chó' thay thế
(function () {
// nội dung
}) ();

  • Các tham số cũng có thể được chuyển cho các hàm Tự gọi này, nói chung, các tham chiếu đến các đối tượng toàn cục được chuyển dưới dạng tham số.
  • Không nên chuyển quá nhiều đối số vì các hàm trở nên lớn và người dùng cần cuộn để tìm các tham số.
  • Hàm Tự gọi này chủ yếu dành cho phạm vi thay đổi. Theo mặc định, các biến được khai báo trong các hàm tự gọi chỉ có sẵn để viết mã trong hàm tự gọi.
  • Không quan tâm đến cách các biến được khai báo hoặc đặt tên trong một khối mã khác trong JavaScript.

Ví dụ về các hàm tự gọi trong JavaScript

Dưới đây là các ví dụ về Hàm tự gọi trong JavaScript:

Ví dụ # 1

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h2 & gt; Các hàm không tên được gọi tự động & lt; / h2 & gt;
& lt; p id = "demo" & gt; & lt; / p & gt;
& lt; script & gt;
(hàm số () {
var sample = "Xin chào, Hôm nay chúng ta sẽ xem các Hàm Tự gọi trong JavaScript là gì";
document.getElementById ("demo"). innerHTML = sample;
}) ();
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Các hàm tự gọi trong JavaScript Ví dụ 1

Ví dụ # 2

Hàm ẩn danh với Đối số

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; body & gt;
& lt; h2 & gt; Hàm không tên với các đối số được gọi tự động & lt; / h2 & gt;
& lt; p id = "demo" & gt; & lt; / p & gt;
& lt; script & gt;
(chức năng (mẫu) {
document.write (mẫu);
}) ("Hãy kết nối cùng nhau để có một buổi học tuyệt vời tại eduCBA");
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Các hàm tự gọi trong JavaScript Ví dụ 2

Ví dụ # 3

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

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt;
Hãy để chúng tôi thấy sự khác biệt giữa một hàm bình thường và một hàm tự gọi
& lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 style = "color: red" & gt;
Chức năng bình thường so với chức năng tự gọi
& lt; / h1 & gt;
& lt; b & gt;
Sẽ có thể thấy sự khác biệt về cú pháp tại đây
& lt; / b & gt;
& lt; p & gt;
Ngày và giờ hiện tại:
& lt; span class = "output" & gt; & lt; / span & gt;
& lt; / p & gt;
& lt; script type = "text / javascript" & gt;
(function () {
date = new Date (). toString ();
document.querySelector ('. output'). textContent
= ngày tháng;
}) ();
function dateSample () {
date = new Date (). toString ();
document.write ("Ngày chức năng bình thường ở đây", ngày);
}
dateSample ();
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Xem Thêm  Cách ghi vào tệp bằng Python - ghi vào tệp trong python

Các hàm tự gọi trong JavaScript Ví dụ 3

Ví dụ # 4

Mã:

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt;
& lt; / title & gt;
& lt; / head & gt;
& lt; body & gt;
& lt; h1 style = "color: red" & gt;
Hiển thị tên nhà tuyển dụng
& lt; / h1 & gt;
& lt; p & gt;
Tên của nhà tuyển dụng:
& lt; / p & gt;
& lt; script type = "text / javascript" & gt;
vare JobeeName = "eduCBA";
(chức năng (tên nhà tuyển dụng) {
chức năng hiển thị (Tên tuyển dụng)
{
document.write ("Nhân viên làm việc với:" + EmployName);
}
display (EmployName);
}) (Tên nhân viên);
& lt; / script & gt;
& lt; / body & gt;
& lt; / html & gt;

Đầu ra:

Các hàm tự gọi trong JavaScript Ví dụ 4

Ưu điểm của Hàm tự gọi / Hàm ẩn danh

  • Vì các hàm này không được đặt tên hoặc ẩn danh, biểu thức của hàm ngay lập tức được gọi ngay cả khi không sử dụng bất kỳ mã định danh hoặc hàm đóng nào và không làm hỏng phạm vi.
  • Các hàm ẩn danh này là các đối số được truyền cho các hàm bậc cao hơn cần trả về một hàm. Nếu hàm chỉ được sử dụng một lần, thì việc sử dụng hàm Tự gọi sẽ dễ dàng hơn vì nó có cú pháp nhẹ hơn so với hàm đã đặt tên.
  • Các hàm này cũng chấp nhận các đối số nhưng không nên chuyển nhiều đối số vì nó không được khuyến nghị. Ngay cả khi tên của các đối số đơn giản hơn, mã sẽ trông phức tạp và vụng về.
  • Được sử dụng để tạo không gian tên nhân tạo không tồn tại trong JavaScript.
  • Hầu hết, mẫu Mô-đun được triển khai bằng cách sử dụng các hàm tự gọi trong đó chúng tôi giữ tham chiếu của đối tượng của hàm được trả về.

Kết luận

Với điều này, chúng tôi kết thúc chủ đề ‘Các hàm tự gọi của JavaScript’, Chúng tôi đã biết ý nghĩa của nó và cách nó được sử dụng trong mã hóa. Minh họa một vài ví dụ về cách sử dụng chức năng Ẩn danh, và cũng đã thấy sự khác biệt giữa chức năng Được đặt tên và các chức năng Ẩn danh / Tự gọi. Các chức năng này có thể giúp chúng tôi tạo phạm vi và ngăn chặn không gian tên toàn cầu gây ô nhiễm. Cũng được sử dụng để khởi tạo các giá trị trước khi tạo các đối tượng. Chúng tôi đã liệt kê một vài ưu điểm sẽ rất hữu ích để có được cái nhìn tổng quan ngắn gọn về tính năng này. Mọi người của bạn vẫn có thể thử nhiều phương pháp sử dụng các chức năng Tự gọi này.

Các bài báo được đề xuất

Đây là hướng dẫn về các Hàm tự gọi trong JavaScript. Ở đây chúng tôi thảo luận về Giới thiệu về các hàm tự gọi trong JavaScript và cách hoạt động của nó cùng với các ví dụ và triển khai mã. Bạn cũng có thể xem qua các bài viết đề xuất khác của chúng tôi để tìm hiểu thêm –

Xem Thêm  SQL Server Chuyển đổi ngày giờ thành ngày tháng + Ví dụ - sql chuyển đổi datetime thành ngày dd mm yyyy

0

Chia sẻ

Chia sẻ


Xem thêm những thông tin liên quan đến chủ đề chức năng tự gọi trong js

ASYNC JavaScript trong 30 phút (CALLBACK, PROMISES, ASYNC AWAIT)

alt

  • Tác giả: HoleTex
  • Ngày đăng: 2021-11-28
  • Đánh giá: 4 ⭐ ( 8041 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Học ASYNC JavaScript trong 30 phút (CALLBACK, PROMISES, ASYNC AWAIT)

    Xử lý bất đồng bộ trong JS là một công việc chúng ta sẽ phải đối mặt rất thường xuyên. Và hôm nay chúng ta sẽ cùng nhau tìm hiểu về các cách khác nhau để xử lý bất đồng bộ trong JS, cũng như là tìm hiểu về các vấn đề khi xử lý bất đồng bộ với Callback như là Callback Hell
    – Callback
    – Promises
    – Async/Await

    📢 Liên hệ với mình tại:
    Facebook: https://www.facebook.com/holetex/​
    Instagram: https://www.instagram.com/holetex/
    Github: https://github.com/holetexvn
    Facebook cá nhân: https://www.facebook.com/minhtung09/
    Email: holetex@outlook.com

    async js holetex callback asyncawait promises

One moment, please…

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 8156 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Bắt sự kiện click trong Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 2894 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sự kiện click trong Javascript, click trong js là sự kiện xảy ra khi nhấp chuột vào một đối tượng HTML nào đó, sự kiện này áp dụng cho mọi thẻ HTML.

Học lập trình JavaScript

  • Tác giả: hocjavascript.net
  • Đánh giá: 4 ⭐ ( 1644 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ES6 đã giới thiệu cho chúng ta về Class trong JavaScript, nhưng nó vẫn quá là đơn giản để có thể sử dụng cho các ứng dụng phức tạp. Trường của Class (hay còn

JavaScript chức năng tự gọi

  • Tác giả: vi.uwenku.com
  • Đánh giá: 3 ⭐ ( 1510 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: thể trùng lặp: Difference between (function(){})(); and function(){}(); Are “(function () { }) ()” and “(function () { } ())” functionally equal in JavaScript? Tôi chỉ tự hỏi liệu có sự khác biệt (liê

15 String Methods được sử dụng phổ biến nhất trong JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 2742 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: String trong JS là gì? Cũng giống như hầu hết các ngôn ngữ lập trình khác, JS có một phương tiện để đại diện cho văn bản bằng các chuỗi(strings). Mô tả cơ bản chỉ là, strings là văn bản. Mô tả theo kỹ…

Mọi Thứ Bạn Cần Biết Về Function – Javascript

  • Tác giả: codelearn.io
  • Đánh giá: 4 ⭐ ( 3745 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các hàm (Function) là một trong những nền tảng cơ bản trong Javascript. Vậy bạn đã nắm hết những kiến thức về Function trong Javascript chưa?

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

By ads_php