cần giải thích về hàm _.bindAll() từ Underscore.js

Question

Tôi đã học một số backbone.js và tôi đã thấy nhiều trường hợp trong đó _.bindAll() được sử dụng. Tôi đã đọc qua toàn bộ trang backbone.js và trang tài liệu underscore.js để cố hiểu ý nghĩa của nó, nhưng tôi vẫn rất mờ nhạt về những gì nó làm. Đây là dấu gạch dưới của giải thích:

_.bindAll(object, [*methodNames]) 

liên kết với một số phương pháp trên đối tượng , theo quy định của methodNames, để được chạy trong bối cảnh mà đối tượng bất cứ khi nào họ đang gọi. Rất tiện dụng cho các chức năng liên kết đang sử dụng để được sử dụng làm trình xử lý sự kiện, trong đó nếu không sẽ được gọi với một khá vô ích này. Nếu không có methodNames được cung cấp, tất cả các thuộc tính của đối tượng của đối tượng sẽ bị ràng buộc là .

var buttonView = { 
    label : 'underscore', 
    onClick : function(){ alert('clicked: ' + this.label); }, 
    onHover : function(){ console.log('hovering: ' + this.label); } 
}; 

_.bindAll(buttonView); 

jQuery('#underscore_button').bind('click', buttonView.onClick); 
=> When the button is clicked, this.label will have the correct value... 

Nếu bạn có thể giúp đỡ ở đây bằng cách đưa ra một ví dụ khác có lẽ hay một số giải thích bằng lời nói, bất cứ điều gì sẽ được đánh giá. Tôi đã cố gắng để tìm kiếm thêm hướng dẫn hoặc ví dụ, nhưng nil bật lên phục vụ những gì tôi cần. Hầu hết mọi người dường như chỉ biết những gì nó làm tự động ...

Answer 1

var Cow = function(name) { 
 
    this.name = name; 
 
} 
 
Cow.prototype.moo = function() { 
 
    document.getElementById('output').innerHTML += this.name + ' moos' + '<br>'; 
 
} 
 

 
var cow1 = new Cow('alice'); 
 
var cow2 = new Cow('bob'); 
 

 
cow1.moo(); // alice moos 
 
cow2.moo(); // bob moos 
 

 
var func = cow1.moo; 
 
func(); // not what you expect since the function is called with this===window 
 
_.bindAll(cow1, 'moo'); 
 
func = cow1.moo; 
 
func(); // alice moos

<div id="output" /> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

Thật không may là "ràng buộc tất cả" chức năng thực tế chỉ hoạt động trên các chức năng chuột phải vào đối tượng. Để bao gồm một hàm được xác định trên nguyên mẫu, bạn cần chuyển các tên hàm đó một cách rõ ràng như các đối số bổ sung cho _.bindAll().

Dù sao, bạn muốn giải thích: Về cơ bản nó cho phép bạn thay thế một hàm trên một đối tượng có cùng tên và hành vi, nhưng cũng bị ràng buộc với đối tượng đó, vì vậy this === theObject thậm chí không gọi nó là phương thức (theObject.method()).

Answer 2

thử

<input type="button" value="submit" id="underscore_button"/> 

<script> 
var buttonView = { 
    id  : 'underscore', 
    onClick: function() {console.log('clicked: ' + this.id)}, 
    onHover: function() {console.log('hovering: ' + this.id)} 
} 
_.bindAll(buttonView, 'onClick') 
$('#underscore_button').click(buttonView.onClick) 
$('#underscore_button').hover(buttonView.onHover) 
</script> 

Answer 3

Lời giải thích đơn giản nhất này như đối với tôi là sự tiếp theo:

initialize:function() { //backbone initialize function 
    this.model.on("change",this.render); //doesn't work because of the wrong context - in such a way we are searching for a render method in the window object 
    this.model.on("change",this.render,this); //works fine 
    //or 
    _.bindAll(this,'render'); 
    this.model.on("change",this.render); //now works fine 
    //after _.bindAll we can use short callback names in model event bindings 
}