This or That........Object. Understanding This

This always refers to an object, the question is which object. The object that this refers to depends on how it is used in your code and where it is at the time of invocation. There are a few ways to ways invoke this to always know what you are referencing.

Method Invocation

In this example the keyword this is bound to the detective object that it's encapsulating function is in. Due to scoping, instead of this pointing to the global window, like from free function invocation, this belongs to the detective object. Another way to verify this is to look to the left of the dot at call time. Anytime the wellID function is invoked it will be as a method of the detective object, this is what this will refer to.

var detective = {
  firstName: "Akihito",
  lastName : "Narihisago",
  id     : 'Sakaido',
  wellID : function() {
    return `My name is ${this.id}, and I am the brilliant detective. `;
  }
};
console.log(detective.wellID()) //My name is Sakaido, and I am the brilliant detective.

Free Function/Global Invocation

Unlike in the example above, where this is used within the lexical scope, of the detective object, here this is freely called.

const file01 = {
  suspectCodeName: 'Perforator',
  firstName: 'Tamotsu',
  lastName: 'Fukuda',
  proof: this
};
console.log(file01.proof) //will print global window

This will log the global window to the console. This is a value inside of the file01 object but due to that object being inside of the global window and not in another closure, this has the value of the global window.

.apply(), .bind() & .call()

These three methods allow us to use this no matter how it has been invoked. Each one of those methods apply this in a different way.

.apply() & .call()
These methods invoke the function with this having a new context. The difference between the two methods is .apply() takes arguments as an array while .call() takes them as a list.

function scenario(tools, quirk) {
  return `${detective.wellID()}${this.firstName} ${this.lastName} also known as
  the ${this.suspectCodeName} has been found and captured. The ${tools} helped with his capture.
   Since he had a ${quirk} it disrupted the ${tools} and made his apprehension more difficult.`;
}
console.log(scenario.apply(file01, ['cognition particles', 'hole in is head']));

// My name is Sakaido, and I am the brilliant detective. Tamotsu Fukuda also known as the Perforator
// has been found and captured. The cognition particles,hole in is head helped with his capture.
// Since he had a undefined it disrupted the cognition particles,hole in is head and made his
// apprehension more difficult.

.bind()
This method creates a new function that will set this to the given value when the function is invoked.The .bind() invocation has a lot less code when used but the new function must be saved to a variable.

let usingBind = scenario.bind(file01, ['cognition particles', 'hole in is head'])
  console.log(usingBind());
  // My name is Sakaido, and I am the brilliant detective. Tamotsu Fukuda also known as the Perforator
  // has been found and captured. The cognition particles,hole in is head helped with his capture.
  // Since he had a undefined it disrupted the cognition particles,hole in is head and made his
  // apprehension more difficult.

Constructor Invocation
When using this with constructor invocation, this will be bound to the new instance of the constructor object, only when the new keyword is used. All of the objects created from that object will have the same properties.

const File = function(codeName, firstName, lastName) {
  this.codeName = codeName;
  this.firstName = firstName;
  this.lastName = lastName;
}

const newCase = new File('Gravedigger', 'Haruka', 'Kazuta');
console.log(newCase); //logs a new object

Having this knowledge this or knowing what it is referencing should no longer be an alien concept.