Closure là gì? Tìm hiểu về Closure trong JavaScript

Nguồn bài viết: Closure là gì? Tìm hiểu về Closure trong JavaScript

Có lẽ bạn chưa biết rằng, đã có rất nhiều người “trượt phỏng vấn xin việc” chỉ vì Đóng cửa! Vậy, đóng cửa là gì? Tại sao C Close lại xuất hiện nhiều trong các cuộc phỏng vấn? Đừng lo lắng, thuthuatkiemtien.com sẽ giải đáp những thắc mắc này và giúp bạn hiểu thêm về Closure trong JavaScript thông qua một số ví dụ!

Tìm hiểu về Đóng cửa

Đóng cửa là gì?

C Close là một hàm được lồng bên trong một hàm khác và Closure có thể sử dụng biến toàn cục, biến cục bộ của hàm (hàm cha) ngay cả khi đã đóng và sử dụng biến cục bộ của chính Closure.

Trong JavaScript, Closure là một thuộc tính rất mạnh. Không chỉ JavaScript, Closure còn có mặt trong hầu hết các ngôn ngữ lập trình khác.

Trong JavaScript, Closure có 3 phạm vi truy cập biến khác nhau bao gồm:

Các biến trong hàm Đóng cửa
Biến được khai báo trong hàm cha chứa Closure (hàm ngoài).
Các biến toàn cục

Chức năng đóng cửa như thế nào?

Bên cạnh lý thuyết, chúng ta cùng tìm hiểu về các ví dụ để hiểu rõ hơn về Closure nhé!

Đầu tiên, chúng ta sẽ xem xét ví dụ sau về phạm vi Lexical:

function outerFuc() {
var name="Mai Truc Lam";
function innerFunc() {
console.log(name);
}
innerFunc();
}
outerFuc(); // Kết quả: Mai Truc Lam

Trong đó, chúng ta có:

Biến toàn cục: Tên
Chức năng functionOuter(hàm cha)
Chức năng bên trongtrong hàm innerFunc không có biến toàn cục nhưng trong hàm đang sử dụng một Tên of function functionOuter.

Thay đổi mã một chút, chúng ta sẽ có một Closure như thế này:

function outerFuc() {
var name="Mai Truc Lam";
function innerFunc() {
console.log(name);
}
return innerFunc;
}
var refInnerFunc = outerFuc();
refInnerFunc(); // Kết quả: Mai Truc Lam

Có vẻ như bạn đã thấy sự khác biệt ở đây rồi phải không? Trong đoạn mã thứ hai, chúng ta sẽ thấy:

Hàm refInnerFunc đang mang và tham chiếu đến kết quả của hàm ngoàiFuc (); refInnerFunc trỏ đến hàm bên trong nhưng chưa được thực hiện.

Sau chức năng ngoàiFuc () Sau khi thực thi, biến toàn cục của hàm sẽ được giải phóng

Khi hàm innerFunc () thi hành sẽ có kết quả là Mai Trúc Lâm. Nhưng kết quả này là từ hàm cha ngoàiFuc (). Nhưng điều này nghe có vẻ vô lý đối với con mắt lý thuyết phải không?

Nhưng trong JavaScript, khi một hàm nằm bên trong một hàm khác, nếu hàm mẹ thực thi trước, một môi trường sẽ được tạo Lexical đưa tất cả các biến hiện có vào và gán cho hàm con (trong ví dụ: refInnerFunc) để sử dụng.

Nó cũng có thể được giải thích như sau: khi hàm ngoàiFuc () “Nếu chết đi để lại “di chúc” cho con. refInnerFunc () là một biến Tên, sau chức năng innerFunc () “die ”theo biến mới được phát hành.

Trong ví dụ trên, chúng ta có thể thấy hàm refInnerFunc () là một Đóng, vì hàm nằm bên trong một hàm khác và có thể sử dụng biến Tên của hàm cha ngoàiFuc (). Nếu bạn có biến cục bộ của riêng mình refInnerFunc () và biến toàn cục, refInnerFunc () đồ cúng có thể được sử dụng.

