Đóng JavaScript
Các biến JavaScript có thể thuộc phạm vi cục bộ hoặc toàn cầu .
Các biến toàn cục có thể được đặt cục bộ (riêng tư) bằng các bao đóng .
Biến toàn cục
Một function có thể truy cập tất cả các biến được xác định bên trong hàm, như sau:
Nhưng một function cũng có thể truy cập các biến được xác định bên ngoài hàm, như sau:
Trong ví dụ cuối cùng, a là biến toàn cục .
Trong một trang web, các biến toàn cục thuộc về trang đó.
Biến toàn cục có thể được sử dụng (và thay đổi) bởi tất cả các tập lệnh khác trong trang.
Trong ví dụ đầu tiên, a là biến cục bộ .
Một biến cục bộ chỉ có thể được sử dụng bên trong hàm mà nó được xác định. Nó bị ẩn khỏi các chức năng khác và mã kịch bản khác.
Các biến toàn cục và cục bộ có cùng tên là các biến khác nhau. Sửa cái này thì không sửa cái kia.
Ghi chú
Các biến được tạo mà không có từ khóa khai báo ( var , let hoặc const ) luôn có tính toàn cục, ngay cả khi chúng được tạo bên trong một hàm.
Tuổi thọ thay đổi
Biến toàn cục tồn tại cho đến khi trang bị hủy, chẳng hạn như khi bạn điều hướng đến một trang khác hoặc đóng cửa sổ.
Các biến cục bộ có thời gian tồn tại ngắn. Chúng được tạo khi hàm được gọi và bị xóa khi hàm kết thúc.
Một vấn đề nan giải
Giả sử bạn muốn sử dụng một biến để đếm thứ gì đó và bạn muốn bộ đếm này có sẵn cho tất cả các chức năng.
Bạn có thể sử dụng biến toàn cục và function để tăng bộ đếm:
Ví dụ
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
counter += 1;
}
// Call add() 3 times
add();
add();
add();
// The counter should now be 3 Hãy tự mình thử »Có một vấn đề với giải pháp trên: Bất kỳ mã nào trên trang đều có thể thay đổi bộ đếm mà không cần gọi add().
Bộ đếm phải cục bộ của hàm add() để ngăn mã khác thay đổi nó:
Ví dụ
// Initiate counter
let counter = 0;
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 0 Hãy tự mình thử »Nó không hoạt động vì chúng tôi hiển thị bộ đếm toàn cầu thay vì bộ đếm cục bộ.
Chúng ta có thể xóa bộ đếm toàn cục và truy cập bộ đếm cục bộ bằng cách để hàm trả về nó:
Ví dụ
// Function to increment
counter
function add() {
let counter = 0;
counter += 1;
return counter;
}
//
Call add() 3 times
add();
add();
add();
//The counter should
now be 3. But it is 1. Hãy tự mình thử »Nó không hoạt động vì chúng tôi đặt lại bộ đếm cục bộ mỗi lần gọi hàm.
Hàm bên trong JavaScript có thể giải quyết vấn đề này.
Các hàm lồng nhau của JavaScript
Tất cả các chức năng đều có quyền truy cập vào phạm vi toàn cầu.
Trên thực tế, trong JavaScript, tất cả các hàm đều có quyền truy cập vào phạm vi "phía trên" chúng.
JavaScript hỗ trợ các hàm lồng nhau. Các hàm lồng nhau có quyền truy cập vào phạm vi "phía trên" chúng.
Trong ví dụ này, hàm bên trong plus() có quyền truy cập vào biến counter trong hàm cha:
Ví dụ
function add() {
let counter = 0;
function plus() {counter += 1;}
plus();
return counter;
} Hãy tự mình thử » Điều này có thể giải quyết được tình thế tiến thoái lưỡng nan nếu chúng ta có thể tiếp cận hàm plus() từ bên ngoài.
Chúng ta cũng cần tìm cách thực thi counter = 0 chỉ một lần.
Chúng ta cần một sự đóng cửa.
Đóng JavaScript
Ghi nhớ các chức năng tự gọi? Chức năng này làm gì?
Ví dụ
const add = (function () {
let counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add();
// the counter is now 3
Hãy tự mình thử »Ví dụ giải thích
Biến add được gán cho giá trị trả về của hàm tự gọi.
Chức năng tự gọi chỉ chạy một lần. Nó đặt bộ đếm về 0 (0) và trả về một biểu thức hàm.
Bằng cách này, add trở thành một hàm. Phần "tuyệt vời" là nó có thể truy cập vào bộ đếm trong phạm vi chính.
Điều này được gọi là đóng JavaScript. Nó làm cho một hàm có thể có các biến " riêng tư ".
Bộ đếm được bảo vệ bởi phạm vi của hàm ẩn danh và chỉ có thể được thay đổi bằng hàm add.
Bao đóng là một hàm có quyền truy cập vào phạm vi cha, ngay cả sau khi hàm cha đã đóng.
