Giá trị của 'điều này' trong Javascript

Question

Ai đó có thể vui lòng giải thích tại sao 'this' trong các điểm sau đây đối với DOM Object chứ không phải để Window?

$("a").click(function() { 
    console.log(this); 
}); 

Điều này mang đến:

<a id="first" href="http://jquery.com"> 

Hãy xem xét những điều sau đây mà nên cùng một kịch bản:

function Foo() { 
    this.click = function(f) { 
     f(); 
    } 
} 

var obj = new Foo(); 
obj.click(function() { 
    console.log(this); 
}); 

Những gì chúng ta có được ở đây các đối tượng Window (những gì tôi đã dự kiến) là.

Answer 1

Tùy thuộc vào ngữ cảnh mà hàm được thực thi. jQuery thay đổi rõ ràng ngữ cảnh của hàm gọi lại, trong khi hàm của bạn thực thi hàm trong ngữ cảnh chung.

để thay đổi bối cảnh:

function Foo() { 
    this.click = function(f) { 
     f.apply(this); 
    } 
} 

hoặc

function Foo() { 
    this.click = function(f) { 
     this.f = f 
     this.f(); 
    } 
} 

Để đọc thêm:

http://dailyjs.com/2012/06/18/js101-this/

http://dailyjs.com/2012/06/25/this-binding/

Answer 2

this sẽ được quyết định theo ngữ cảnh.

Nếu bạn thay đổi mã của mình thành bên dưới, thì this sẽ trỏ đến some_other_object.

function Foo() { 
    this.click = function(f) { 
     f.call(some_other_object); 
    } 
} 

Answer 3

Trong Javascript, OOP khác với những gì bạn đã quen với các ngôn ngữ như Java.

Về cơ bản, dễ nghĩ rằng không có OOP và rằng this chỉ là một "đối số ẩn" của các hàm.

Ví dụ, khi bạn nhìn thấy

function f(x, y, z) { 
    console.log(this, x, y, z); 
} 

nghĩ rằng trong ngôn ngữ OOP chung (chẳng hạn như Java) đó sẽ là

function f(this, x, y, z) { 
    console.log(this, x, y, z); 
} 

Khi bạn nhìn thấy var a = b.f(x, y, z);, suy nghĩ var a = f(b, x, y, z).

Khi bạn nhìn thấy var a = f(x, y, z); nghĩ var a = f(undefined, x, y, z); (Trong môi trường trình duyệt, khi strict mode không được kích hoạt, nó là f(window, x, y, z);)

Bây giờ nó phải được dễ dàng hơn để hiểu tại sao this trong ví dụ của bạn có nghĩa là những thứ khác nhau trong phạm vi lồng nhau.

Answer 4

jQuery sử dụng chức năng javascript apply khi gọi trình xử lý sự kiện. Từ tài liệu mdn:

Gọi hàm có giá trị này và đối số được cung cấp dưới dạng mảng.