Backbone.jsとCoffeeScriptをお使いのみなさん、こんにちは。
イベントのcallbackに登録するメソッドをfat arrowで定義してませんか?
Backbone.Events#onの3番目の引数contextを使いましょう。
メソッドをfat arrowで定義するとmixin出来ない問題についてもちょこっと触れます。
例
- イベント通知のために、グローバルな
PubSubが定義されています。 -
NyaModel#initializeで、NyaModel#sayMessageメソッドをPubSubに登録しています。 -
PubSubから(」・ω・)」うー！イベントを受け取ると、NyaModel#sayMessageが呼ばれます。 -
NyaModel#sayMessageは、NyaModelのmessage属性をコンソールに出力します。
今までの僕のfat arrowなやりかた
PubSubのcallbackに渡すメソッドの中でNyaModelの属性を使いたい。
だがしかしPubSubのcallback関数中ではthisがPubSubになる。
thisをNyaModelに固定するため、メソッドをfat arrow(=>)で定義してた。
nyaru.coffee
window.PubSub = _.clone(Backbone.Events)
class NyaModel extends Backbone.Model
defaults:
message: '(／・ω・)／にゃー！'
initialize: ->
PubSub.on '(」・ω・)」うー！', @sayMessage
# thisがNyaModelにbindされるようfat arrowで定義
sayMessage: =>
console.log @get('message')
PubSub.on '(」・ω・)」うー！', ->
console.log '(」・ω・)」うー！'
new NyaModel
PubSub.trigger '(」・ω・)」うー！'
PubSub.trigger '(」・ω・)」うー！'
new NyaModel message: "Let's＼(・ω・)／にゃー！"
PubSub.trigger '(」・ω・)」うー！'
# (」・ω・)」うー！
# (／・ω・)／にゃー！
# (」・ω・)」うー！
# (／・ω・)／にゃー！
# (」・ω・)」うー！
# (／・ω・)／にゃー！
# Let's＼(・ω・)／にゃー！
contextを使ったfat arrowじゃないやりかた
Backbone.Events#onの第3引数でcontextを与えると、callback関数中のthisがcontextになります。
これでfat arrowを使う理由がなくなった。
nyaru.coffee
window.PubSub = _.clone(Backbone.Events)
class NyaModel extends Backbone.Model
defaults:
message: '(／・ω・)／にゃー！'
initialize: ->
# contextとして@を渡してあげる
PubSub.on '(」・ω・)」うー！', @sayMessage, @
# context渡すとthisがNyaModelになるのでfatじゃなくておｋ
sayMessage: ->
console.log @get('message')
PubSub.on '(」・ω・)」うー！', ->
console.log '(」・ω・)」うー！'
new NyaModel
PubSub.trigger '(」・ω・)」うー！'
PubSub.trigger '(」・ω・)」うー！'
new NyaModel message: "Let's＼(・ω・)／にゃー！"
PubSub.trigger '(」・ω・)」うー！'
# (」・ω・)」うー！
# (／・ω・)／にゃー！
# (」・ω・)」うー！
# (／・ω・)／にゃー！
# (」・ω・)」うー！
# (／・ω・)／にゃー！
# Let's＼(・ω・)／にゃー！
fat arrowのままでもいいじゃないの?
確かに今までの例だとその通りです。
しかしfat arrowのままだとmixinなどでsayMessageを入れ替えたいときに問題が生じます。
fat arrowはmixinできない
fat arrowなmethodをmixinするとき、同じようにfat arrowを使ってこう書くのは間違いです
_.extend NyaModel::
sayMessage: =>
console.log "(」・ω・)」うー！ #{@get('message')}"
これは次のようなJavaScriptに展開されます。
var _this = this;
_.extend(NyaModel.prototype, {
sayMessage: function() {
return console.log("(」・ω・)」うー！ " + (_this.get('message')));
}
});
```
`this`がトップレベル、ブラウザだと`window`オブジェクトにbindされてしまいます。
しかしfat arrowをやめると、`(」・ω・)」うー！`イベントで呼び出された際に、`this`が`PubSub`になってしまうのでエラーが出ます。
``` nyaru.coffee
window.PubSub = _.clone(Backbone.Events)
class NyaModel extends Backbone.Model
defaults:
message: '(／・ω・)／にゃー！'
initialize: ->
PubSub.on '(」・ω・)」うー！', @sayMessage
sayMessage: ->
console.log @get('message')
_.extend NyaModel::
sayMessage: ->
console.log "(」・ω・)」うー！ #{@get('message')}"
new NyaModel
PubSub.trigger '(」・ω・)」うー！'
# thisがPubSubにbindされちゃう＞＜
# => TypeError: Object #<Object> has no method 'get'
```
## contextがあればmixinも怖くない
``` nyaru.coffee
window.PubSub = _.clone(Backbone.Events)
class NyaModel extends Backbone.Model
defaults:
message: '(／・ω・)／にゃー！'
initialize: ->
PubSub.on '(」・ω・)」うー！', @sayMessage, @
sayMessage: ->
console.log @get('message')
_.extend NyaModel::
# contextのおかげでthisがmodelになってる
sayMessage: ->
console.log "(」・ω・)」うー！ #{@get('message')}"
new NyaModel
PubSub.trigger '(」・ω・)」うー！'
PubSub.trigger '(」・ω・)」うー！'
new NyaModel message: "Let's＼(・ω・)／にゃー！"
PubSub.trigger '(」・ω・)」うー！'
# (」・ω・)」うー！ (／・ω・)／にゃー！
# (」・ω・)」うー！ (／・ω・)／にゃー！
# (」・ω・)」うー！ (／・ω・)／にゃー！
# (」・ω・)」うー！ Let's＼(・ω・)／にゃー！
```
## まとめ
- `Backbone.events#on`の3番目の引数`context`を渡すと、callback関数中の`this`が`context`にbindされる。
- イベントのcallbackに渡すメソッド中の`this`を固定するためにfat arrow(`=>`)を使う必要はありません。`context`を使いましょう。
- メソッドをfat arrowで定義すると、mixinできません。
- 正確にはできるけど`this`をbindしなおす必要があって面倒です。