Ví dụ thời gian thực về việc đóng cửa trong JavaScript là gì?

Tôi sẽ đưa ra một định nghĩa về sự đóng cửa, và nó sẽ chẳng có ý nghĩa gì cả. Và sau đó tôi sẽ tiếp tục với một vài ví dụ thực tế, và khi chúng ta đã trải qua một ví dụ thực tế, định nghĩa sẽ có ý nghĩa hoàn hảo

Định nghĩa đóng cửa

Một bao đóng là khi một hàm bên ngoài trả về một hàm bên trong, sau đó hàm bên trong được thực thi trong một phạm vi khác và hàm bên trong tiếp tục duy trì quyền truy cập vào các biến của hàm bên ngoài, mặc dù hàm bên ngoài không còn tồn tại

Xem video Youtube

Ví dụ đóng cửa 1. đóng cửa đơn giản

function greet() {
  const name = 'John';

  return function () {
    console.log(`Hi ${name}`);
  };
}

const greeting = greet();

greeting();

đầu ra

Hi John

Theo mệnh giá, bạn có thể nghĩ. "vấn đề lớn là gì?"

Chức năng bên ngoài trên dòng 1 đang trả về một chức năng bên trong trên dòng 4 và chức năng bên trong chỉ đơn giản là đăng xuất lời chào ra bàn điều khiển

Tuy nhiên, nếu bạn phân tích chức năng chi tiết hơn, bạn có thể nhận thấy một số hành vi kỳ lạ

Chẳng hạn, ở dòng 5, hàm bên trong đang tham chiếu đến tham số tên trong hàm bên ngoài

Bản thân điều này không hoàn toàn bất thường, bởi vì điều này chỉ đơn giản là sử dụng phạm vi từ vựng, nghĩa là một hàm có thể truy cập một biến được xác định bên ngoài hàm đó

Nhưng sau đó nếu bạn nhìn vào dòng 9, bạn sẽ thấy rằng tôi đã khai báo một biến có tên là hello, và biến này chứa hàm bên trong được trả về ở dòng 4. Nói cách khác, chức năng bên trong đã trở lại và chức năng bên ngoài không còn tồn tại

Hơn nữa, tại thời điểm hàm bên trong được gọi, nó tham chiếu đến tham số tên của hàm bên ngoài mặc dù hàm bên ngoài không còn tồn tại

Vậy làm thế nào để hàm bên trong có thể tham chiếu một tham số trong hàm bên ngoài nếu hàm bên ngoài không còn tồn tại?

Câu trả lời đơn giản là đóng cửa

Một bao đóng cho phép hàm bên trong được trả về quyền truy cập vào tất cả các biến trong hàm bên ngoài mà hàm bên trong tham chiếu, mặc dù hàm bên ngoài sẽ bị hủy vào thời điểm hàm bên trong được gọi

Chúng ta hãy xem lại định nghĩa về bao đóng, và lần này nó sẽ có ý nghĩa hơn một chút

Một bao đóng là khi một hàm bên ngoài trả về một hàm bên trong, sau đó hàm bên trong được thực thi trong một phạm vi khác và hàm bên trong tiếp tục duy trì quyền truy cập vào các biến của hàm bên ngoài, mặc dù hàm bên ngoài không còn tồn tại.  

Kết thúc Ví dụ 2. Hàm đếm

function setCount() {
  let number = 0;

  return function () {
    console.log(++number);
  };
}

const counter = setCount();
counter();
counter();
counter();

Trong ví dụ này, tôi có một hàm setCount ở dòng 1 với một biến số ở dòng 2 được đặt thành 0

Trên dòng 4, một hàm bên trong ẩn danh được trả về để tăng biến số lên 1

Sau đó, ở dòng 9, một biến bộ đếm được khai báo chứa kết quả của lệnh gọi hàm setCount và kết quả của setCount là hàm bên trong được trả về ở dòng 4, do đó, một lần nữa, bộ đếm là một hàm chứ không phải một giá trị

Và cuối cùng, ở dòng 10, 11 và 12, hàm đếm được gọi 3 lần

Trước khi tôi chạy tập lệnh này, bạn nghĩ đầu ra sẽ là gì?

Hãy chạy tập lệnh và xem

đầu ra

