Trong hướng dẫn này, bạn sẽ tìm hiểu về các đóng JavaScript với sự trợ giúp của các ví dụ.
Trước khi tìm hiểu về bao đóng, bạn cần hiểu hai khái niệm:
- Hàm lồng nhau
- Trả lại một chức năng
Hàm lồng nhau trong JavaScript
Trong JavaScript, một hàm cũng có thể chứa một hàm khác. Đây được gọi là một hàm lồng nhau. Ví dụ,
// nested function example // outer function function greet(name) ( // inner function function displayName() ( console.log('Hi' + ' ' + name); ) // calling inner function displayName(); ) // calling outer function greet('John'); // Hi John
Trong chương trình trên, greet()hàm chứa displayName()hàm bên trong nó.
Trả về một chức năng
Trong JavaScript, bạn cũng có thể trả về một hàm trong một hàm. Ví dụ,
function greet(name) ( function displayName() ( console.log('Hi' + ' ' + name); ) // returning a function return displayName; ) const g1 = greet('John'); console.log(g1); // returns the function definition g1(); // calling the function
Đầu ra
function displayName () (console.log ('Hi' + '' + name);) Xin chào John
Trong chương trình trên, greet()hàm đang trả về displayNameđịnh nghĩa hàm.
Ở đây, định nghĩa hàm trả về được gán cho biến g1. Khi bạn in g1 bằng cách sử dụng console.log(g1), bạn sẽ nhận được định nghĩa hàm.
Để gọi hàm được lưu trong biến g1, chúng ta sử dụng g1()với dấu ngoặc đơn.
JavaScript Closures
Trong JavaScript, bao đóng cung cấp quyền truy cập vào phạm vi bên ngoài của một hàm từ bên trong hàm bên trong, ngay cả sau khi hàm bên ngoài đã đóng. Ví dụ,
// javascript closure example // outer function function greet() ( // variable defined outside the inner function let name = 'John'; // inner function function displayName() ( // accessing name variable return 'Hi' + ' ' + name; ) return displayName; ) const g1 = greet(); console.log(g1); // returns the function definition console.log(g1()); // returns the value
Đầu ra
function displayName () (// truy cập biến tên trả về 'Hi' + '' + name;) Chào John
Trong ví dụ trên, khi greet()hàm được gọi, nó trả về định nghĩa hàm của displayName.
Đây, g1là một tham chiếu đến displayName()chức năng.
Khi g1()được gọi, nó vẫn có quyền truy cập vào greet()chức năng.
Khi chúng tôi chạy console.log(g1), nó trả về định nghĩa hàm.
Khái niệm đóng tồn tại đối với các ngôn ngữ lập trình khác như Python, Swift, Ruby, v.v.
Hãy xem một ví dụ khác.
// closure example function calculate(x) ( function multiply(y) ( return x * y; ) return multiply; ) const multiply3 = calculate(3); const multiply4 = calculate(4); console.log(multiply3); // returns calculate function definition console.log(multiply3()); // NaN console.log(multiply3(6)); // 18 console.log(multiply4(2)); // 8
Trong chương trình trên, calculate()hàm nhận một đối số duy nhất xvà trả về định nghĩa hàm của multiply()hàm. Các multiply()chức năng phải mất một đối số duy nhất yvà lợi nhuận x * y.
Cả hai multiply3và multiply4đang đóng cửa.
Các calculate()hàm được gọi thông qua một tham số x. Khi multiply3và multiply4được gọi, multipy()hàm có quyền truy cập vào đối số x đã truyền của calculate()hàm ngoài .
Bảo mật dữ liệu
Việc đóng JavaScript giúp bảo mật dữ liệu của chương trình. Ví dụ,
let a = 0; function sum() ( function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) const x = sum(); console.log(x()); // 1 console.log(x()); // 2 console.log(x()); // 3 a = a + 1; console.log(a); // 4
Trong ví dụ trên, sum()hàm trả về định nghĩa hàm của increaseSum()hàm.
Biến a được tăng lên bên trong increaseSum()hàm. Tuy nhiên, giá trị của một biến cũng có thể được thay đổi bên ngoài hàm. Trong trường hợp này, hãy a = a + 1;thay đổi giá trị của biến bên ngoài hàm.
Bây giờ, nếu bạn muốn một biến chỉ được tăng lên bên trong hàm, bạn có thể sử dụng một bao đóng. Ví dụ,
function sum() ( let a = 0; function increaseSum() ( // the value of a is increased by 1 return a = a + 1; ) return increaseSum; ) let x = sum(); let a = 5; console.log(x()); // 1 console.log(x()); // 2 console.log(a); // 5
Trong ví dụ trên, sum()hàm đặt giá trị của a thành 0 và trả về increaseSum()hàm.
Vì đóng, mặc dù sum()đã được thực thi, increaseSum()vẫn có quyền truy cập vào a và có thể thêm 1 vào mỗi lần x()được gọi.
Và một biến là riêng tư đối với sum()hàm. Nó có nghĩa là một biến chỉ có thể được truy cập bên trong sum()hàm.
Ngay cả khi bạn khai báo avà sử dụng nó cũng không ảnh hưởng đến abiến bên trong sum()hàm.
Lưu ý : Nói chung, các lệnh đóng được sử dụng để bảo mật dữ liệu.
