STDIO
Tìm kiếm gần đây

    Nội dung

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

    15/09/2014
    29/07/2020
    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.

    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');

    JavaScript

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

    Thảo luận

    In order to comment you must be a STDIO Insider. Please sign up or log in to continue.

    Đăng nhập

    Bài viết liên quan

    C++11 - Lambda

    C++11 - Lambda

    Tìm hiểu và ứng dụng Lambda - Hàm nặc danh hay Anonymous function trong C++11. Lambda là một loại triển khai hàm với hàm không tên gọi, lambda tiện lợi cho việc sử dụng ...

    La Kiến Vinh

    11/06/2014

    Con Trỏ Hàm Trong C/C++

    Con Trỏ Hàm Trong C/C++

    Tương tự Windows Form, trong những game được lập trình bằng C++ cũng có những Button, và để tạo ra chúng thì không đơn giản. Vì ngoài việc xử lý hình ảnh, ...

    Tuấn Trần

    18/08/2015

    Hàm Trong PHP

    Hàm Trong PHP

    Trong một chương trình, người ta thường chia chương trình thành những đoạn nhỏ được gọi là hàm. Việc xây dựng hàm để tránh rườm rà và mất thời gian, mỗi hàm thực hiện một ...

    Phạm Hoài Nguyên

    08/10/2016

    Inline Functions Trong C++

    Inline Functions Trong C++

    Bài viết giới thiệu về Inline function (hàm nội tuyến) trong ngôn ngữ lập trình C/C++. Có phải chăng inline functions là một loại function và được cải tiến hơn? Cùng đọc ...

    Amy Lê

    10/06/2015

    Function Objects Hay Functor Với C++

    Function Objects Hay Functor Với C++

    Giới thiệu, cách sử dụng và ứng dụng Function Objects hay còn được gọi là Functor trong C++. Function Objects cũng khá lạ với điều này, function objects được hiện thực để ...

    La Kiến Vinh

    18/07/2014

    Xây Dựng Hàm Có Tham Số Tuỳ Ý Trong C

    Xây Dựng Hàm Có Tham Số Tuỳ Ý Trong C

    Trong một số trường hợp, chúng ta cần truyền vào hàm một vài tham số mà chưa biết trước được số lượng. Giải pháp thông thường là đưa các phần tử đó vào một mảng hoặc một ...

    Rye Nguyen

    03/08/2015

    Validate Form Bằng Thư Viện Knockout-Validation Trong Dự Án Durandaljs

    Validate Form Bằng Thư Viện Knockout-Validation Trong Dự Án Durandaljs

    Bài viết hướng dẫn sử dụng thư viện Knockout-Validation để kiểm tra dữ liệu nhập vào form của người dùng. Từ cách thêm thư viện vào project, cách thiết lặp sự phụ thuộc ...

    Huỳnh Minh Tân

    05/11/2017

    Biến Và Kiểu Dữ Liệu Trong Lua

    Biến Và Kiểu Dữ Liệu Trong Lua

    Biến là một khái niệm quen thuộc trong bất kì ngôn ngữ lập trình nào. Tuy nhiên ở mỗi ngôn ngữ, cách khai báo biến và kiễu dữ liệu ngôn ngữ hỗ ...

    Trung Nguyễn

    24/09/2014

    Hiện Thực Quadtree Và Ứng Dụng Trong Lập Trình Game

    Hiện Thực Quadtree Và Ứng Dụng Trong Lập Trình Game

    Xét va chạm (Collision Detection) là một việc quan trọng trong lập trình game. Công việc này đòi hỏi chi phí cao, đặc biệt khi số lượng thực thể (entity) trong game là ...

    Rye Nguyen

    31/07/2015

    SASS Và Các Cú Pháp Cơ Bản

    SASS Và Các Cú Pháp Cơ Bản

    SASS - Syntactically Awesome Style Sheets là một mở rộng của CSS, giúp việc tổ chức và phát triển code CSS một cách gần gũi như những ngôn ngữ lập trình cơ bản. Nó cho ...

    Trần Thị Thu Hiền

    06/01/2015

    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 - 2020