1
2
3

Tại sao lại là kết quả 1, 2 và 3?

Bởi vì hàm bên trong tăng số ở dòng 4, nên bao đóng cho phép chúng ta truy cập vào biến số đã được khai báo mặc dù hàm bên ngoài đã bị hủy

Mỗi khi hàm đếm được gọi ở các dòng từ 10 đến 12, giá trị của biến số ở dòng 2 được tăng lên

Ví dụ này thể hiện rõ ràng khái niệm đóng cửa. Mặc dù chức năng bên ngoài không còn tồn tại, chức năng bên trong tiếp tục có quyền truy cập vào các biến của chức năng bên ngoài

Kết thúc Ví dụ 3. Đối với câu hỏi phỏng vấn vòng lặp

function addNumbers() {
  var numbers = [];

  for (var i = 1; i <= 3; i++) {
    numbers.push(function () {
      return i;
    });
  }

  return numbers;
}

const getNumbers = addNumbers();

console.log(getNumbers[0]());
console.log(getNumbers[1]());
console.log(getNumbers[2]());

Ví dụ trên khá phổ biến trong các cuộc phỏng vấn, vì vậy hãy dành thời gian để đảm bảo bạn hiểu ví dụ này

Bạn mong đợi đầu ra cho ví dụ trên là gì?

Nếu bạn mong đợi đầu ra là 1, 2 và 3, thì bạn đã nhầm

đầu ra

4
4
4

Tại sao kết quả là 4, 4, 4?

Vòng lặp for sử dụng một biến var và một var được sử dụng trong vòng lặp for trong javascript được nâng lên. Điều này có nghĩa là khi mã được thực thi, trình thông dịch javascript sẽ tạo một khai báo var i trên dòng 3. Nói cách khác, biến i được khai báo bên ngoài vòng lặp for và sau đó biến này được thay đổi trong mỗi lần lặp

Điều này có nghĩa là sau khi vòng lặp for chạy xong thì biến i sẽ bằng 4. Tại sao lại là 4?

Hãy suy nghĩ về cách thức hoạt động của một vòng lặp for

Một ví dụ đơn giản cho vòng lặp được cung cấp dưới đây

for (var i = 1; i <= 3; i++) {
  console.log(i);
}

console.log(`i after for loop ran to completion: ${i}`);

đầu ra

1
2
3
i after for loop ran to completion: 4

Nhiều người trong chúng ta sử dụng vòng lặp đơn giản hàng ngày mà không thực sự hiểu cách thức hoạt động của nó.

Nếu bạn xem ví dụ về vòng lặp for ở dòng 1, bạn sẽ thấy rằng vòng lặp for có 3 biểu thức bên trong dấu ngoặc đơn. Cái đầu tiên là biểu thức khởi tạo hoặc biểu thức khởi tạo và nhiệm vụ của nó là khởi tạo vòng lặp for. Biểu thức ban đầu sẽ chỉ chạy một lần và trong trường hợp này, nó tạo một biến i và đặt nó thành 1, là vị trí bắt đầu của vòng lặp

Biểu thức thứ hai được gọi là biểu thức điều kiện. Biểu thức này sẽ đánh giá từng lần vượt qua vòng lặp. Nó sẽ đánh giá đúng hoặc sai và miễn là biểu thức này đánh giá đúng, vòng lặp for sẽ tiếp tục chạy. Nếu biểu thức đánh giá là sai, vòng lặp for kết thúc. Vì vậy, ở đây bạn có thể thấy vòng lặp for sẽ tiếp tục chạy miễn là i nhỏ hơn hoặc bằng 3

Biểu thức cuối cùng là biểu thức tăng. Nó sẽ tăng i lên 1 sau mỗi lần đi qua vòng lặp

Vì vậy, mặc dù vòng lặp for chỉ thực hiện 3 lần, nó vẫn sẽ tăng giá trị của i sau lần vượt qua cuối cùng, bởi vì đó là cách hoạt động của biểu thức gia số

Bây giờ chúng ta biết giá trị của i sẽ là bao nhiêu sau khi vòng lặp for chạy đến khi hoàn thành, nhưng điều đó vẫn chưa giải thích được tại sao mỗi giá trị được trả về từ mảng getNumbers trên các dòng 15 đến 17 là 4, 4, 4 thay vì 1,

