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

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

_.bindAll(object, [*methodNames]) 

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

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ẽ hoặc một số giải thích bằng lời nói, bất cứ điều gì sẽ được đánh giá cao. Tôi đã cố gắng tìm kiếm thêm các hướng dẫn hoặc ví dụ, nhưng không có gì 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ó tự động làm ...

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, chức năng "ràng buộc tất cả" thực tế chỉ hoạt động trên các chức năng ngay trên đối tượng. Để bao gồm một hàm được xác định trên nguyên mẫu, bạn cần phải chuyển các tên hàm đó một cách rõ ràng làm đối số bổ sung cho _.bindAll().

Dù sao, bạn cũng muốn có một lời 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 bằng một hàm 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 === theObjectngay cả khi không gọi nó như một phương thức ( theObject.method()).

Lời giải thích đơn giản nhất đối với tôi là:

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
}

thử đi

<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>