Nhầm lẫn bởi việc đóng cửa trong JavaScript

Question

thể trùng lặp:
How do JavaScript closures work?
Javascript closures and side effects in plain English? (separately)

Tôi mới để Javascript nhưng tôi thật sự bối rối bởi cách đóng cửa làm việc. Ai đó có thể giải thích về thuật ngữ của giáo dân họ là gì hay tại sao chúng hữu ích?

Answer 1

Đóng cửa giống như ngữ cảnh của hàm khi được xác định. Bất cứ khi nào hàm được định nghĩa, ngữ cảnh được lưu trữ và thậm chí nếu vòng đời 'bình thường' của hàm của bạn kết thúc, nếu bạn giữ tham chiếu đến phần tử được xác định trong thực thi hàm, nó vẫn có thể truy cập vào các phần tử của ngữ cảnh (đóng cửa), đó thực sự là phạm vi chức năng của bạn trong định nghĩa của nó. Xin lỗi vì tiếng xấu của tôi, nhưng có lẽ ví dụ này sẽ làm cho bạn hiểu:

function test() { 
    var a = "hello world"; 
    var checkValue = function() { alert(a); }; 
    checkValue(); 
    a = "hi again"; 
    return checkValue; 
} 

var pointerToCheckValue = test(); //it will print "hello world" and a closure will be created with the context where the checkValue function was defined. 
pointerToCheckValue(); //it will execute the function checkValue with the context (closure) used when it was defined, so it still has access to the "a" variable 

Hy vọng nó giúp :-)

Answer 2

Tôi thực sự khuyên bạn nên sử dụng article sau đây. Tôi tìm thấy nó là một điểm khởi đầu tuyệt vời cho sự hiểu biết về đóng cửa.

Answer 3

Nếu bạn bắt đầu với việc sử dụng đơn giản, mà tôi nhận được từ http://ejohn.org/apps/learn/#49

var num = 10; 

function addNum(myNum){ 
    return num + myNum; 
} 

assert(addNum(5) == 15, "Add two numbers together, one from a closure."); 

gì đang xảy ra là biến num bị mắc kẹt (kèm theo) trong addNum chức năng.

đâu này trở nên tiện dụng là nếu bạn có một cái gì đó (điều này dự kiến ​​sẽ không chạy đúng) như thế này:

for(var t = 0; t < 5; t++) { 
    var elem = document.getElementById('mydiv' + t); 
    elem.onclick = function(e) { 
    alert(t); 
    }; 
}; 

này nên hiển thị các giá trị 5 cho mỗi div mà được thành lập với xử lý sự kiện này.

Nếu bạn kèm theo ví dụ của bộ đếm trong trình xử lý sự kiện của bạn thì nó có thể khác nhau đối với mỗi bộ xử lý, đó là hành vi mong đợi.

Đây là một chủ đề khá nâng cao. Một khi bạn nhận được thoải mái hơn với javascript, bạn có thể muốn xem về việc học nó tại thời điểm đó.