Để hiểu điều này, hãy quay lại dòng 5 trong vòng lặp for

Đối với mỗi lần lặp lại, chúng tôi đang đẩy một hàm ẩn danh vào mảng. Nếu điều đó nghe có vẻ kỳ lạ, nó không phải. Bạn có thể đẩy một giá trị, một đối tượng hoặc một hàm vào một mảng

Nếu chúng ta đẩy i vào mảng, chúng ta sẽ đẩy giá trị của i tại thời điểm lặp vào mảng

Bởi vì chúng ta đang đẩy một hàm ẩn danh vào mảng, nên hàm ẩn danh này sẽ trả về giá trị của i tại thời điểm gọi hàm ẩn danh này trong mảng. Và tại thời điểm gọi hàm ẩn danh này trên các dòng 15 - 17, vòng lặp đã chạy đến khi kết thúc

Và vào thời điểm vòng lặp chạy đến khi kết thúc, tôi sẽ bằng 4 do cách thức hoạt động của biểu thức gia số trong vòng lặp for

Câu hỏi duy nhất còn lại là làm cách nào mỗi hàm ẩn danh trong mảng getNumbers có thể truy cập giá trị của i?

Hãy suy nghĩ về những gì đang xảy ra khi chúng tôi thực hiện chức năng ẩn danh trên dòng 15

• Chúng tôi đang gọi một chức năng ẩn danh từ phạm vi toàn cầu trên dòng 15
• addNumbers trên dòng 1 là một hàm bên ngoài trả về một loạt các hàm bên trong, bởi vì mảng số được trả về ở dòng 10 chứa một loạt các hàm ẩn danh về cơ bản là một mảng các hàm bên trong trong hàm addNumbers
• mỗi hàm bên trong này trong mảng số đang truy cập biến i nằm trong phạm vi hàm addNumbers
• tại thời điểm mỗi hàm bên trong được gọi, hàm addNumbers không còn tồn tại, nhưng mỗi hàm bên trong vẫn duy trì quyền truy cập vào biến i nằm trong phạm vi addNumbers

Vì vậy, tất cả các điều kiện để đóng cửa đã được đáp ứng

Đây là cách đóng cổ điển và đó là cách hàm ẩn danh trong mảng getNumbers có thể được gọi từ phạm vi toàn cầu và trả về giá trị của i

Tóm lại, kết quả là 4, 4, 4 do nhiều yếu tố kết hợp lại

• var trong vòng lặp for được nâng lên
• giá trị của i sau khi vòng lặp for chạy đến khi kết thúc là 4 do cách thức hoạt động của biểu thức gia số
• gọi từng hàm ẩn danh trả về 4 vì hàm ẩn danh trả về giá trị i tại thời điểm thực hiện
• mỗi chức năng ẩn danh có quyền truy cập vào biến i vì bao đóng

Ví dụ 4. Cho vòng lặp với Let

đầu ra

1
2
3

Trong ví dụ trước, 4, 4 và 4 được trả về từ các hàm mảng. Trong một ví dụ thực tế, có lẽ chúng ta muốn trả về 1, 2 và 3

Thay vào đó, làm thế nào chúng ta có thể trả về 1, 2 và 3?

Có hai cách rất đơn giản và dễ dàng để làm điều này

Cách dễ nhất để làm điều này là chỉ cần sử dụng let thay vì var trong vòng lặp for, như trong ví dụ trên

Khi let được sử dụng trong vòng lặp for, let sẽ có một ràng buộc duy nhất cho mỗi lần lặp. Hãy nghĩ về điều này vì có một biến i duy nhất cho mỗi lần lặp lại

Ví dụ 5. Đối với Vòng lặp với IIFE (Biểu thức hàm được gọi ngay lập tức)

Hi John

đầu ra

1
2
3

Cách thứ hai mà chúng ta có thể đạt được một ràng buộc duy nhất cho mỗi lần lặp lại là sử dụng IIFE hoặc một hàm được gọi ngay lập tức

Để làm điều này, chúng tôi quấn số. đẩy vào một biểu thức hàm được gọi ngay lập tức, như trong ví dụ trên

