JavaScriptには、オブジェクトへの参照を格納するthisという特殊なキーワードがある。

実行コンテキストとはコードが実行される際に、JavaScriptエンジンによって準備されるコードの実行環境のことです。
JavaScriptのコードが実行される前に必ず実行コンテキストが生成され、どのような状態でコードが実行されているのかという情報が実行コンテキスト毎に保持される
実行コンテキストが生成されるタイミングは主に2種類ある。

1. HTMLのscriptタグの直下やJavaScriptファイルの直下に記述されたコードが実行される直前 ⇒ グローバルコンテキストと呼ばれる
2. 関数が実行される直前 ⇒ 関数コンテキストと呼ばれる

グローバルコンテキストは、トップレベルでコードを実行する前に生成される実行コンテキストです。
HTMLのscriptタグの直下やJavaScriptファイルの直下に記述されたコードが実行される前に、まずグローバルコンテキストが生成される。
グローバルコンテキストでは、同コンテキスト内で宣言した変数や関数以外にもWindowオブジェクト(window)とthisが使用可能になる。
◆Windowオブジェクト
Windowオブジェクト(window)は、これまで使ってきたNumberやString、consoleやsetTimeoutなど、ブラウザがあらかじめ用意されているオブジェクトと
関数(Web API)をプロパティに持つ特殊なオブジェクト(グローバルオブジェクト)です。
Windowオブジェクトは、コードのどこからも参照でき、また、window.の部分を省略して記述することが可能。
◆this
thisキーワードは実行コンテキストによって参照先の値が切り替わる。グローバルコンテキストのthisはグローバルオブジェクト(Windowオブジェクト)を参照する。

関数コンテキストは、関数が実行されるときに生成される実行コンテキストです。
関数コンテキストでは、同コンテキスト内で宣言した変数や関数以外にも、レキシカルスコープの変数やthisキーワード、argumentオブジェクトや
superという特殊なキーワードが使用できる。
superはクラスの継承が特殊な条件下でのみ利用可能なキーワードです。

コールスタックとは、実行コンテキストの積み重ねのことです。
グローバルコンテキストや関数コンテキストは、同コンテキスト内のコードの実行をすべて完了したタイミングで消滅しますが、
同コンテキスト内のコードで他の関数が呼び出されると呼び出し元のコンテキストの上に積み上げられる形で関数コンテキストが新たに作成される。
これが繰り返されたときには、JavaScriptエンジン上でどんどん関数コンテキストが積みあがっていく状態になる。これを**コールスタック(または実行コンテキストスタック)と呼ぶ。

関数コンテキスト内のthisは関数の実行の仕方によって、参照する先が異なる。大きく分けて次の2種類に分類できる。

thisの参照先は、メソッドが可能されるオブジェクトです。「メソッドとして実行する」とは、つまり「オブジェクト.メソッド()」の形式を実行することです。末尾の丸括弧()が付かない限り、メソッドを実行していることにはならないので注意してください。

**thisの参照先は、グローバルオブジェクト(ブラウザの場合はWindowオブジェクト)**です。

オブジェクトのメソッドとして実行される関数内のthisの参照先は、メソッドが呼び出される元になったオブジェクト(ドット演算子の前のオブジェクト)です。
以降、呼び出し元のオブジェクトと呼ぶ。
次のコードでは、メソッドhelloを実行したときの呼び出し元オブジェクトはtaroです。そして、メソッド内のthisは、このtaroを参照。

const taro = {
    name: "太郎",
    hello: function() {
        console.log("こんにちは、" + this.name);
    }
};

taro.hello();

> こんにちは、太郎

一方、オブジェクトのメソッドではなく、ただの関数として実行された場合のthisの参照先は、windowオブジェクトです。

window.name = "花子";

function hello() {
    console.log("こんにちは、" + this.name);
}

hello();

> こんにちは、花子

ES5で追加されたStrictモードを有効にすると関数として実行したときのthisの値がWindowオブジェクトではなくundefainedになるため注意。

アロー関数の特徴として、アロー関数が実行されたときの関数コンテキストにはthisが存在しない。
そのため、アロー関数内でthisキーワードが使われた場合には、スコープチェーンをたどって、レキシカルスコープに対してthisを探しに行く。
その時、最初に見つかったthisがアロー関数のthisキーワードの参照先として使われる。

const taro = {
    name: "太郎",
    hello: function() {
        const jiro = {
            name: "次郎",
            hello: () => {
                console.log("こんにちは、" + this.name);
            }
        };
        jiro.hello();
    }
};

