own/ownWithOrgの使い方

JavaScriptは非同期で処理を行う言語です。そして、オブジェクト自身を意味する this が頻繁に使われます。しかし、非同期処理の後はthisが思ったものではなくなっていたりして、困った経験があるのではないでしょうか。

例えば次のような処理です。

これは普通ですが、非同期処理に変更します。

この時の this は Windowオブジェクトになるので、nameはありません。このようにスコープが変わってしまうと this の値も変化します。

その解決策として、次のように実行してみます。

setTimeoutを使っているのは変わりませんが、関数をそのまま渡すのではなく、 .call(this) を追加します。そうすると、this.nameはhifiveという値が取れるようになります。callの引数に渡す値が、その関数内でのthisとして使えるようになります。

via Function.prototype.call() – JavaScript | MDN

このようにして、thisのスコープを変えることでプログラミングしやすくなります。

own/ownWithOrgの使い方

hifiveではcall(this)ではなく、ownメソッドを提供しています。例えばコントローラの中で、次のように使います。

さらにhifiveのコントローラだけでなく、本来のthisを使いたい場合にはownWithOrgがあります。

このようにして this による混乱を抑えられるようになります。

サンプルコードをJSFiddleにアップロードしています。各処理における this の値の違いについて確認してみてください。