thisについて/JavaScript

JavaScriptの学習ででつまづいた所をアウトプット。
thisってどこを参照してるの？？という事で学習した事をまとめてみます。

参考：Udemy（【JS】ガチで学びたい人のためのJavaScriptメカニズム）

そもそも「this」とは？

呼び出し元のオブジェクトへの参照を保持するキーワードの事。
どういう事かというと…。
下記の記述の場合だと、thisの参照先はpeopleでありnameプロパティを参照している事になる。

const people = {
    name: 'John'
    hello: function() {
        console.log('Hello' + this.name);
    }
}

people.hello();

しかも「this」は実行コンテキスト（コードがどのような状況で実行されているかという事）によって参照先が変わる！！！
ここがややこしかった…。

★実行コンテキストの種類★
・グローバルコンテキスト：JavaScriptファイル内直下の実行環境。グローバルスコープであり、ウィンドウ全体で共有される変数や関数を定義可能に。
・関数コンテキスト：関数の宣言の{ }で囲っている際のコードの実行環境。

グローバルコンテキストを参照する場合

window.name = 'Taro';
const people = {
    name: 'Tom'
    hello: function() {
        console.log('Hello ' + this.name);
    }
}
const ref = person.hello;
ref();

関数として実行する場合。
上記の記述だと、'Hello Taro'と出力される。

関数コンテキストを参照する場合

window.name = 'Taro';
const people = {
    name: 'Tom'
    hello: function() {
        console.log('Hello ' + this.name);
    }
}
person.hello();

オブジェクトのメソッドとして呼び出す場合。
上記の記述だと'Hello Tom'と出力される。