これは何ですか.

JavaScriptでは、このキーワードは他の言語とは少し違った動作をします.また、厳格モードと非厳格モードの間にいくつかの区別があります.
このキーワードは、使用方法に応じて異なるオブジェクトを参照します.
オブジェクトメソッドの

、これはオブジェクトを参照します.

単独で

、これは世界的なオブジェクトに言及します.

関数では、これはグローバルオブジェクトを参照します.

関数では、厳密モードでは、これは未定義です.

イベントでは、イベントを受け取った要素を参照します.このメソッドは次のようになります.
オブジェクトメソッドで使用する場合、これはオブジェクトを参照します.

const person = {
  firstName: "John",
  lastName: "Doe",
  id: 5566,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
console.log(person.fullName()) //output : John Doe

ひとりぼっち
単独で使用する場合、これはグローバルオブジェクトを参照します.
これはグローバルスコープで動作しています.
ブラウザウィンドウでは、グローバルオブジェクトは[オブジェクトウィンドウ]です

let x = this;
console.log(x) //output is :[object Window]

厳密モードでは、単独で使用する場合、グローバルオブジェクトを参照します.

"use strict:";
let x = this;
console.log(x) //output is :[object Window]

この関数は(デフォルト)
関数では、グローバルオブジェクトはこれの既定のバインドです.
ブラウザウィンドウでは、グローバルオブジェクトは[オブジェクトウィンドウ]です.

function myFunction() {
  return this;
}
myFunction() //output is : [object Window]

この関数( strict )
JavaScript strict mode既定のバインドを許可しません.
したがって、関数で使用されるとき、strict modeでは、これは未定義です.

"use strict";
function myFunction() {
  return this;
}
myFunction() //output is : undefined

このイベントハンドラでは
HTMLイベントハンドラでは、イベントを受け取ったHTML要素を参照します.

<button onclick="this.style.display='none'">
  Click to Remove Me!
</button>