[javascript] Underscore.js의 _.bindAll () 함수에 대한 설명이 필요합니다.

Program / 글쓴이

나는 일부 backbone.js를 배우고 있으며 _.bindAll()사용되는 인스턴스를 많이 보았습니다 . 나는 전체 backbone.js와 underscore.js 문서 페이지를 읽고 그것이 무엇을하는지 이해하려고 노력했지만, 그것이 무엇을하는지 여전히 모호하다. 밑줄에 대한 설명은 다음과 같습니다.

_.bindAll(object, [*methodNames])

메서드가 호출 될 때마다 해당 개체의 컨텍스트에서 실행되도록 methodNames로 지정된 개체의 여러 메서드를 바인딩합니다. 이벤트 핸들러로 사용되는 바인딩 함수에 매우 편리합니다. 그렇지 않으면 상당히 쓸모없는 this로 호출됩니다. methodNames가 제공되지 않으면 객체의 모든 함수 속성이 바인딩됩니다.

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

다른 예나 구두 설명을 통해 도움을 줄 수 있다면 무엇이든 감사하겠습니다. 나는 더 많은 튜토리얼이나 예제를 찾으려고했지만 내가 필요한 것을 제공하는 것을 찾지 못했습니다. 대부분의 사람들은 그것이 자동으로 무엇을하는지 아는 것 같습니다 …

답변

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>

스 니펫 확장

불행히도 실제 “모두 바인딩”기능은 개체에서 바로 작동하는 기능에서만 작동합니다. 프로토 타입에 정의 된 함수를 포함하려면 해당 함수 이름을에 추가 인수로 명시 적으로 전달해야합니다 _.bindAll().

어쨌든 설명이 필요했습니다. 기본적으로 객체의 함수를 동일한 이름과 동작을 갖지만 해당 객체에 바인딩 된 함수로 대체 할 수 있으므로 this === theObject메서드 ( theObject.method()) 로 호출하지 않아도 됩니다.

답변

나에 대한 가장 간단한 설명은 다음입니다.

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
}

답변

이 시도

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

답변