📕 MDN

This

• In most cases, the value of this is determined by how a function is called (runtime binding).
• ES5 introduced the bind() method to set the value of a function's this regardless of how it's called
• ES2015 introduced arrow functions which don't provide their own this binding (it retains the this value of the enclosing lexical context).

a = { a: 1, b: function(){ return this } };
a.b() // { a: 1, b: f };

function b() { // b = function() {
   return this;
}

a = { a: 1, b: b }
a.b() // { a: 1, b: f };

a = { a: 1, b: () => this };
a.b() // Window

c = () => this;

a = { a: 1, b: c };
a.b() // Window

With strict mode

• In strict mode, however, if the value of this is not set when entering an execution context, it remains as undefined, as shown in the following example:

function f(){
  "use strict";
  return this;
}

f() // undefined

f2 = () => {
  "use strict";
  return this;
}

f2() // window

bind

• Calling f.bind(someObject) creates a new function with the same body and scope as f, but where this occurs in the original function, in the new function it is permanently bound to the first argument of bind, regardless of how the function is being used.

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind only works once!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37,37, azerty, azerty

arrow function

• In arrow functions, this retains the value of the enclosing lexical context's this. In global code, it will be set to the global object:
• No matter what, foo's this is set to what it was when it was created (in the example above, the global object).

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true

// Create obj with a method bar that returns a function that
// returns its this. The returned function is created as
// an arrow function, so its this is permanently bound to the
// this of its enclosing function. The value of bar can be set
// in the call, which in turn sets the value of the
// returned function.
var obj = {
  bar: function() {
    var x = (() => this);
    return x;
  }
};

// Call bar as a method of obj, setting its this to obj
// Assign a reference to the returned function to fn
var fn = obj.bar();

// Call fn without setting this, would normally default
// to the global object or undefined in strict mode
console.log(fn() === obj); // true

// But caution if you reference the method of obj without calling it
var fn2 = obj.bar;
// Calling the arrow function's this from inside the bar method()
// will now return window, because it follows the this from fn2.
console.log(fn2()() == window); // true