STDIO
Tìm kiếm gần đây
    Nội dung
    0
    0
    Chia sẻ
    Nội dung
    0
    0
    Chia sẻ

    Anonymous Function - Hàm Nặc Danh Và Hàm Nặc Danh Trong JavaScript

    Tìm hiểu về anonymous function - hàm nặc danh trong JavaScript.
    15/09/2014 28/01/2021 3 phút đọc
    Anonymous Function - Hàm Nặc Danh Và Hàm Nặc Danh Trong JavaScript

    Anonymous Function hay hàm nặc danh được sử dụng rất nhiều trong JavaScript.

    Anonymous Function là gì?

    Anonymous Function hay hàm nặc danh là một hàm không có (không cần) tên hàm

    Hàm thông thường

    function funcName(param1, param2, ...) {
    
    }

    Ví dụ

    function add(a, b) {
      return a + b;
    }

    Anonymous function

    Anonymous function là 1 hàm không có tên hàm, hàm có dạng như sau:

    function() {
    
    }

    Có thể truyền thêm tham số vào Anonymous Function như 1 hàm thông thường:

    function(a, b) {
    
    }

    Cách sử dụng Anonymous Function

    Giả sử ta cần viết một hàm dùng để tìm ra giá trị lớn nhất của 2 số

    Ví dụ

    Không sử dụng Anonymous Function
    function max(a, b) {
      return a > b ? a : b;
    };
    
    console.log(max(1, 2));
    Sử dụng Anonymous Function
    function (a, b) {
      return a > b ? a : b;
    };

    Không có cách nào gọi được hàm này do không có tên hàm?! Đối với JavaScript tất cả đều là đối tượng kể cả function, do đó thực hiện phép gán sau:

    let maxFunc = function(a, b){
      return a > b ? a : b;
    };
    
    maxFunc(1, 2);

    Vì sao cần Anonymous Function?

    Hàm được truyền hoặc gọi tại 1 nơi duy nhất trong code

    Nếu hàm cần được truyền ở nhiều nơi:

    • Định nghĩa 1 hàm thông thường.
    • Truyền hàm đó vào 1 hàm.

    Nếu hàm chỉ truyền 1 nơi?

    • Bất tiện khi tạo ra 1 hàm mới (các chi phí như đặt tên hàm).
    • Giúp tăng tính ràng buộc cho việc chỉ được phép truyền 1 lần.
    • Bên cạnh đó hỗ trợ được thêm khả năng chỉ gọi 1 lần.
    Ví dụ truyền 1 nơi duy nhất
    • Giả sử cần truyền 1 hàm có chức năng xóa dữ liệu deleteAction vào 1 hàm quản lý popup confirmDelete.
    • confirmDelete chờ xác nhận từ người dùng, khi đã xác nhận thì tiến hành gọi deleteAction để xóa dữ liệu.
    function deleteAction() {
      delete();
      console.log("Data was deleted!");
    }
    
    confirmDelete(deleteAction);

    Nếu deleteAction chỉ có nhu cầu truyền vào confirmDelete, lúc này việc tạo 1 hàm deleteAction sẽ không:

    • Thể hiện được tính ràng buộc này vì hàm này vẫn có thể được truyền hoặc gọi nơi khác.
    • Tốn chi phí dựng: suy nghĩ tên hàm, đặt hàm tại vị trí phù hợp.

    Do đó, anonymous function là lựa chọn phù hợp, cải tiến code trên thành phương pháp sử dụng anonymous function.

    confirmDelete(function () {
      delete();
      console.log("Data was deleted!");
    });
    Ví dụ gọi 1 nơi duy nhất

    Giả sử có danh sách đường dẫn cần download.

    • Xử lý danh sách đường dẫn: lọc trùng, đồng bộ http sang https, loại bỏ những đường dẫn có giao thức khác.
    • Tiến hành download dữ liệu.
    • Nén toàn bộ dữ liệu sau khi sao chép.

    Với 3 nhu cầu trên có thể chia thành 3 hàm thành phần để thực hiện mỗi công đoạn.

    function preprocess(urlsA) { /* preprocess urls */ }
    function download(urlsA) { /* download files */ }
    function compress(filesA) { /* compress files */ }
    
    function mainTask(urls) {
      urls = preprocess(urls);
      const files = download(urls);
      compress(files);
    }

    Nếu 3 hàm preprocess, download, compress chỉ có nhu cầu sử dụng cho mainTask? Các hàm này đang được viết với scope (tầm vực) rộng hơn, về thực tế vẫn có thể được gọi ở nơi khác. Để tăng khả năng ràng buộc mà vẫn giữ được khả năng chia nhỏ chương trình để đạt được tính tường minh cao, anonymous function cũng là 1 lựa chọn tốt.

    function mainTask(urls) {
      urls = function (urlsA) { /* preprocess urls */ }(urls);
      const files = (urlsA) { /* download files */ }(files);
      compress(filesA) { /* compress files */ }(files);
    }

    Một số ứng dụng Anonymous Function

    Facebook SDK

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.4&appId=123456789";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    Google Analytics

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-123456789-1', 'auto');
    ga('send', 'pageview');
    0 Bình luận
    JavaScript

    JavaScript

    STDIO Training - Đào tạo lập trình Frontend - Backend.

    Khi bạn nhấn vào sản phẩm do chúng tôi đề xuất và mua hàng, chúng tôi sẽ nhận được hoa hồng. Điều này hỗ trợ chúng tôi có thêm kinh phí tạo nhiều nội dung hữu ích. Tìm hiểu thêm.
    STDIO

    Trang chính

    Công ty TNHH STDIO

    • 30, Trịnh Đình Thảo, Hòa Thạnh, Tân Phú, Hồ Chí Minh
      +84 28.36205514 - +84 942.111912
      developer@stdio.vn
    • 383/1 Quang Trung, Phường 10, Quận Gò Vấp, Hồ Chí Minh
      Số giấy phép ĐKKD: 0311563559 do sở Kế hoạch và Đầu Tư TPHCM cấp ngày 23/02/2012
    ©STDIO, 2013 - 2021