jQuery/JavaScript "này" con trỏ nhầm lẫn

Question

Hành vi của "này" khi chức năng bar được gọi là gây bối rối cho tôi. Xem mã bên dưới. Có cách nào để sắp xếp cho "này" là một trường hợp đối tượng js cũ đồng bằng khi thanh được gọi từ một trình xử lý nhấp chuột, thay vì là phần tử html?

// a class with a method 

function foo() { 

    this.bar(); // when called here, "this" is the foo instance 

    var barf = this.bar; 
    barf(); // when called here, "this" is the global object 

    // when called from a click, "this" is the html element 
    $("#thing").after($("<div>click me</div>").click(barf)); 
} 

foo.prototype.bar = function() { 
    alert(this); 
} 

Answer 1

Chào mừng bạn đến với thế giới của javascript! : D

Bạn đã đi lang thang vào lĩnh vực phạm vi javascript và đóng.

Đối với câu trả lời ngắn:

this.bar() 

được thực hiện thuộc phạm vi foo, (như này đề cập đến foo)

var barf = this.bar; 
barf(); 

được thực hiện dưới sự phạm vi toàn cầu.

this.bar về cơ bản có nghĩa là:

thực hiện chức năng chỉ bằng this.bar, thuộc phạm vi này (foo). Khi bạn sao chép này.bar để barf, và chạy barf. Javascript được hiểu là, chạy hàm được chỉ định bởi barf và vì không có này, nó chỉ chạy trong phạm vi toàn cầu.

Để khắc phục điều này, bạn có thể thay đổi

barf(); 

một cái gì đó như thế này:

barf.apply(this); 

này cho Javascript để ràng buộc phạm vi này để barf trước khi thực hiện nó.

Đối với sự kiện jquery, bạn sẽ cần phải sử dụng chức năng ẩn danh hoặc mở rộng hàm kết buộc trong mẫu thử nghiệm để hỗ trợ phạm vi.

Để biết thêm thông:

• Good explanation on scoping
• Extending jQuery bind to supportscoping

Answer 2

Điều này là do này luôn luôn là trường hợp mà chức năng được gắn vào. Trong trường hợp của EventHandler, đó là lớp đã kích hoạt sự kiện.

Bạn có thể giúp bạn tự với một chức năng vô danh như thế này:

function foo() { 
    var obj = this; 
    $("#thing").after($("<div>click me</div>").click(function(){obj.bar();})); 
} 

foo.prototype.bar = function() { 
    alert(this); 
} 

Answer 3

Bạn có thể sử dụng Function.apply vào chức năng để thiết lập những gì this nên tham khảo:

$("#thing").after($("<div>click me</div>").click(function() { 
    barf.apply(document); // now this refers to the document 
}); 

Answer 4

Có một lời giải thích tốt về this từ khóa trong JavaScript có sẵn tại QuirksMode.

Answer 5

Bạn có thể tìm thấy điều này:

Controlling the value of 'this' in a jQuery event

hay này:

http://www.learningjquery.com/2007/08/what-is-this

hữu ích.

Answer 6

Tải sách: JavaScript: Bộ phận tốt.

Ngoài ra, đọc càng nhiều càng tốt bởi Douglas Crockford http://www.crockford.com/javascript/

Answer 7

this.bar(); // when called here, "this" is the foo instance 

nhận xét này là sai khi foo được sử dụng như một chức năng bình thường, không phải là một nhà xây dựng. tại đây:

foo();//this stands for window