2012-08-24 2 views
2

Backbone.js의 Todo.js 튜토리얼에서 "this"가 무엇을 의미하는지 이해하는 데 어려움을 겪고 있습니다. 특정에서는 앱 조회 내부 :Todo.js에서 언급 한 키워드는 무엇입니까? (백본 튜토리얼)

initialize: function() { 
this.input = this.$("#new-todo"); 
this.allCheckbox = this.$("#toggle-all")[0]; 

Todos.bind('add', this.addOne, this); 
Todos.bind('reset', this.addAll, this); 
Todos.bind('all', this.render, this); 

this.footer = this.$('footer'); 
this.main = $('#main'); 
}, 

그래서 Todos.bind가 ('추가', this.addOne이)가 컬렉션에보기 (this.addOne)를 결합한다 ('추가'라고). 그렇다면 세 번째 매개 변수 ("this")도 AppView 개체를 참조한다고 가정합니다. 왜 "this"를 세 번째 매개 변수로 사용해야합니까?

주석 소스 코드 : http://backbonejs.org/docs/todos.html

답변

3

this 번째 인수는 두 번째 인자의 함수가 호출 될 때 설정하는 this 컨텍스트가있다.

소리가 너무 혼란 스럽습니다. 그래서 시도해 보도록하겠습니다.

Todos.bind('add', function() { this.$el.text("Hello, world!"); }); 

은 ... 우리 모두의 세 번째 인수를 필요로하지 않을 ...
Todos.bind('add', this.addOne, this); 

우리가이 대신 사용했다 ...의이 라인을 살펴 보자. 이 경우 함수는 즉시 호출되고 this이 보존됩니다. 우리는 모든 함수를 인라인 싶지 않기 때문에

그러나, 우리는

Todos.bind('add', this.addOne, this); 

이것은 당신의 예에서와 동일합니다 ...과 같이 함수에 대한 참조를 전달합니다. this.addOne()과 같은 함수를 호출하면 this은 호출 된 this으로 설정됩니다.

그러나 참조를 전달하면 (즉시 호출하지 않음) 해당 this 컨텍스트가 손실되고 호출 될 때 window이됩니다. 이는 원하는 내용이 아닙니다.

이 문제를 방지하려면 세 번째 인수는 함수 호출시 사용할 this 컨텍스트입니다.

내부적으로 백본에서는 _.bind()을 사용하여 바인딩합니다. 이것은 함수에 대한 네이티브 bind() 메서드의 polyfill입니다.

+0

해명 해 주셔서 감사합니다. 매우 감사. 한 가지 더 궁금한 점이 있습니다. 소스 코드에서 AppView의 addOne 함수에 대해 매개 변수 "todo"가 참조하는 것은 무엇입니까? – Sean

+1

@SeanDokko 인스턴스화 된'TodoList' 컬렉션에 대한 참조입니다. – alex

+0

TodoList는 모델이 아니라 컬렉션이 아니기 때문에 충돌이 없습니까? 모델 : 새로운 모델보다는 모델 : 할일? – Sean

관련 문제