21 lượt xem

Closure là gì? Tìm hiểu về Closure trong JavaScript | Acb-win.com

Có thể bạn chưa biết, 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, Tino Group sẽ giải đáp những thắc mắc này và giúp bạn hiểu thêm về C Close trong JavaScript thông qua một số ví dụ!

Tìm hiểu thêm về Đóng

Đóng cửa là gì?

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

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
  • Biến được khai báo trong hàm cha có chứa Closure (hàm bên ngoài).
  • Các biến toàn cục
đóng cửa

Làm thế nào là chức năng Đóng?

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

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

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

Trong đó chúng tôi có:

  • Biến toàn cục: tên đầu tiên
  • Chức năng chức năng bên ngoài(hàm cha)
  • Chức năng chức năng nội bộtrong hàm innerFunc không có biến toàn cục nhưng trong hàm nó đang sử dụng một tên đầu tiên of function Chức năng bên ngoài.

Bằng cách sửa đổi mã một chút, chúng ta sẽ có một Đóng 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à đề cập đến kết quả của hàm ngoàiFuc (); refInnerFunc trỏ đến hàm chức năng nội bộ nhưng chưa được thực hiện.

Đóng cửa là gì?  Tìm hiểu thêm về các bao đóng trong JavaScript 2

QUẢNG CÁO

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

Khi hàm chức năng nội bộ () cuộc hành quyết sẽ liên quan đến Mai Trúc Lâm. Nhưng kết quả này là từ hàm cha ngoàiFuc (). Nhưng điều đó 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ẹ được thực thi trước, một môi trường sẽ được tạo Lexical chèn tất cả các biến hiện có và gán chúng 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 externalFuc () “Nếu chết đi để lại “di chúc” cho con. refInnerFunc () là một biến tên đầu tiên, sau chức năng hàm bên trong () “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 () nó là một bao đó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 đầu tiê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 () cung cấp có thể được sử dụng.

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

Ứng dụng thực tế của Đóng cửa 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 makeExpontiation Là một nhà máy sản xuất hàm khi có thể tạo các hàm theo các tham số truyền vào. 2 lần đóng cửa: sqm sqm họ có cùng một cơ thể nhưng khác nhau biến tương đương (ENV – Biến tương đương).

đóng cửa

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

Trong JavaScript, không có khái niệm thực sự về một lớp 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 / hack mà Closure sử dụng. 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 lên, giảm bớt giá trị Cả hai đều là những Closures với những cơ thể khác nhau nhưng họ có chung một Biến tương đương.

Tương đương biến chia sẻ là “bí mật” của mô phỏng 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.

Kết thúc phạm vi tiếp cận

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

  • Phạm vi địa phương: phạm vi riêng
  • Phạm vi của chức năng bên ngoài: phạm vi bên ngoài (phạm vi của chức năng mẹ)
  • Phạm vi toàn cầu

Khi lập trình, một trong những sai lầm phổ biến nhất là không nhận ra rằng hàm bên ngoài là một hàm lồng nhau, dẫn đến: phạm vi của hàm bên ngoài là phạm vi của hàm bên ngoài. Điều này dẫn đến một chuỗi phạm vi chức năng rất hiệu quả.

Để chứng minh điều đó, hãy cùng Tino Group 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 rất nhiều 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. Trong trường hợp này, chúng ta có thể nói: bao đóng có quyền truy cập vào tất cả các vùng của chức năng bên ngoài.

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

Đây thực ra không phải là chức năng Đóng mà là một chức năng nhắc nhở. Vì phần này quá ngắn nên Tino Group muốn đưa nó vào ví dụ hơn là tách nó ra vì phần ghi nhớ này có liên quan chặt chẽ đế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 Close để giải quyết một tác vụ cụ thể. Lý do là việc đóng có thể ảnh hưởng xấu đến hiệu suất tập lệnh, tốc độ xử lý và mức tiêu thụ bộ nhớ!

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

đóng cửa

Đến đây, Tino Group hy vọng bạn đã hiểu bao đóng là gì và hiểu thêm về bao đóng trong JavaScript thông qua các ví dụ. Chúc các bạn thành công trong chặng đườ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ôi có thể tìm hiểu thêm về Đóng cửa ở đâu?

Có một số 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ẽ chuẩn hơn một chút so với 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 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ề kết thúc trong một cuộc phỏng vấn việc làm là gì?

Ví dụ này là từ bài viết của Giang Coffee trên Medium, bạn có thể tham khảo, thử tìm lỗi và khắc phục 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 phép để giải quyết lỗi.

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

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

thanh ghi 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ớ, hãy thử nó!

Tại sao tôi có thể trả lời câu hỏi đóng cửa nhưng vẫn không thể vượt qua cuộc phỏng vấn?

Có vẻ như bạn đã quay lại bài viết này sau một chút phỏng vấn, mặc dù bạn đã trả lời câu hỏi bỏ việc với ví dụ phù hợp 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 cảm 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 TNHH 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

READ  “Bật mí” 7 cách quản lý nhân viên cứng đầu hiệu quả | Acb-win.com