this

Javascriptの『this』についてまとめました。

thisとは

呼び出した場所や、呼び出した方法によって内容が変わる変数のことです。
簡単に説明すると
　『メソッドを呼び出すときの先頭ドット（.）の左側にくるオブジェクト』
を指す変数になるのかなと思っています。
例を用いて説明します。下記例をご覧ください。
※ここではstrictモードを前提としています。

window.console.log(this); // windowオブジェクト

普段は意識せず『console.log』と書いているかもしれませんが
省略せずに書く場合、windowオブジェクトに所属するメソッドという扱いであるため上記のようになります。
この時のthisが何なのか確認すると『windowオブジェクト』が表示されます。
つまり、『window.console.logの先頭ドットの左側にくるオブジェクト』が示されていることが分かります。

関数内でthisを呼び出した時も考え方は同様です。

window.sampleFunc1 = function () {
    console.log(this);
}
window.sampleFunc1(); // windowオブジェクト

定義した関数はwindowオブジェクトのメソッドに所属するため、
『window.sampleFunc()の先頭ドットの左側にくるオブジェクト』である『windowオブジェクト』が示されます。
※呼び出しの際『window.』をつけないとメソッドではなく関数扱いで呼び出すため『undefined』になります。

では、ローカル変数に格納した関数式の場合はどうでしょうか。

const sampleFunc2 = function () {
  console.log(this);
}
sampleFunc2(); // undefined

ローカル変数はwindowオブジェクトに追加されず、
関数として呼び出すしかないため（ドットの左側に来るオブジェクトがないため）
『undefined』になります。

次は、ローカルのオブジェクト変数に格納した関数の場合です。

function sampleFunc3 () {
    console.log(this);
}
const nowObj1 = {'id':1, 'targetFunc':sampleFunc3};
const nowObj2 = {'id':2, 'targetFunc':sampleFunc3};
nowObj1.targetFunc(); // nowObj1オブジェクト
nowObj2.targetFunc(); // nowObj2オブジェクト

オブジェクト変数のメソッド扱いで呼び出すことになるため
『nowObj1.sampleFunc()とnowObj2.sampleFunc()の先頭ドットの左側にくるオブジェクト』である
『nowObj1オブジェクト』と『nowObj2オブジェクト』が示されます。

クラスの時も考え方は同様です。

class clsThis {
    constructor (id) {
        this._id = id;
    }
    callCls () {
        console.log(this);
    }
}

const nowCls1 = new clsThis(3);
nowCls1.callCls(); // clsThisオブジェクト

この他にもthisの値は条件次第でコロコロ変わりますが、ここでは解説しません。折を見て応用編としてまとめてみたいと思っています。
ただ、下記の記事はコメントも含めてとっかかりにはなるかなと思ったので
参考にしていただければと思います。

最後にサンプルをまとめます。

サンプル