Các thông tin liên quan đến JavaScript là gì và bạn viết chúng như thế nào?
JavaScript là một trong những ngôn ngữ lập trình khó nhất để thành thạo. Đôi khi, ngay cả các nhà phát triển cấp cao cũng không thể dự đoán đầu ra của mã mà họ đã viết. Một trong những khái niệm khó hiểu hơn trong JavaScript là bao đóng. Những người mới bắt đầu thường gặp khó khăn về khái niệm — đừng lo lắng. Bài viết này sẽ từ từ hướng dẫn bạn qua các ví dụ cơ bản để giúp bạn hiểu rõ hơn về các bao đóng. Bắt đầu nào.
Mục Lục
Đóng cửa là gì?
Bao đóng là một cấu trúc của một hàm và môi trường từ vựng của nó, bao gồm bất kỳ biến nào trong phạm vi của hàm khi tạo bao đóng. Nói một cách đơn giản hơn, hãy xem xét một chức năng bên ngoài và một chức năng bên trong. Hàm bên trong sẽ có quyền truy cập vào phạm vi của hàm bên ngoài.
Trước khi xem một số ví dụ về cách đóng JavaScript, bạn cần hiểu phạm vi từ vựng.
Môi trường Lexical là gì?
Môi trường từ vựng là bộ nhớ cục bộ cùng với môi trường mẹ của nó. Kiểm tra ví dụ được đưa ra bên dưới và đoán đầu ra của đoạn mã sau:
function outer(){
let a = 10;
console.log(y);
inner();
function inner(){
console.log(a);
console.log(y);
}
}
let y = 9;
outer();
Đầu ra sẽ là 9, 10, 9. Hàm bên trong có quyền truy cập vào các biến của cha của nó, bên ngoài () chức năng. Vì thế bên trong() chức năng có thể truy cập biến a. Các bên trong() chức năng cũng có thể truy cập biến y vì khái niệm về chuỗi phạm vi.
Hàm cha mẹ của hàm bên ngoài là toàn cục và cấp độ gốc của hàm bên trong() chức năng là bên ngoài () chức năng. Vì thế bên trong() hàm có quyền truy cập vào các biến của cha mẹ của nó. Nếu bạn cố gắng truy cập biến Một trong phạm vi toàn cục, nó sẽ hiển thị lỗi. Do đó, bạn có thể nói rằng bên trong() chức năng là từ điển bên trong bên ngoài () hàm và cha mẹ từ vựng của bên ngoài () chức năng là toàn cầu.
Giải thích các ví dụ về việc đóng JavaScript
Vì bạn đã học về môi trường từ vựng, bạn có thể dễ dàng đoán đầu ra của đoạn mã sau:
function a(){
let x = 10;
function b(){
console.log(x);
}
b();
}
a();Đầu ra là 10. Mặc dù thoạt nhìn bạn có thể không đoán ra, nhưng đây là một ví dụ về đóng trong JavaScript. Đóng cửa không có gì khác hơn là một chức năng và môi trường từ vựng của chúng.
Hãy xem xét một ví dụ trong đó có ba hàm được lồng vào nhau:
function a(){
let x = 10;
function b(){
function c(){
function d(){
console.log(x);
}
d();
}
c();
}
b();
}
a();Nó vẫn sẽ được gọi là một sự đóng cửa? Câu trả lời là: có. Một lần nữa, bao đóng là một hàm có cha từ vựng của nó. Cha mẹ từ vựng của hàm d () Là C(), và do khái niệm về chuỗi phạm vi, chức năng d () có quyền truy cập vào tất cả các biến của các hàm bên ngoài và các biến toàn cục.
Hãy xem một ví dụ thú vị khác:
function x(){
let a = 9;
return function y(){
console.log(a);
}
}
let b = x();
Bạn có thể trả về một hàm bên trong một hàm, gán một hàm cho một biến và chuyển một hàm vào bên trong một hàm trong JavaScript. Đây là vẻ đẹp của ngôn ngữ. Bạn có đoán được kết quả đầu ra sẽ như thế nào nếu bạn in biến b? Nó sẽ có chức năng in y (). Chức năng x () trả về một hàm y (). Do đó, biến b lưu trữ một chức năng. Bây giờ, bạn có thể đoán điều gì sẽ xảy ra nếu bạn gọi biến b? Nó in ra giá trị của biến Một: 9.
Bạn cũng có thể ẩn dữ liệu bằng cách sử dụng các bao đóng. Để hiểu rõ hơn, hãy xem xét một ví dụ với một nút có id tên là “nút” trên trình duyệt. Hãy đính kèm một trình nghe sự kiện nhấp chuột vào nó.
Bây giờ bạn cần tính số lần nút được nhấp. Có hai cách để làm như vậy.
-
Tạo số lượng biến toàn cục và tăng số lượng đó khi nhấp chuột. Nhưng phương pháp này có một lỗ hổng. Thật dễ dàng để thực hiện các sửa đổi trong các biến toàn cục vì chúng dễ dàng truy cập.
<button id="button">Click me</button>
<script>
let count = 0;
const button = document.getElementById("button");button.addEventListener("click", ()=>{
count++;
console.log(count);
})
</script> -
Chúng ta có thể ẩn dữ liệu bằng cách sử dụng các bao đóng. Bạn có thể bọc toàn bộ addEventListener () chức năng bên trong một chức năng. Nó đóng cửa. Và sau khi tạo một đóng, bạn có thể tạo một biến đếm và tăng giá trị của nó khi nhấp chuột. Bằng cách sử dụng phương pháp này, biến sẽ vẫn ở trong phạm vi chức năng và không thể sửa đổi.
<button id="button">Click me</button>
<script>
const button = document.getElementById("button");
function countOnClick(){
let count = 0;
button.addEventListener("click", ()=>{
count++;
console.log(count);
})
}
countOnClick();
</script>
Tại sao việc đóng cửa lại quan trọng?
Closures rất quan trọng không chỉ đối với JavaScript mà còn đối với các ngôn ngữ lập trình khác. Chúng hữu ích trong nhiều trường hợp mà bạn có thể tạo các biến trong phạm vi riêng tư của chúng hoặc kết hợp các hàm, trong số các trường hợp khác.
Hãy xem xét ví dụ này về thành phần chức năng:
const multiply = (a,b) => a*b;
const multiplyBy2 = x => multiply(10, x);
console.log(multiplyBy2(9));Chúng ta có thể triển khai cùng một ví dụ bằng cách sử dụng các bao đóng:
const multiply = function(a){
return function (b){
return a*b
}
}
const multiplyBy2 = multiply(2);
console.log(multiplyBy2(10))Các hàm có thể sử dụng các bao đóng trong các trường hợp sau:
-
Để thực hiện chức năng cà ri
-
Được sử dụng để ẩn dữ liệu
-
Được sử dụng với Trình nghe sự kiện
-
Được sử dụng trong phương thức setTimeout ()
Bạn không nên sử dụng tủ đóng cửa khi không cần thiết
Bạn nên tránh đóng cửa trừ khi thực sự cần thiết vì chúng có thể làm giảm hiệu suất của ứng dụng của bạn. Sử dụng bao đóng sẽ tốn rất nhiều bộ nhớ và nếu các bao đóng không được xử lý đúng cách, nó có thể dẫn đến rò rỉ bộ nhớ.
Các biến bị đóng trên sẽ không được giải phóng bởi trình thu gom rác của JavaScript. Khi bạn sử dụng các biến bên trong các bao đóng, bộ nhớ sẽ không được giải phóng bởi bộ thu gom rác vì trình duyệt cảm thấy rằng các biến vẫn đang được sử dụng. Do đó, các biến này tiêu tốn bộ nhớ và làm giảm hiệu suất của ứng dụng.
Đây là một ví dụ cho thấy cách các biến bên trong các bao đóng sẽ không được thu thập rác.
function f(){
const x = 3;
return function inner(){
console.log(x);
}
}
f()();Các biến x ở đây tiêu thụ bộ nhớ mặc dù nó không được sử dụng thường xuyên. Bộ thu gom rác sẽ không thể giải phóng bộ nhớ này vì nó nằm trong vùng đóng.
JavaScript là vô tận
Làm chủ JavaScript là một nhiệm vụ vô tận, vì có rất nhiều khái niệm và khuôn khổ thường không được khám phá bởi các nhà phát triển có kinh nghiệm. Bạn có thể cải thiện đáng kể khả năng xử lý JavaScript của mình bằng cách học các kiến thức cơ bản và thực hành chúng thường xuyên. Trình lặp và trình tạo là một số khái niệm mà các cuộc phỏng vấn hỏi trong các cuộc phỏng vấn JavaScript.
Đọc tiếp
Giới thiệu về tác giả