Bằng cách bọc từng số. đẩy vào một IIFE, chúng tôi đảm bảo rằng biến chỉ mục được đặt trong phạm vi riêng tư cho hàm này và do đó, biến chỉ mục sẽ có một ràng buộc duy nhất cho mỗi lần lặp

Kết thúc Ví dụ 6. Câu hỏi phỏng vấn - setTimeout

Hi John

đầu ra

4
4
4

Ví dụ này là một biến thể của các ví dụ trước mà chúng ta đã xem xét. Đó là một câu hỏi phỏng vấn phổ biến khác, vì vậy tôi khuyến khích bạn xem câu hỏi này để bạn có thể hiểu nó hoạt động như thế nào vì hiểu nó có nghĩa là bạn có thể trả lời bất kỳ biến thể nào của câu hỏi này theo cách của bạn

Hãy để tôi giải thích lý do cho đầu ra dưới đây

Trên dòng 2, chúng tôi có một vòng lặp for sử dụng var. Và bây giờ chúng ta biết rằng một var trong vòng lặp for được nâng lên, điều đó có nghĩa là biến i được khai báo phía trên vòng lặp for và biến i bị thay đổi trong mỗi lần lặp

Và giá trị của i sẽ là 4 sau khi vòng lặp for chạy xong. Tại sao?

Nếu bạn đang thắc mắc tại sao chúng ta thấy 4, 4 và 4 đã đăng xuất khỏi bảng điều khiển thay vì 1, 2 và 3, thì lý do là tại thời điểm lặp lại vòng lặp for, nó đang tạo ra 3 hàm setTimeout

Các hàm setTimeout đó sẽ không chạy tại thời điểm lặp lại vòng lặp for. Hàm setTimeout đầu tiên sẽ chạy sau 1 giây, hàm thứ hai sẽ chạy sau 2 giây, v.v., nhưng vòng lặp for sẽ hoàn thành chỉ sau vài mili giây

Cái này hoạt động ra sao?

Chà, khi hàm createCallbacks được gọi ở dòng 9, nó sẽ chạy vòng lặp for. Trong mỗi lần lặp vòng lặp for, chúng ta tạo một hàm setTimeout. Hãy nhớ rằng chúng ta chỉ đang tạo chức năng. Nó không được gọi trong bất kỳ vòng lặp for nào

Khi chúng tôi tạo một hàm setTimeout, nó được đặt trên hàng đợi công việc, đây là thứ mà khung javascript sử dụng để theo dõi thời điểm chạy công việc

Hàm createCallbacks sẽ hoàn thành gần như ngay lập tức. Khi điều này xảy ra, javascript sẽ tiếp tục chạy vòng lặp sự kiện để chạy liên tục để kiểm tra xem có mã nào cần thực thi không. Nó cũng sẽ kiểm tra hàng đợi công việc để xem liệu có chức năng nào cần được thực thi tại một thời điểm cụ thể hay không và nếu có, chức năng đó sẽ được thực thi tại thời điểm đó

Câu hỏi thực sự là làm thế nào để mỗi hàm setTimeout có quyền truy cập vào biến i?

Câu trả lời là, bạn đoán nó, đóng cửa

Trong ví dụ đầu tiên, tôi đã giải thích cách bao đóng cho phép hàm bên trong tham chiếu đến các biến của hàm bên ngoài, mặc dù hàm bên ngoài không còn tồn tại

Và trong trường hợp này, setTimeout là hàm bên trong vì nó đang truy cập biến i được đặt bên ngoài vòng lặp for

Điều quan trọng là phải hiểu rằng các bao đóng được tạo khi các hàm được tạo, không phải khi chúng được gọi. Và bởi vì một bao đóng đã được tạo khi hàm setTimeout này được tạo, điều này cho phép hàm setTimeout truy cập vào biến i bất cứ lúc nào hàm setTimeout sẽ chạy

Ví dụ 7. đóng gói

Hi John

đầu ra

Hi John

Bây giờ chúng ta đã hoàn thành phần lớn lý thuyết xung quanh cách hoạt động của bao đóng, tôi muốn tập trung vào 3 ví dụ thực tế mà bạn có thể sử dụng trong mã của mình

