Bìa đóng JavaScript

JavaScript 变量属于cục bộhoặctoàn cụcphạm vi.

Biến toàn cục có thể thông quaBí ẩnthực hiện cục bộ (riêng).

biến toàn cục

toàn cụcHàm có thể truy cập vào các biến của hàmtrong

Mẫu

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

Thử ngay

Nhưng hàm cũng có thể truy cập vào các biến được định nghĩa bởi hàmngoàiBiến được định nghĩa, chẳng hạn như:

Mẫu

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

Thử ngay

Trong ví dụ cuối cùng này,a làtoàn cụcbiến

Trong trang web, biến toàn cục thuộc về đối tượng window.

Biến toàn cục có thể được sử dụng và sửa đổi bởi tất cả các mã trong trang web (và cửa sổ).

Trong ví dụ đầu tiên,a làcục bộbiến

Biến cục bộ chỉ có thể được sử dụng trong hàm được định nghĩa của nó. Đối với các hàm và mã khác, nó là không nhìn thấy.

Biến toàn cục và biến cục bộ có cùng tên là các biến khác nhau. Sửa đổi một, sẽ không thay đổi cái khác.

không quaký tự khóa var Biến được tạo ra luôn là biến toàn cục, ngay cả khi chúng được tạo ra trong hàm.

Tuổi thọ của biến

Biến toàn cục sống cùng với ứng dụng của bạn (cửa sổ, trang web).

Biến cục bộ sống không lâu. Chúng được tạo ra khi gọi hàm và bị xóa khi hàm hoàn thành.

Vấn đề của biến đếm

Giả sử bạn muốn sử dụng biến để đếm và bạn muốn biến đếm này có thể sử dụng được bởi tất cả các hàm.

Bạn có thể sử dụng biến toàn cục và hàm để tăng biến đếm:

Mẫu

// Khởi tạo biến đếm
var counter = 0;
// Hàm tăng biến đếm
function add() {
  counter += 1;
}
// Gọi hàm add() ba lần
add();
add();
add();
// Lúc này biến đếm应该是 3

Thử ngay

Giải pháp trên có một vấn đề: bất kỳ mã nào trên trang web đều có thể thay đổi biến đếm mà không cần gọi hàm add().

Đối với hàm add(), biến đếm nên là cục bộ để tránh讓 mã khác thay đổi nó:

Mẫu

// Khởi tạo biến đếm
var counter = 0;
// Hàm tăng biến đếm
function add() {
  var counter = 0; 
  counter += 1;
}
// Gọi hàm add() ba lần
add();
add();
add();
// Lúc này biến đếm应该是 3. Nhưng nó là 0.

Thử ngay

Nó không có ích vì chúng ta hiển thị biến đếm toàn cục thay vì biến đếm cục bộ.

Bằng cách để hàm trả về nó, chúng ta có thể xóa biến đếm toàn cục và truy cập vào biến đếm cục bộ:

Mẫu

// Hàm tăng biến đếm
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Gọi hàm add() ba lần
add();
add();
add();
// Lúc này biến đếm应该是 3. Nhưng nó là 1.

Thử ngay

Nó không có ích vì mỗi khi chúng ta gọi hàm, biến đếm cục bộ sẽ được đặt lại.

Hàm nội bộ JavaScript có thể giải quyết vấn đề này.

Hàm đệm JavaScript

Tất cả các hàm đều có quyền truy cập vào phạm vi toàn cục.

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' của chúng.

JavaScript hỗ trợ hàm đệm. Các hàm đệm có thể truy cập vào phạm vi trên của nó.

Trong ví dụ này, hàm nội bộ plus() có thể truy cập vào hàm bậc trên của nó counter biến đếm:

Mẫu

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

Thử ngay

Vậy có thể giải quyết được khó khăn của bộ đếm, nếu chúng ta có thể truy cập từ bên ngoài plus() hàm.

Chúng ta cũng cần tìm một hàm chỉ chạy một lần counter = 0 cách.

Chúng ta cần bí ẩn (closure).

Bìa đóng JavaScript

Bạn nhớ đến hàm tự gọi không? Loại hàm này sẽ làm gì?

Mẫu

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
add();
add();
add();
// Tính năng hiện tại là 3

Thử ngay

Giải thích ví dụ

biến add phân phối là giá trị trả về của hàm tự gọi.

Hàm tự gọi này chỉ chạy một lần. Nó đặt tính năng của biến thành số không (0) và trả về biểu thức hàm.

Vậy add trở thành hàm. Phần “hay nhất” là nó có thể truy cập vào biến tính của phạm vi cha.

được gọi là JavaScript Bí ẩn. Nó giúp hàm cóCá nhân”biến trở thành có thể.

Tính năng này được bảo vệ bởi phạm vi của hàm ẩn danh và chỉ có thể được thay đổi bằng cách sử dụng hàm add.

Bí ẩn là hàm có quyền truy cập vào phạm vi phạm vi cha, ngay cả sau khi hàm cha đóng.