おまじないとして使ってしまいがちなbind(this)をちゃんと理解するために、
O'REILLY「初めてのJavaScript 第3版 ES2015(ES6)対応」を読み返してみたので、
自分用のメモとして記事に残してみる。
自分用と言わず、同じような疑問を持っている人の助けになったら嬉しいです。
最近Reactを扱うことがあって、なんでそんなに関数をbindしまくるんだっけ?と
思ったのが今回本を読み返したモチベーション。
ネット上で解説している記事の多くは、サンプルコードを理解するのに一苦労でわかりにくい。
以下のコードが超シンプルかつわかりやすいので紹介する。
下記のようなオンラインコンソールでコードを動かしてみると理解が深まるかと。
https://stephengrider.github.io/JSPlaygrounds/
コードの引用元：上記のO'REILLY
うまくいかないコード
オブジェクトobj.nameに定義した文字列を反転させるサンプルコード。
動かしてみると、getReverseName()内のthisが怒られてしまうことがわかる。
原因は、最終行でobj.greetBackwards()を呼び出すときは thisはobjと紐付けられている一方で、greetBackwardsの内側からgetReverseNameを呼び出すときはthisが別物となってしまうことにある。
const obj = {
name : 'hello world',
greetBackwards : function() {
function getReverseName() {
let nameBackwards = '';
for(let i = this.name.length - 1; i >= 0; i--) { //ココのthisが怒られる
nameBackwards += this.name[i]; //ココのthisも怒られる
}
return nameBackwards;
}
return getReverseName();
}
}
console.log(obj.greetBackwards()); //表示されない
絵に書くとこんな感じ。
うまくいくコード1（self = thisを使用）
これを解消する手段として、thisを別の変数に代入してあげる方法が挙げられる。
selfやthatを使うのがポピュラーとのこと。
const obj = {
name : 'hello world',
greetBackwards : function() {
const self = this; //thisを別の変数に置き換える
function getReverseName() {
let nameBackwards = '';
for(let i = self.name.length - 1; i >= 0; i--) { //self.nameとする
nameBackwards += self.name[i]; //self.nameとする
}
return nameBackwards;
}
return getReverseName();
}
}
console.log(obj.greetBackwards()); //dlrow olleh
うまくいくコード2（bindを使用）
別の手段として、greetBackwardsの中でgetReverseNameを呼び出す際に
.bind(this)を付与して、getReverseNameのthis を objのthis
として呼び出すように指示する。
const obj = {
name : 'hello world',
greetBackwards : function() {
function getReverseName() {
let nameBackwards = '';
for(let i = this.name.length - 1; i >= 0; i--) {
nameBackwards += this.name[i];
}
return nameBackwards;
}
return getReverseName.bind(this)(); //ココにbind追加
}
}
console.log(obj.greetBackwards());
どっちが良いか
個人的にはself = thisの方が読みやすいので好き。
どちらが一般的によく使われるのか調べていたら、
こちらの記事で考察してるのを見付けた。とっても分かりやすい。
https://www.deep-rain.com/programming/javascript/807