About "this" in JavaScript

In what we call "strict mode", this will always be undefined as long we're not inside of an object.
'use strict'
console.log(this);
// => undefined
In regular mode, also called sloppy mode, this will refer to Window.
console.log(this);
// => ►Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
Here's how "this" works in methods by looking at different methods defining shapes.

"this" bound by default to object:
const plane = {
  type: 'cargo',
  capacity: 5000,
  summary: function() {
    console.log(`Selected a ${this.type} plane with a capacity of ${this.capacity}.`)
  }
};

plane.summary();
// ==> Selected a cargo plane with a capacity of 5000.
A different approach, very useful in specific cases, that will provide same result:
const plane = {
  type: 'cargo',
  capacity: 5000,
};

plane.summary = function() {
  console.log(`Selected a ${this.type} plane with a capacity of ${this.capacity}.`)
} // we simply attach the method to the object at a convenient time

plane.summary();
// ==> Selected a cargo plane with a capacity of 5000.
But here's a tricky one:
const plane = {
  type: 'cargo',
  capacity: 5000,
  summary: () => {
    console.log(`Selected a ${this.type} plane with a capacity of ${this.capacity}.`)
  }
};

plane.summary();
// ==> Selected a undefined plane with a capacity of undefined.
This is happening because "this" is lexically bound, and creating an arrow function, "this" will be derived from the arrow function itself, therefore will be undefined.

In Browser, "this" has a different use, in the sense the it will refer to the HTML element that got the event:
document.querySelector('#button').addEventListener('click', function(e) {
  console.log(this); // => HTMLElement
}