refInnerFunc () sẽ đề cập đến môi trường Lexical và chức năng innerFunc ().

Ứng dụng của Closure trong thực tế là gì?

Trong thực tế, chúng ta sẽ thấy Closure có rất nhiều ứng dụng như:

Để hiểu rõ hơn, chúng ta cùng quay lại ví dụ về 3 ứng dụng trên nhé!

Nhà máy chức năng

Chúng tôi sẽ có mã sau:

function makeExponentiation(x) {
var exponent = x;
return function(y) {
return Math.pow(y, exponent);
}
}
var sqr = makeExponentiation(2);
var sqrt = makeExponentiation(0.5);
console.log('3 squared is ' + sqr(3));
console.log('căn bậc hai của 9 là ' + sqrt(9));

Trong đó, bạn có thể thấy chức năng makeExponentiation Giống như một nhà máy Chức năng khi có thể tạo các Hàm tùy thuộc vào các tham số được truyền vào. 2 Đóng cửa: sqrt và sqr có cùng một cơ thể nhưng khác nhau biến tương đương (ENV – Tương đương biến).

Mô phỏng phạm vi biến trong lập trình hướng đối tượng

Bên trong JavaScript, không có khái niệm lớp thực sự như trong C ++ hoặc các ngôn ngữ lập trình khác. Cuối cùng, trong ES6, có khái niệm về các lớp trong JavaScript. Tuy nhiên, đây thực chất là một phương pháp mô phỏng / mô phỏng / hack bằng cách sử dụng Closure. Bạn có thể thấy đoạn mã sau:

