【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