JavaScript（this編）

thisは呼び出され方で参照先が違う

JavaScriptの基本的な文法の復習をしている際に、thisの挙動に関して「？？？」となってしまったため、自分自身が見返せるようにまた、同じようなところで詰まっている人にも共有できるようにまとめます。

一般的

const infoObj = {
  name: "foo",
  
  sayName() {
    console.log(`My name is ${this.name}.`);
  },
};

infoObj.sayName();　// -> My name is foo.

こちらはわかりやすいのではないでしょうか。
いわゆるこのthisはinfoObjを指しており、

 console.log(`My name is ${this.sayName}.`);
 console.log(`My name is ${infoObj.sayName}.`);

これと同じ意味ですね。
ここからわかることは、
thisは呼び出し元のオブジェクトを参照する（今回の例だったらinfoObj）
ということです。

すなわち、当たり前に感じるかもしれないですが、infoObjオブジェクトがない場合、

this.sayName()

というのは使えないわけです。
じゃあこの時のthisは何を参照するの？というと,グローバルオブジェクトなるものを参照します。

コピーされた時

const infoObj = {
  name: "foo",
  
  sayName() {
    console.log(`My name is ${this.name}.`);
  },
};

const copyObj = infoObj.sayName;
copyObj();// -> My name is undefined.

結果を見て貰えばわかる通り、undefinedになっています。
これは、

const copyObj = infoObj.sayName;

この時点でthisの参照先がinfoObjからcopyObjに変更されてしまったからというわけですね。
nameプロパティというのはinfoObj内にあるので、この値を参照するためには、infoObjが呼び出し元である必要があるということになります。
この場合、copyObjは呼び出し元のオブジェクトになるため、thisはグローバルオブジェクトを参照します。