function Counter() {
var counter = 0;
function add(number) {
counter += number;
}
return {
increment: function() {
add(1);
},
decrement: function() {
add(-1);
},
value: function() {
return counter;
}
};
});
var counter = Counter();
console.log('giá trị ban đầu’ + counter.value());
counter.increment();
counter.increment();
console.log('sau khi tăng lên 1' + counter.value());
counter.decrement();
console.log('sau khi giảm xuống 1 ' + counter.value());

Trong đó, các chức năng tăng, giảm dần và giá trị Cả hai đều là những Closures với những cơ thể khác nhau nhưng có chung một Tương đương biến.

Tương đương biến được chia sẻ là “bí mật” của việc mô phỏng các lớp trong JavaScript. Khi một Đóng cửa cập nhật một biến, thay đổi này cũng sẽ được ghi lại trong các Đóng cửa khác.

Chuỗi phạm vi đóng cửa

Tiếp theo, chúng tôi sẽ giải thích thêm về những ý tưởng trong phần mở đầu được đề cập về 3 phạm vi C Close có thể được truy cập bao gồm:

Phạm vi cục bộ: phạm vi riêng
Phạm vi chức năng bên ngoài: phạm vi bên ngoài (phạm vi chức năng mẹ)
Phạm vi toàn cầu

Khi lập trình, một trong những lỗi thường gặp là không nhận ra Outer Function là một hàm lồng nhau, dẫn đến: phạm vi của Outer Function là phạm vi của Outer Function. Điều này dẫn đến một chuỗi phạm vi chức năng rất hiệu quả.

Để minh chứng cho điều này, hãy cùng thuthuatkiemtien.com xem qua ví dụ sau nhé!

// đây là global scope
var e = 10;
function sum(a){
return function(b){
return function(c){
// outer functions scope
return function(d){
// local scope
return a + b + c + d + e;
}
}
}
}
console.log(sum(1)(2)(3)(4)); // log 20
// Bạn cũng có thể viết mà không cần các hàm ẩn danh:
// global scope
var e = 10;
function sum(a){
return function sum2(b){
return function sum3(c){
// outer functions scope
return function sum4(d){
// local scope
return a + b + c + d + e;
}
}
}
}
var sum2 = sum(1);
var sum3 = sum2(2);
var sum4 = sum3(3);
var result = sum4(4);
console.log(result) //log 20

Trong ví dụ trên, bạn có thể thấy một loạt các hàm được lồng vào nhau. Tất cả các chức năng này có thể truy cập vào phạm vi của các chức năng bên ngoài. Đối với trường hợp này, chúng ta có thể nói: Closure có quyền truy cập vào tất cả phạm vi của Outer Function.

Cân nhắc về hiệu suất

Trên thực tế, đây không phải là một chức năng của Đóng cửa mà là một lời nhắc nhở. Vì phần này quá ngắn nên thuthuatkiemtien.com xin đưa vào ví dụ thay vì tách riêng vì phần nhắc nhở này có liên quan mật thiết đến ví dụ trên.

Tạo quá nhiều chức năng trong một chức năng khác khi không cần đến Đóng để giải quyết một nhiệm vụ cụ thể. Lý do là vì C Close có thể ảnh hưởng tiêu cực đến hiệu suất của script cũng như tốc độ xử lý và tiêu thụ bộ nhớ!

Vì vậy hãy cân nhắc thật kỹ nhé!

Đến đây, thuthuatkiemtien.com mong rằng bạn đã hiểu Closure là gì cũng như hiểu thêm về C Close trong JavaScript thông qua các ví dụ. Chúc các bạn thành công trên con đường lập trình đầy gian nan và thử thách!

Bài viết có sự tham khảo từ nhiều nguồn: Dev.to, Medium, JavaScript Tutorial, Mozilla Developer, TutorialsTeacher, TopDev, …

Câu hỏi thường gặp về Đóng cửa

Tìm hiểu thêm về C Close ở đâu?

Có khá nhiều tài liệu để bạn tham khảo về Closure nói riêng và JavaScript nói chung như:

Tất nhiên, tài liệu của Nhà phát triển Mozilla sẽ có phần chuẩn hơn những tài liệu khác, nhưng cũng khó hiểu hơn một chút. Bạn sẽ cần phải có tiếng Anh chuyên ngành hoặc ít nhất là tiếng Anh để hiểu bài viết về Nhà phát triển Mozilla.

Ví dụ phổ biến về C Close trong một cuộc phỏng vấn xin việc là gì?

Ví dụ này được lấy từ bài viết của Giang Coffee trên Medium, các bạn có thể tham khảo, thử tìm lỗi và sửa nhé!

for (var i = 0; i <3; i ++) {

setTimeout (function () {

console.log (i);

}, 1000)

}

Cách sửa lỗi trong ví dụ trên là gì?

Cách đầu tiên: sử dụng để cho để giải quyết lỗi.

Cách thứ hai: sử dụng nhiều Closures hơn, ví dụ:

for (var i = 0; i <3; i ++) {

nhật ký hàm (x) {

hàm trả về () {

console.log (x);

}

setTimeout (log (i), 1000)

}

Tất nhiên, trong cuộc phỏng vấn, bất cứ điều gì bạn nhớ, chỉ cần thử nó!

Tại sao tôi có thể trả lời câu hỏi về Closure nhưng vẫn trượt phỏng vấn?

Có vẻ như, bạn đã quay lại bài viết này sau một thời gian phỏng vấn, mặc dù bạn đã trả lời câu hỏi về Closure bằng ví dụ bên phải trên mạng, phải không?

Đừng buồn, có thể do môi trường không phù hợp, bạn không phù hợp hoặc nhà tuyển dụng thấy trình độ tay nghề của bạn vẫn chưa đủ và nhiều lý do khác nữa.

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

Trụ sở chính: L17-11, Lầu 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, P. Bến Nghé, Q.1, TP.
VPĐD: 42 Trần Phú, P.4, Q.5, TP.HCM
Điện thoại: 0364 333 333
Tổng đài miễn phí: 1800 6734
Email: sales@tino.org
Trang web: www.tino.org

Xem thêm nhiều bài viết về : Kiến Thức Cơ Bản

from thuthuatkiemtien.com https://ift.tt/xHD79rq
via thuthuatkiemtien.com

Tìm kiếm Blog này

Thuthuatkiemtien.com