コンテンツへスキップ
Tags

own/ownWithOrgの使い方

by : 2017/07/10

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

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

var Hello = {
name: "hifive",
message: function() {
return "Hello, " + this.name;
}
}
Hello.message(); // "Hello, hifive"
view raw index.js hosted with ❤ by GitHub

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

var Hello = {
name: "hifive",
message: function() {
setTimeout(function() {
return "Hello, " + this.name;
}, 1000);
}
}
Hello.message();
view raw index.js hosted with ❤ by GitHub

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

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

var Hello = {
name: "hifive",
message: function() {
setTimeout(function() {
alert("Hello, " + this.name);
}.call(this), 1000);
}
}
console.log(Hello.message());
view raw index.js hosted with ❤ by GitHub

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

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

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

own/ownWithOrgの使い方

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

$.ajax({
:
})
.then(this.own(function(response) {
this // hifiveのコントローラ
}));
view raw index.js hosted with ❤ by GitHub

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

$.ajax({
:
})
.then(this.ownWithOrg(function(original, response) {
this // hifiveのコントローラ
original // 元々のthis
}));
view raw index.js hosted with ❤ by GitHub

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

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

From → hifive

コメントは受け付けていません。

«
»