Thao tác khó hiểu của từ khóa `var` của JavaScript

Question

Tôi đã gặp sự cố rất lạ (đối với tôi) với từ khóa var. Tôi đã giảm nó thành một trường hợp thử nghiệm khá nhỏ và thấy nó được trưng bày trong Node.js (như vậy, V8 và Chrome), trình kiểm tra của Safari 4 (như vậy, Nitro) và FireBug (rõ ràng là SpiderMonkey). Ban đầu tôi đã chuẩn bị một báo cáo lỗi, nhưng vì nó được hiển thị rộng rãi, tôi sẽ giả định rằng tôi hoàn toàn hiểu sai cách JavaScript được cho là phạm vi và tra cứu các biến.

Trường hợp kiểm tra rất nhỏ và trên GitHub tại đây: http://gist.github.com/260067. Sự khác biệt duy nhất giữa ví dụ đầu tiên và thứ hai là việc bao gồm từ khóa var.

Ở đây, là tốt, là một trường hợp thử nghiệm tương tự mà thể hiện cùng một 'vấn đề' theo một cách khác: https://gist.github.com/698b977ee0de2f0ee54a

Edit: Để ngăn cản nhiều hơn bất kỳ câu trả lời cố gắng giải thích cách tầng phạm vi hoạt động, tôi m thân mật quen thuộc với điều đó. Vấn đề của tôi, là tôi không hiểu tại sao đoạn mã sau 'làm việc' (ở chỗ nó alert() s 'bên ngoài,' theo sau 'bên trong,' và sau đó một lần nữa 'bên ngoài'):

(function(){ 
    var foo = 'outer'; 
    alert("Outer `foo`: " + foo); 

    (function(){ 
    foo = 'inner'; 
    alert("Inner `foo`: " + foo); 

    var foo; 
    })(); 

    alert("Outer `foo`: " + foo); 
})(); 

Các var foo; xảy ra ở một vị trí hoàn toàn không liên quan đến việc phân bổ lại foo; vậy tại sao nó ảnh hưởng đến nhiệm vụ đó một cách rất quan trọng?

Answer 1

Điều này không giống như các ngôn ngữ khác, JavaScript tạo tất cả các biến khi bắt đầu một hàm. Điều này có nghĩa rằng mã:

(function(){ 
    if(myVar == undefined){ 
     alert(myVar); 
    } 
    if(myVar == undefined){ 
     var myVar = 5; 
    } 
})(); 

là thực sự biên soạn và hiểu là

(function(){ 
    var myVar; 
    if(myVar == undefined){ 
     alert(myVar); 
    } 
    if(myVar == undefined){ 
     myVar = 5; 
    } 
})(); 

Để tạo một biến và chỉ có nó có sẵn bên trong một nếu hoặc chặn vòng lặp, bạn phải sử dụng let, đó là một tính năng JavaScript mới. Tôi không chắc chắn có bao nhiêu trình duyệt thực hiện nó (Firefox 3.5 hiện nếu bạn sử dụng <script type="text/javascript;version=1.7">).

(function(){ 
    if(myVar == undefined){ 
     alert(myVar); 
    } 
    if(myVar == undefined){ 
     let myVar = 5; 
    } 
})(); 

Answer 2

việc bao gồm var có nghĩa là việc gán {} được thực hiện cho biến cục bộ xuất thay vì biến toàn cục xuất, có nghĩa là nó không có hiệu lực.

Answer 3

var exports không hoạt động chính xác như biến cục bộ ở nhiều ngôn ngữ. Nó tuyên bố exports là biến cục bộ trong toàn bộ hàm thay vì chỉ khối bao quanh (mặc dù nó xuất hiện sau lần sử dụng đầu tiên), do đó, đối số hàm có cùng tên bị ẩn.

Chỉnh sửa: từ khóa let hoạt động bình thường hơn (nó chỉ khai báo biến cho khối chứa) nhưng không có sẵn trong tất cả các phiên bản của JavaScript.