HomeLập trìnhJavaScriptHướng dẫn đóng...

Hướng dẫn đóng JavaScript – Cách đóng và phạm vi từ vựng hoạt động trong JS


Trong JavaScript, mọi người thường nhầm lẫn giữa bao đóng với phạm vi từ vựng.

Phạm vi từ vựng là một phần quan trọng của bao đóng, nhưng bản thân nó không phải là bao đóng.

Đóng cửa là một khái niệm nâng cao cũng là chủ đề thường xuyên của các cuộc phỏng vấn kỹ thuật.

Bạn nên có một sự hiểu biết cơ bản về các chức năng trước khi cố gắng hiểu các bao đóng.

Sau khi đọc bài viết này, tôi hy vọng tôi sẽ giúp bạn tìm hiểu những điều sau:

  • Sự khác biệt giữa phạm vi từ vựng và bao đóng.
  • Tại sao bao đóng yêu cầu phạm vi từ vựng.
  • Làm thế nào để đưa ra một ví dụ về sự đóng cửa trong quá trình phỏng vấn.

Phạm vi từ vựng trong JavaScript là gì?

Phạm vi từ vựng mô tả cách các hàm lồng nhau (còn được gọi là “con”) có quyền truy cập vào các biến được xác định trong phạm vi cấp độ cha.

const myFunction = () => {
     let myValue = 2;
     console.log(myValue);

     const childFunction = () => {
          console.log(myValue += 1);
     }

     childFunction();
}

myFunction();

Trong ví dụ này, childFunction có quyền truy cập vào biến myValue được định nghĩa trong phạm vi cha của myFunction.

Phạm vi từ vựng của childFunction cho phép truy cập vào phạm vi cha.

Đọc thêm  ¿Có moipular arreglos en JavaScript không?

Đóng cửa trong JavaScript là gì?

w3Schools.com đưa ra một định nghĩa tuyệt vời về việc đóng cửa là gì:

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.

Hãy lưu ý phần đầu tiên của câu trước dấu phẩy:

…một chức năng có quyền truy cập vào phạm vi cha

Đó là mô tả phạm vi từ vựng!

Nhưng chúng ta cần phần thứ hai của định nghĩa để đưa ra một ví dụ về bao đóng…

…ngay cả sau khi chức năng gốc đã đóng.

Hãy xem xét một ví dụ về đóng cửa:

const myFunction = () => {
     let myValue = 2;
     console.log(myValue);

     const childFunction = () => {
          console.log(myValue += 1);
     }

     return childFunction;
}

const result = myFunction();
console.log(result);
result();
result();
result();

Sao chép mã ví dụ ở trên và dùng thử.

Hãy phá vỡ những gì đang xảy ra …

Trong lần sửa đổi này, myFunction lợi nhuận childFunction thay vì gọi nó.

Vì vậy, khi result được đặt bằng myFunction()câu lệnh console bên trong myFunction được ghi lại, nhưng không phải là câu lệnh bên trong childFunction.

childFunction không được kêu gọi hành động.

Thay vào đó, nó được trả lại và giữ trong result.

Ngoài ra, chúng ta cần nhận ra rằng myFunction đã đóng sau khi nó được gọi.

Dòng với console.log(result) sẽ hiển thị trong bảng điều khiển rằng result hiện giữ giá trị hàm ẩn danh childFunction.

Bây giờ, khi chúng ta gọi result()chúng tôi đang gọi hàm ẩn danh đã được gán cho childFunction.

Là con của myFunctionchức năng ẩn danh này có quyền truy cập vào myValue biến bên trong myFunction ngay cả sau khi nó đã đóng cửa!

Việc đóng chúng tôi tạo bây giờ cho phép chúng tôi tiếp tục tăng giá trị của myValue biến mỗi khi chúng ta gọi result().

Dành thời gian của bạn với việc đóng cửa

Đóng cửa được coi là một khái niệm nâng cao vì lý do chính đáng.

Đọc thêm  Cách chuyển các hàm gọi lại cho String.replace() trong JavaScript

Ngay cả khi phân tích từng bước về việc đóng cửa là gì, khái niệm này có thể mất thời gian để hiểu.

Đừng vội hiểu và đừng khắt khe với bản thân nếu ban đầu nó không có ý nghĩa.

Khi bạn hoàn toàn hiểu về sự đóng cửa, bạn có thể cảm thấy giống như Neo khi anh ấy nhìn thấy Ma trận. Bạn sẽ thấy các khả năng viết mã mới và nhận ra rằng chúng luôn ở đó!

Tôi sẽ để lại cho bạn một hướng dẫn về cách đóng cửa từ kênh YouTube của tôi. Tôi tìm hiểu sâu hơn một chút và cung cấp thêm một vài ví dụ về cách đóng cửa để xây dựng dựa trên cuộc thảo luận trong bài viết này.

Hướng dẫn đóng Javascript



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status