非同期処理内でも this を使える this.own を使いこなす

当たり前ですが、JavaScriptでは this（コンテキスト）の扱いがスコープによって異なります。そのため、例えばAjax処理内でthisを使うと想定していたものと異なるレスポンスが返ってくることがあります。

h5.ajax({
  url: '/javascripts/json/own.json'
}).done(function(data) {
  console.info(this);
});
-> Object {url: "/javascripts/json/own.json", type: "GET", isLocal: false, ...

例えばこのような非同期処理を実行した場合、 this は jqXhr オブジェクトになります（hifiveのAjaxメソッドは jQuery.ajaxをラッピングしています）。そのため、thisでコントローラを使いたい場合はこのように書いたりします。

var me = this;
h5.ajax({
  url: '/javascripts/json/own.json'
}).done(function(data) {
  console.info(me);
});
-> Ea {__name: "sample.OwnController", __templates: null, rootElement: div#container, ...

コントローラをmeという変数に入れることで jqXhr オブジェクト内のスコープでも扱えるようにします。しかしあまり格好よくはありませんよね。そこで使ってみたいのが own メソッドになります。

ownメソッドの使い方

使い方は簡単で、this.ownで関数をラップするだけです。上記の例で言えば次のようになります。

h5.ajax({
  url: '/javascripts/json/own.json'
}).done(this.own(function(data) {
  console.info(this);
}));
-> Ea {__name: "sample.OwnController", __templates: null, rootElement: div#container, ...

this.ownで囲むことで、コンテキストが変更できます。スコープによるコンテキストの違いは余計な不具合につながったり、コードの分かりづらさにつながったりするので、ぜひownを使ってみてください。

今回の内容は moongift/hifive-examples の own.html になります。実際にコードを試してみてください。

hifive – HTML5企業Webシステムのための開発プラットフォーム – hifive