Tìm Hiểu Closures Trong JavaScript: Hướng Dẫn Chi Tiết và Ứng Dụng Thực Tế

Closures là một trong những khái niệm quan trọng và mạnh mẽ trong JavaScript, tuy nhiên đôi khi chúng có thể gây nhầm lẫn cho nhiều lập trình viên. Chủ đề này không chỉ xuất hiện phổ biến trong các buổi phỏng vấn xin việc mà còn đóng vai trò thiết yếu trong việc viết mã hiệu quả, bảo trì tốt và bảo mật cao.

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu về closures, cách thức hoạt động của chúng, và các ứng dụng thực tế mà closures mang lại trong quá trình lập trình.

Closures Là Gì?

Closures có thể được hiểu là một hàm có khả năng ghi nhớ phạm vi (scope) bên ngoài của nó, thậm chí khi hàm này được gọi ở ngoài phạm vi của hàm cha.

Ví dụ:

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) {
    console.log(`Outer: ${outerVariable}, Inner: ${innerVariable}`);
  };
}

const newFunction = outerFunction("Hello");
newFunction("World");

Kết quả ra màn hình:

Outer: Hello, Inner: World

Giải thích:

• outerFunction nhận một biến outerVariable làm đối số.
• innerFunction có thể truy cập vào biến của outerFunction, ngay cả khi nó được gọi bên ngoài phạm vi của outerFunction.

Cách Closures Hoạt Động

Closures hoạt động dựa vào nguyên tắc lexical scoping (phạm vi từ vựng). Khi một hàm được định nghĩa, nó sẽ ghi nhớ các biến nằm trong phạm vi bên ngoài của nó. Ngay cả khi hàm cha đã kết thúc, hàm con vẫn giữ một tham chiếu đến các biến của nó.

Tại Sao Điều Này Xảy Ra?

JavaScript quản lý closures thông qua hai khái niệm chính là Execution Context (ngữ cảnh thực thi) và Scope Chain (chuỗi phạm vi).

• Hàm con không chỉ có quyền truy cập vào các biến cục bộ của nó mà còn có thể truy cập vào các biến của hàm cha và các biến toàn cục.

Ứng Dụng Thực Tế Của Closures

Closures không chỉ là một khái niệm lý thuyết; chúng còn có nhiều ứng dụng thực tiễn trong lập trình JavaScript. Dưới đây là một số ví dụ nổi bật:

1. Bảo Mật Dữ Liệu (Data Privacy) - Encapsulation

Closures cho phép tạo ra các biến riêng tư, ngăn người dùng truy cập trực tiếp từ bên ngoài.

function counter() {
  let count = 0;
  return {
    increment: function () { count++; console.log(count); },
    decrement: function () { count--; console.log(count); },
  };
}

const myCounter = counter();
myCounter.increment(); // 1
myCounter.increment(); // 2
myCounter.decrement(); // 1

Trong ví dụ trên, biến count là riêng tư và không thể truy cập từ bên ngoài.

2. Function Factories - Tạo Hàm Dựa Trên Giá Trị Đầu Vào

Closures giúp tạo ra các hàm có thể tùy chỉnh dựa trên giá trị đầu vào, giống như việc xây dựng các factory functions, một kỹ thuật phổ biến trong lập trình JavaScript.

function multiplier(factor) {
  return function (number) {
    return number * factor;
  };
}

const double = multiplier(2);
console.log(double(5)); // 10

3. Trình Lắng Nghe Sự Kiện Với Trạng Thái

Closures có thể duy trì trạng thái cho các trình xử lý sự kiện.

function attachEventListener() {
  let count = 0;
  document.getElementById("myButton").addEventListener("click", function () {
    count++;
    console.log(`Button clicked ${count} times`);
  });
}
attachEventListener();

4. Ghi Nhớ (Tối Ưu Hóa Hiệu Suất)

Closures giúp lưu trữ kết quả của các phép toán và cải thiện hiệu suất.

function memoizedAdd() {
  let cache = {};
  return function (num) {
    if (num in cache) {
      console.log("Đang lấy từ cache");
      return cache[num];
    } else {
      console.log("Đang tính toán kết quả");
      cache[num] = num + 10;
      return cache[num];
    }
  };
}

const add = memoizedAdd();
console.log(add(5)); // Đang tính toán kết quả → 15
console.log(add(5)); // Đang lấy từ cache → 15

Tóm Tắt Quan Trọng Về Closures

✅ Closures cho phép hàm ghi nhớ phạm vi bên ngoài của nó ngay cả khi hàm cha đã kết thúc.
✅ Closures được tạo ra tự động khi một hàm được trả về từ một hàm khác.
✅ Một số ứng dụng quan trọng của closures bao gồm:

• Bảo mật dữ liệu (Encapsulation) → Giữ biến riêng tư.
• Function Factories → Tạo ra các hàm tùy chỉnh.
• Xử lý sự kiện (Event Handling) → Giữ trạng thái trong callback.
• Tối ưu hóa hiệu suất (Performance Optimization) → Memoization, caching.

💡 Mặc dù closures có thể khó hiểu lúc đầu, nhưng khi bạn nắm vững, chúng sẽ trở thành công cụ tối ưu trong lập trình JavaScript. 🚀

Hy vọng bài viết này sẽ hữu ích cho các bạn trong quá trình học tập và phát triển kỹ năng lập trình của mình!
source: viblo