Đóng mã trong JavaScript

Biến JavaScript có thể thuộc phạm vi cục bộ hoặc toàn cục. Các biến toàn cục có thể được thực hiện tại cục bộ (riêng tư) với mã đóng.

Biến toàn cục

Một hàm có thể truy cập tất cả các biến được định nghĩa bên trong hàm, như sau:

function myFunction() {
var a = 4;
return a * a;
}

Nhưng một hàm cũng có thể truy cập các biến được định nghĩa bên ngoài hàm, như sau:

var a = 4;
function myFunction() {
return a * a;
}

Trong ví dụ cuối, a là một biến toàn cục. Trong một trang web, các biến toàn cục thuộc về đối tượng cửa sổ. Các biến toàn cục có thể được sử dụng (và được thay đổi) bởi tất cả các tập lệnh trong trang (và trong cửa sổ).

Trong ví dụ đầu tiên, a là một 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 định nghĩa. Nó được ẩn từ các hàm khác và mã script 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 đổi một, không sửa đổi khác.

Các biến tạo ra mà không có từ khóa var, luôn luôn là toàn cục, ngay cả khi chúng được tạo bên trong một hàm.

Thời gian hoạt động của biến

Các biến toàn cục tồn tại miễn là ứng dụng của bạn (cửa sổ / trang web của bạn) hoạt động. Các biến cục bộ có thời gian hoạt động. Chúng được tạo ra khi hàm được gọi, và xóa khi hàm kết thúc.

Bộ đếm Dilemma

Giả sử bạn muốn sử dụng một biến để tính một cái gì đó, và bạn muốn bộ đếm này có sẵn cho tất cả các hàm. Bạn có thể sử dụng một biến toàn cục, và một hàm để tăng truy cập:

var counter = 0;

function add() {
counter += 1;
}

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

// bộ đếm đang là 3

Bộ đếm chỉ nên thay đổi bởi hàm add(). Vấn đề là, rằng bất kỳ tập lệnh trên trang có thể thay đổi bộ đếm, mà không cần gọi add().

Nếu khai báo các truy cập bên trong các hàm, không ai có thể thay đổi nó mà không cần gọi add():

function add() {
var counter = 0;
counter += 1;
}

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

// bộ đếm sẽ là 3, nhưng nó không hoạt động !

Nó không làm việc! Mỗi khi gọi hàm add(), bộ đếm được đặt là 1. Một hàm bên trong JavaScript có thể giải quyết vấn đề này.

Các hàm lồng nhau trong 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ục. 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 “ở 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 “ở 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 số truy cập trong hàm cha:

function add() {
var counter = 0;
function plus() {counter += 1;}
plus();
return counter;
}

Điều này có thể giải quyết tình trạng bộ đếm dilemma, nếu chúng ta có thể đạt đến chức năng plus() từ bên ngoài.

Chúng ta cũng cần phải tìm một cách để thực hiện counter = 0 chỉ một lần. Việc cần làm là đóng mã.

Đóng mã trong JavaScript

var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();

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

// bộ đếm hiện tại là 3

Thêm biến được gán giá trị trả về của hàm tự gọi. Hàm tự gọi chỉ chạy một lần. Nó thiết lập các truy cập đến số không (0), và trả về một hàm biểu thức.

Bằng cách này thêm vào để 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 cha mẹ. Đây được gọi là đóng cửa 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 các hàm nặc danh, và chỉ có thể được thay đổi bằng cách sử dụng hàm add.

Bộ đếm được bảo vệ bởi phạm vi của danh sách chức năng ẩn danh, và chỉ có thể được thay đổi bằng cách sử dụng tính năng bổ sung.