javascript: bản địa hóa các biến trong khối

Question

Tôi cố gắng hiểu phạm vi biến đổi trong Javascript. Dưới đây là những gì tôi đang làm:

<script> 
for (var i = 0; i < 3; i++) { 
    document.getElementById(i).onclick = function() { 
    console.log(i); 
    } 
} 
</script> 

Kết quả luôn là 3 và tôi hiểu rằng đó là vì i đã được giữ lại theo tham chiếu. Làm cách nào để bản địa hóa i để có thể ghi nhật ký giá trị gia tăng?

Cảm ơn!

cập nhật

Thanks guys để được trả lời nhanh chóng và đàng hoàng. các giải pháp thực sự giúp đỡ!

Ban đầu, tôi đã cố gắng một cách tiếp cận tương tự như @GrailsGuy, ở đây nó là:

<script> 
for (var i = 1; i <= 3; i++) { 
    document.getElementById(i).onclick = function() { 
     console.log(logCall(i)); 
    } 
} 
function logCall(i) { 
    return i; 
} 
</script> 

Nhưng có vẻ như i không được địa phương. Không thể hiểu tại sao!

Answer 1

Tạo một phạm vi mới

for (var i = 0; i < 3; i++) { 
    (function(i) { 
    document.getElementById(i).onclick = function() { 
     console.log(i); 
    } 
    }(i)); 
} 

Answer 2

Trong Javascript, phạm vi không được tạo bởi dấu ngoặc vuông (trái với cú pháp giống C). Phạm vi là tuy nhiên, được tạo ra trong các chức năng, vì vậy một cách là để trích xuất các cuộc gọi vào một chức năng (cập nhật):

<script> 
for (var i = 0; i < 3; i++) { 
    logCall(i); 
} 

function logCall(i) { 
    document.getElementById(i).onclick = function() { 
     console.log(i); 
    } 
} 
</script> 

này có thêm lợi ích của việc mã một chút tái sử dụng nhiều hơn nữa.