JavaScriptのthisとbindの必要性を学び直す

人のコードを解読するたびにthis、bindについて調べているので、メモ書きです。
アロー関数が登場してから使用するケースは減ったそうですが、、、

thisとは？

JavaScriptで、thisとは「記述場所によって参照先の変わるキーワード」です。。
thisの参照先は、その関数がどのように呼ばれたかによって決まります。
つまりどういうことかを見ていきます。

thisの参照先

thisは「記述場所によって参照先の変わる特別な変数」です。
thisの参照先は、function（関数）をどのオブジェクトのメソッドとして呼び出すかで変わります。

関数の中でthisを定義する場合

const fn = function() {
  console.log(this);
};

fn();
// -> thisの参照先は window （グローバル）にあり、undefinedまたはエラーを返す。

オブジェクトの中のメソッドでthisを定義する場合

const obj = {
  fn: function() {
    console.log(this);
  }
};

obj.fn();
// -> 関数内のthisの参照先は obj （そのオブジェクト自身）

thisの参照元が失われるとき

それでは、オブジェクトの中のthisの参照元が失われるケースを見ていきます。

const person = {
  name: 'John',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const greetJohn = person.greet;
greetJohn();
// 'this'の参照先が不明（グローバルオブジェクトまたは'undefined'）

なぜ、greetJohn()は、undefinedになるのか？、というと

const greetJohn = person.greet;
は
function() {
  console.log('Hello, ' + this.name);
}

の情報しか取得していません。
つまり、

const fn = function() {
  console.log(this);
};

fn();

と一緒の扱いになります。
グローバルはnameプロパティを持っていないため、undefined、またはエラーになります。

これを解決するために役立つのが、bindメソッドです。

bindとは？

bindは、関数のthisを固定するためのメソッドです。

通常、関数のthisはその関数がどこで呼ばれたかによって決まります。しかし、bindを使うと、関数がどこで呼ばれてもthisを特定のオブジェクトに固定することができるのです！！

例：

const person = {
  name: 'John',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

const greetJohn = person.greet.bind(person);

bindを使うことで、関数のthisが特定のオブジェクトに固定することができます。
こうすることで、

person.greet 

で取得した情報の

function() {
  console.log('Hello, ' + this.name);
}

のthisの参照先をpersonオブジェクトに固定しています。
こうすることで、this.nameで'John'を取得することができます。