Những ví dụ thực tế này thực sự dễ hiểu hơn rất nhiều so với những ví dụ trước. Sử dụng mẫu bao đóng trong mã của bạn sẽ củng cố hiểu biết của bạn về bao đóng. Hơn nữa, lần tới khi ai đó hỏi bạn cách sử dụng bao đóng, bạn có thể cung cấp cho họ các trường hợp sử dụng thực tế

Hãy nghĩ về trường hợp sử dụng sau. Bạn muốn hiển thị một đối tượng đếm với các hàm tăng, giảm và getCount và mỗi hàm này có quyền truy cập vào một biến riêng theo dõi số đếm. Nói cách khác, bạn muốn triển khai đóng gói, nghĩa là bạn muốn ẩn hoặc đặt trạng thái của một đối tượng ở chế độ riêng tư và chỉ hiển thị các phương thức

Và đóng cửa là một cách đơn giản và hiệu quả để làm điều này

Hãy để tôi hướng dẫn bạn qua ví dụ trên

Tôi có một hàm đếm ở dòng 1 và ở dòng 2 tôi đã khai báo một biến đếm nằm trong phạm vi của hàm này

Sau đó, ở dòng 4, tôi trả về một đối tượng có hàm gia tăng ở dòng 5, hàm này sẽ thay đổi biến đếm ở dòng 2 bằng cách tăng giá trị của nó

Hàm decrement ở dòng 4 làm giảm giá trị của biến đếm và hàm getCount ở dòng 7 chỉ ghi giá trị của biến đếm ra bàn điều khiển

Sau đó, ở dòng 11, tôi tạo một biến mới có tên là counter, biến này tương đương với đối tượng được trả về từ hàm đếm

Nói cách khác, biến đếm sẽ chỉ chứa đối tượng được trả về từ hàm đếm. Biến đếm ở dòng 2 không được trả về từ hàm đếm, nghĩa là đây là biến riêng và chỉ các hàm tăng, giảm và hàm getCount trong đối tượng đếm ở dòng 11 mới có quyền truy cập vào biến đếm

Tất cả điều này được thực hiện thông qua việc sử dụng bao đóng, bởi vì như bạn nhớ, định nghĩa của bao đóng là

Một bao đóng là khi một hàm bên ngoài trả về một hàm bên trong, sau đó hàm bên trong được thực thi trong một phạm vi khác và hàm bên trong tiếp tục duy trì quyền truy cập vào các biến của hàm bên ngoài, mặc dù hàm bên ngoài không còn tồn tại

Và trong ví dụ này, chúng ta có 1 hoặc nhiều hàm bên trong ở dòng 5 - 7 được trả về bởi hàm bên ngoài ở dòng 1

Các hàm bên trong này được gọi trong phạm vi toàn cầu trên các dòng 13 - 18 và mỗi hàm này tiếp tục có quyền truy cập vào biến đếm được xác định trong hàm bên ngoài không còn tồn tại tại thời điểm các hàm này được gọi

Trong ví dụ trên, chúng tôi đã sử dụng thành công một bao đóng để thực hiện đóng gói trong javascript

Ví dụ 8. Sử dụng Closure trong hàm init để đảm bảo rằng hàm chỉ được thực thi một lần

Hi John

đầu ra

Hi John

Ví dụ trên minh họa cách bạn có thể sử dụng bao đóng để đảm bảo rằng mã trong hàm init chỉ được thực thi một lần, bất kể hàm init được gọi bao nhiêu lần. Đây là một mô hình rất hữu ích với các ứng dụng thực tế khác nhau. Chẳng hạn, bạn có thể sử dụng điều này để đảm bảo rằng kết nối cơ sở dữ liệu chỉ được khởi tạo một lần

Ở dòng 1, chúng ta có hàm init ở dòng 1 và ở dòng 2, chúng ta có một biến khởi tạo được đặt thành false

Sau đó, ở dòng 4, chúng ta trả về một hàm. Và trong hàm này, có một điều kiện if đơn giản để kiểm tra xem biến khởi tạo được đặt thành true hay false và hành động tương ứng

Ở dòng 5, nếu hàm init là true, chúng ta đăng cảnh báo ra bảng điều khiển để nói rằng mã đã được khởi tạo và không có gì khác xảy ra

