【React】【Vue】 など流行りのフレームワークを使うもののためのJS基礎 [this, call(), apply(), bind()]

this

thisは、その関数を呼び出しているオブジェクト グローバルスコープで呼び出した場合は、グローバルオブジェクト javaScriptは一番外におおきなグローバルオブジェクトで囲まれているため。

bind()

thisが参照するオブジェクトを指定する

※

const myButton = {
    content: 'OK',
    click() {
      console.log(this)
      console.log(this.content + ' clicked');
    }
  };

myButton.click();

//コンソール
{ content: 'OK', click: [Function: click] }
OK clicked

この場合の this は myButton のオブジェクトを示している

では次の場合はどうなるだろうか

myButton クラスのメソッドを変数 looseClick に代入している

const myButton = {
    content: 'OK',
    click() {
      console.log(this)
      console.log(this.content + ' clicked');
    }
  };

const looseClick = myButton.click;
looseClick();

//コンソール
Object [global]
undefine clicked

この場合の this はグローバルオブジェクトを示している

なぜかというと looseClick には

    click() {
      console.log(this)
      console.log(this.content + ' clicked');
    }

が代入されている

記事の最上部に書いたが、この時の this は myButton のようなクラスに囲まれていない
→ グローバルオブジェクトを示している

これを※と同じ動きにするには bind を使用する

const myButton = {
    content: 'OK',
    click() {
      console.log(this)
      console.log(this.content + ' clicked');
    }
  };

const bindClick = myButton.click.bind(myButton);
bindClick();

//コンソール
Object [global]
undefine clicked

click メソッドの中にある this が myButton オブジェクトを指していることを bind をつかって指定する

追記予定
call
applay