taro.hello();

> こんにちは、太郎

オブジェクトのメソッドをコールバック関数としたとき

window.name = "花子";

const taro = {
    name: "太郎",
    hello: function() {
        console.log("こんにちは、" + this.name);
    }
};

function greeting(callback) {
    callback();
}

greeting(taro.hello);

> こんにちは、花子

taro.helloが参照している先の関数がcallbackとして引数にわたり、callback()という形式で実行されている。
このとき、関数が「オブジェクト.メソッド()」の形式で実行されないていないことに注意。callback()はあくまでも、
関数として実行されるため、thisの参照先はWindowオブジェクトになる。
どうようなに、オブジェクトのメソッドを編集に代入した場合にも、発生する。

window name = "花子";

const taro = {
    name: "太郎",
    hello: function() {
        console.log("こんにちは、" + this.name);
    }
};

const helloWho = taro.hello;
helloWho(); // 関数として実行される。

> こんにちは、花子

thisの特定の値に固定(束縛)するには、bind,apply,callという3つのメソッドを使う。

bindメソッドを使うと、thisの参照先の値を自由に変更できます。bindを使ってthisの参照先を変更することを、bindによるthisの束縛という。

[構文] bindの記法
const newFn = fn.bind(obj[,param1, param2,....])

fn: this、または引数を束縛したい関数かメソッドを指定する。
obj: 関数fn内のthisの参照先にしたいオブジェクトを指定する。
param1,param2: bindでは関数fnに渡す引数も指定できる。
newFn: bindによって、thisまたは引数が束縛された、新しい関数が格納される。

function hello(greeting) {
    console.log(greeting + this.name);
}

const taro = {
    name: "太郎"
}

const helloTaro = hello.bind(taro, "こんにちは、");
helloTaro();

> こんにちは、太郎

bindメソッドが主に使われるのは、コールバック関数として渡す関数のthisや引数を束縛したい場合です。
例えば、オブジェクトのメソッドをコールバック関数として渡した場合、関数として実行されてしまうため、thisの参照先がWindowオブジェクトとなってしまう。

(例1)
window.name = "花子";

const taro = {
    name: "太郎",
    hello: function() {
        console.log("こんにちは、" + this.name);
    }
};

setTimeout(taro.hello.bind(taro), 2000); // こんにちは、太郎と表示される
setTimeout(taro.hello, 3000); // こんにちは、花子と表示される。

(例2)
window.name = "花子";

const taro = {
    name: "太郎",
    hello: function() {
        console.log("こんにちは、" + this.name);
    }
};

// 無名関数でtaro.hello();を囲む
setTimeout(function() {
    taro.hello();
}, 2000);

> こんにちは、太郎

bindメソッドは、新しい関数を生成するだけで、その関数は実行されない。しかし、callメソッドでは、thisや引数を束縛した、
新しい関数を生成し、その関数を即時に実行する。

[構文] callの記法
fn.call(obj[,param1, param2,....]);

fn: this、または引数を束縛したい関数かメソッドを指定する。
obj: 関数fn内のthisの参照先にしたいオブジェクトを指定します。   
param1,param2: callでは関数fnに渡す引数も指定できる。

callメソッドは、bindメソッドと同じ形式で引数を渡す。唯一、bindメソッドと異なるのは、callメソッドを呼び出した時点で、thisや引数が束縛された関数が実行される点です。

const taro = { name: "太郎" };

function hello(greeting) {
    console.log(`${greeting}、${this.name}`);
}

hello.call(taro, "こんにちは");

> こんにちは、太郎

window.name = "花子";

const hello = () => {
    console.log("こんにちは、" + this.name);
}

hello.call({name: "太郎"}); // アロー関数ではthisを束縛できない。

> こんにちは、花子

applyメソッドは、callメソッドと同じく、thisや引数を束縛して新しい関数を作成し、
その関数を即時に実行する。callメソッドと異なるのは、applyメソッドでは、引数の束縛に配列を使うという点です。

[構文] applyの記法
fn.apply(obj, [, array]);
fn: this、または引数を束縛したい関数かメソッドを指定する
obj: 関数fn内のthisの参照先にしたいオブジェクトを指定する
array: applyメソッドの第二引数には配列を指定する。配列に格納された要素が関数fnの引数として、それぞれ渡される。

const taro = { name: "太郎" };

function hello(greeting, name) {
    console.log(`${greeting}、${name}`);
}

hello.apply(null, ["こんにちは、", "太郎"]);
> こんにちは、太郎