Skip to content
Tags

own/ownWithOrgの使い方

by : 2017/07/10

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 の値の違いについて確認してみてください。

From → hifive

コメントする

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。