JavaScriptのthisとは何なのか

一言で言うと

呼び出し元のオブジェクトを参照できるキーワードである

もう少し詳しく

こんな関数があったとします。

function showName() {
    console.log(this.name)
}

この関数を2つのオブジェクトで参照します。

const obj1 = {
    name: 'obj1',
    showName: showName
}

const obj2 = {
    name: 'obj2',
    showName: showName
}

function showName() {
    console.log(this.name)
}

関数を実行すると、オブジェクトそれぞれのnameが出力されます。

obj1.showName() // obj1
obj2.showName() // obj2

本来、showName関数自体にには呼び出し元の情報はありませんが、thisには呼び出し元オブジェクト（hoge.showName()のhoge）を保持しているため各オブジェクトのnameプロパティを出力できるわけです。

呼び出し元オブジェクトがない場合は、グローバルコンテキストを参照する

上記のshowName関数をオブジェクトから呼び出さず直接実行した場合はundefinedとなります。
これは、グローバルコンテキスト、ブラウザならwindowオブジェクトを参照するためです。
window.nameというプロパティはデフォルトで存在しないためundefinedとなります。

なので、window.nameを設定すればその値が出力されます。

window.name = 'window object'

function showName() {
    console.log(this.name)
}

showName() // window object

参照オブジェクトを指定するapply, call

apply, callを使用するとthisが参照するオブジェクトを任意指定できます。
下記のobj1.showName.apply(obj2) の実行結果は、obj1ではなくobj2となります。
apply()の引数にobj2を渡しているため、thisの参照先がobj2になったわけです。

const obj1 = {
    name: 'obj1',
    showName: showName
}

const obj2 = {
    name: 'obj2',
    showName: showName
}

function showName() {
    console.log(this.name)
}

obj1.showName.apply(obj2) // obj2

上記のapplyをcallに変えても同じ結果となります。
2つは第二引数の取り方で違いがありますが、本旨と外れるため説明は割愛します。