bind()とthisは、セットに理解するのがいい。

今回は bind() に関して理解を深めたいと思います。

bind() について。

bind() メソッドは、呼び出された際に this キーワードに指定された値が設定される新しい関数を生成します。

Function.prototype.bind()

なるほど、thisを指定するんだな、新しい関数を作るんだな というのがわかりました。

thisの中身を見ていく

bindはthisには深い関係にありますので、まずは this の中身について見ていきましょう。

const testFunk = {
  name: '太郎',
  onClick() {
    console.log(this) // これな何になる？
    console.log(this.name + ' clicked');
  }
};

testFunk.onClick();

実行すると、このような結果が得られました。

※choromeの開発者ツールで実行しています

thisが参照しているオブジェクトはtestFunkだとわかりました。

[ここがthisの対象].showName();

続いて、showNameを追加し、そちらから実行してみます。

const testFunk = {
  name: '太郎',
  onClick() {
    console.log(this)
    console.log(this.name + ' clicked');
  },
  showName: { // 追加
    name: '二郎',
    onClick() {
        console.log(this)
        console.log(this.content + ' clicked your button')
    }
  }  
};

testFunk.showName.onClick();

thisが参照しているオブジェクトは、showNameだとわかりました。

[testFunk].[ここがthisの対象].showName();

続いて、メソッドを別の変数に格納した場合はどうなるでしょうか.

const testFunk = {
  name: '太郎',
  onClick() {
    console.log(this)
    console.log(this.name + ' clicked');
  }
};

const animal = testFunk.onClick; // animalに格納する
animal(); 

thisが グローバルオブジェクト(window) になってしまいました。
this.nameはグローバルオブジェクトに存在しないので undefined になっています。

window.onClick();

このことから、thisは実行する方法によって変わることがわかりました。
ここまで、thisの理解が少しは深まったかと思います。

bind()

やっとbindのお話です。
bindの説明を思い出してみましょう。

this キーワードに指定された値が設定される新しい関数を生成します。

つまり何をthisとおくか指定することができます。
先ほどグローバルがthisになってしまった例に、bindを用いてthisを操ってみます。

const testFunk = {
  name: '太郎',
  onClick() {
    console.log(this)
    console.log(this.name + ' clicked');
  }
};

const animal = testFunk.onClick.bind(testFunk); // thisはtestFunkにしてくれ
animal(); 

やりました！
thisがグローバルになっていません。testFunkのままにすることができました！

---

続いて、bindにshowNameを入れてみます。

const testFunk = {
  name: '太郎',
  onClick() {
    console.log(this)
    console.log(this.name + ' clicked');
  }
}

const showName = {
  name: '二郎',
};

const hoge = testFunk.onClick.bind(showName);
hoge();

showName を this とすることができました！

---

長くなってきたのでいったんここで切りますね！

次回は bindをアロー関数で使用したらどうなるのか を書いていきます。