Bạn có biết JavaScript giữ cho phạm vi chức năng của bạn tồn tại sau khi thực thi không?

Đóng trong JavaScript có nghĩa là một hàm bên trong có quyền truy cập vào các biến của hàm bên ngoài. Điều này cũng áp dụng khi quá trình thực thi chức năng bên ngoài kết thúc.

Cách các hàm thông thường hoạt động trong JavaScript

Hãy xem ngắn gọn cách một hàm thông thường hoạt động trong JavaScript.

Một hàm JavaScript tạo một phạm vi mới. Các biến được xác định bên trong phạm vi đó không thể truy cập từ bên ngoài.

Đây là một chức năng ví dụ:

function hello() {
  const word = "Hello";
  console.log(word);
}
hello();

Hello

Cố gắng truy cập hellobên ngoài chức năng không hoạt động:

function hello() {
  const word = "Hello";
}
console.log(word);

Uncaught ReferenceError: word is not defined

Một bao đóng trong JavaScript giúp nó có thể truy cập các biến của một hàm bên ngoài nó. Mỗi khi bạn chạy một hàm, một bao đóng sẽ được tạo dưới mui xe.

Đóng cho phép bạn truy cập vào phạm vi của một chức năng bên ngoài từ một chức năng bên trong.

Ví dụ: hãy kiểm tra hành vi của tập lệnh này trong đó một chức năng bên ngoài có một chức năng bên trong:

• Hàm outer()trả về inner()hàm. Điều này có nghĩa là bạn có thể lưu trữ inner()hàm vào một biến:

const greet = outer()

greet()

Hello world

function inner() {
     const b = "World"; 
     console.log(a+b);
}

Hãy cùng xem outer()lại hàm một lần nữa:

• Hàm inner()tự động biết nó nằm bên trong một hàm được gọi outer(). Do đó, nó "lưu" các biến thuộc về outer()hàm để sử dụng sau này. Đây là lý do tại sao greet()vẫn có thể truy cập giá trị a.

Ví dụ thực tế về đóng cửa

Hãy thiết lập một bộ đếm đơn giản để theo dõi số lần nhấp chuột, ví dụ:

var counter = 0;
function increment() {
  counter++;
}

Để xây dựng một bộ đếm đáng tin cậy, bạn cần phải định cấu hình increment()chức năng theo cách mà các phần khác của mã không thể làm xáo countertrộn biến.

Đây là nơi mà việc đóng cửa có ích. Hãy triển khai lại bộ đếm bằng cách tạo một hàm bên trong một hàm:

Mã này hoạt động giống như cách tổ outer() inner()hợp hàm mà bạn đã thấy trước đó. Nó sử dụng bản chất đóng của JavaScript:

• createCounter()là chức năng bên ngoài. Nó đặt một counterbiến thành 0và trả về một hàm bên trong increment().
• increment()hàm chịu trách nhiệm thêm các giá trị vào counter.
• Hàm increment()có quyền truy cập vào các biến của createCounter()ngay cả sau khi gọi createCounter(). Điều này là do tính chất đóng của JavaScript.

• Đầu tiên, hãy gọi createCounter()để thiết lập quầy:

let add = createCounter();

add();
add();
add();

1
2
3

Cảm ơn vì đã đọc. Tôi hy vọng bạn tìm thấy nó hữu ích

Đọc thêm

20 đoạn mã JavaScript để viết mã giống như một chuyên gia

Người giới thiệu

Nội dung khác tại plainenglish.io