javascript chức năng phạm vi

Question

Ai có thể giải thích tại sao kết quả được [20, 20, 10, 10] trong mã này:

var x = 10; 
var foo = { 
    x: 20, 
    bar: function() { 
    var x = 30; 
    return this.x; 
    } 
}; 

console.log(
    foo.bar(), 
    (foo.bar)(), 
    (foo.bar = foo.bar)(), 
    (foo.bar, foo.bar)() 
); 

Liên kết đến đặc điểm kỹ thuật được hoan nghênh

Answer 1

Không thể chỉ cho bạn đặc điểm kỹ thuật, nhưng tôi rất khuyên bạn nên đọc Douglas Crockford's "Javascript: The good parts". Cuốn sách này sẽ giúp bạn hiểu hầu hết các tính năng kỳ lạ nhưng tuyệt vời của JavaScript.

Tính đến câu hỏi của bạn:

1. foo.bar(), this từ khóa trong bar hàm được ràng buộc để foo đối tượng
2. (foo.bar)() là tương tự như trên,

3. Trong javascript, bạn có thể gán các biến từ phải sang trái nhiều lần

   z = 3; x = (y = z); console.log (x); // 3

chức năng là các biến khác. Vì vậy, bạn đang gán hàm foo.bar đến foo.bar, nhưng dấu ngoặc đơn làm cho hàm được gán được trả về và sau đó được thực hiện.

(foo.bar = foo.bar)(); 
//is the same as 
var f = (foo.bar = foo.bar); 
f(); 
//and this also the same as: 
var f= foo.bar; 
f(); 

Chức năng trở về từ ngoặc không bị ràng buộc bất cứ điều gì, vì vậy this sẽ đề cập đến đối tượng toàn cầu, trong trường hợp trình duyệt - đến đối tượng window.

4 .. Mệnh (foo.bar, foo.bar)() chỉ là như nhau:

a = (3, 4); //last value is returned, first just parsed. 
//a contains 4 

var f = (foo.bar, foo.bar); 
//f contains body of foo.bar function, 
f() // is executed in the context of `global` object, eg. `window`. 

Vui lòng đọc về binding các chức năng trong JavaScript.

Answer 2

Tôi nghĩ rằng sau question sẽ rất hữu ích cho điều này.

Answer 3

Hai cuộc gọi hàm đầu tiên tương đương nhau. Họ đang gọi phương thứccủa trong ngữ cảnh foo - do đó giá trị được trả về bởi this.x là giá trị của foo thuộc tính x, là 20.

Hai cuộc gọi thứ hai là cả hai cú pháp có vấn đề/không hợp lệ. Hãy thử chạy mã của bạn thông qua JSLint và bạn sẽ phát hiện ra một số lỗi và sau đó tắt hoàn toàn. Đoán tốt nhất của tôi là tại sao họ trả lại 10 là nó đang cố gắng phân tích mã của bạn trong trường hợp nó thực sự không nên và đang bối rối. 10 có thể được trả lại bởi vì trình duyệt không thể tìm ra những gì bạn đang cố gắng làm và được mặc định là phạm vi toàn cầu (cửa sổ) có giá trị là x là 10. Điều này cũng sẽ giải thích nhận xét của Ramesh Vel rằng hai giá trị thứ hai xuất hiện là undefined trong IE. Do cú pháp không hợp lệ, các triển khai JavaScript khác nhau có khả năng xử lý chúng khác nhau.