Reactでバインドはなぜ必要なのか？

Question

https://ja.reactjs.org/docs/faq-functions.html の記事に下記記述があります。

そもそもバインドはなぜ必要なのか？
JavaScript において、以下の 2 つのコードは同等 ではありません。

(1) obj.method();
(2) var method = obj.method;
method();
メソッドはバインドすることで、2 つ目のコードが 1 つ目と同様に動作するようになります。

その記事を読んだ感じだと2つのコードが同等ではない理由がわかりませんでした。
この違いはreact特有なのでしょうか？解説をお願いします。

Answer 1

この違いはreact特有なのでしょうか？

いえ、JavaScript全般に共通するものです。JavaScriptの関数・メソッド内ではthisという値が使えますが、このthisは、bindやArrow Functionを除けば呼び出し方によって変化しえます（MDN）。

• obj.method();の場合→thisはobj
• いったんmethodに代入した場合→thisはグローバルオブジェクトもしくはundefined

通常、メソッドを呼び出す際には正しいthisが必要ですので、事前にバインドする、もしくはArrow Functionで定義することとなります。

Answer 2

this（メソッドのレシーバー）が何を示すかが変わります。

const obj = {
    "aaa": 123,
    "method": function(){ console.log(this); }
}

obj.method();

console.log("-----------------------------");

const method = obj.method;
method();