Javascriptのbindを理解するためにthisを理解する

はじめに

JavaScript(以下JS）初学者の筆者がbindを理解するために学習した内容をまとめます。
本記事はbindを理解するための前準備として、JSのthisの解説をします。
同じくJSを学び始めた方に向けに参考になればと思い投稿します。なお、誤り等ございましたら、ご指摘のほどよろしくお願いします。

JSのthis

MDNでbindについての記事をみると以下のように記載されています。

bind() メソッドは、呼び出された際に this キーワードに指定された値が設定される新しい関数を生成します。この値は新しい関数が呼び出されたとき、一連の引数の前に置かれます。

つまり、bindを理解するためにはまず、thisを理解する必要があります。

MDNでthisについての記事をみると以下のように記載されています。

実行コンテキスト (グローバル、関数、eval) のプロパティで、常にオブジェクトへの参照です

実行コンテキストという、耳慣れない言葉が出てきました。では、実際にthisを出力してみて、どのようなものなのか確認してみます。

検証1

const hoge = {
  fuga: 'piyo'
  testFunc() {
    console.log(this);
  },
};

hoge.testFunc() // 出力 { fuga: 'piyo', testFunc: [Function: testFunc] }

hoge.testFunc() の出力結果から、this は hoge を指していることがわかります。
この結果から、thisは実行された関数(testFunc）が所属するオブジェクト(hoge)を指していることがわかります。
次に以下を試します。

検証2

testFunc = function () {
  console.log(this);
};
testFunc() // 出力 Object [global] { ...略... }

MDNの説明にあった、グローバルが表示されました。なお、以下を実行しても同じ結果が得られます。

検証3

global.testFunc() // 出力 Object [global] { ...略... }

この結果から、検証１と同様、thisは実行された関数(testFunc）が所属するオブジェクト(global)を指していることがわかります。
なお、グローバルとはjsが用意した特別なオブジェクトのことです。

まとめ

this とは 関数が所属するオブジェクトのことを指す。