Và nếu khởi tạo là sai, đó sẽ là trường hợp bất cứ khi nào hàm khởi tạo được gọi lần đầu tiên, dòng 9 và 10 sẽ chạy, điều này sẽ đặt biến được khởi tạo thành đúng một cách hiệu quả và bất kỳ mã nào bạn cần chạy, chẳng hạn như khởi tạo một

Đây là một bao đóng vì ở dòng 14 khi chúng ta đặt biến khởi tạo, nó bằng với hàm ở dòng 4 đến 11 được trả về từ hàm init ở dòng 1. Nói cách khác, chúng ta có một hàm bên trong được trả về từ một hàm bên ngoài và hàm bên trong này tham chiếu đến một biến trong hàm bên ngoài sẽ không còn tồn tại tại thời điểm mà hàm bên trong được gọi ở các dòng 16 - 18

Ví dụ 9. Sử dụng bộ nhớ không hiệu quả

Hi John

đầu ra

Hi John

Vấn đề với hàm trên là mỗi khi hàm findByIndex được gọi, một mảng số mới với một triệu mục được tạo

Thời gian để tạo mảng cho mỗi lệnh gọi được liệt kê trong đầu ra ở trên

Hãy xem cách chúng ta có thể sử dụng bao đóng để đảm bảo rằng mảng chỉ được tạo khi hàm được gọi lần đầu tiên

Ví dụ 10. Sử dụng bộ nhớ hiệu quả

function setCount() {
  let number = 0;

  return function () {
    console.log(++number);
  };
}

const counter = setCount();
counter();
counter();
counter();

đầu ra

function setCount() {
  let number = 0;

  return function () {
    console.log(++number);
  };
}

const counter = setCount();
counter();
counter();
counter();

Trong ví dụ trên, tôi đã thay đổi hàm để nó sử dụng bao đóng để đảm bảo rằng mảng số chỉ được tạo một lần

Chúng tôi có một hàm findByIndex trên dòng 1 và sau đó mảng số được tạo trên dòng 3

Sau đó, chúng tôi trả về một hàm bên trong trên dòng 6 nhận tham số chỉ mục và tham số chỉ mục này sau đó được sử dụng để lấy mục trong mảng số tại chỉ mục đã chỉ định

Ở dòng 15, tôi tạo một hàm find bằng với hàm bên trong được trả về bởi hàm findByIndex
Khi hàm này được tạo ở dòng 15, mảng số sẽ được tạo

Tuy nhiên, khi tôi gọi hàm tìm kiếm trên các dòng 17-20, mảng sẽ không được tạo lại, bất kể hàm tìm kiếm được gọi bao nhiêu lần

Một lần nữa, điều này được thực hiện thông qua các bao đóng. Chúng ta có một bao đóng bởi vì có một hàm bên trong ở dòng 6 tham chiếu đến một biến được định nghĩa trong một hàm bên ngoài ở dòng 3 và vào thời điểm hàm bên trong được gọi từ phạm vi toàn cục ở các dòng 17-20, hàm bên ngoài không có

Và nếu chúng ta nhìn vào tập lệnh đăng xuất thời gian, chúng ta có thể thấy rằng mảng số chỉ được tạo một lần, giúp cải thiện hiệu suất

Phần kết luận

Trong bài đăng này, tôi đã đề cập đến mọi thứ, từ việc đóng cửa là gì đến các ứng dụng thực tế cho việc đóng cửa và một số câu hỏi phỏng vấn khó hơn mà bạn có thể gặp phải xung quanh việc đóng cửa

Mặc dù ban đầu định nghĩa về bao đóng có thể khó hiểu, nhưng khi bạn chứng minh bao đóng bằng một ví dụ thực tế và quay lại định nghĩa, mọi thứ sẽ có ý nghĩa

Nếu bạn thấy hướng dẫn này hữu ích hoặc nếu có bất kỳ khái niệm đóng nào mà bạn vẫn đang gặp khó khăn, hãy cho tôi biết trong phần nhận xét bên dưới

Ví dụ về cách đóng trong JavaScript với thời gian thực là gì?

Việc đóng JavaScript được sử dụng ở đâu?

Ví dụ về đóng cửa là gì?

Tại sao chúng ta đang sử dụng đóng cửa?