'this' and Invocation Patterns

A love story.

What is the 'this' keyword and these Invocation Patterns!?
Well, 'this' is a reserved keyword within JavaScript that refers to an object. Now, in order to determine which object it's referring to is solely based off of how the function, it resides in, is called/invoked. Luckily, there are different invocation patterns that help you zero in on how 'this' can be utilized so the value can be determined and used as intended. These patterns are: Global Reference, Free, Method, Constructor, and Call/Apply/Bind.

• Global Reference / Scope Invocation: When 'this' is invoked by itself or in the global scope then it will refer to the Global Object Window.

console.log(this)

• Free Function Invocation: When a function is invoked traditionally, 'this' also refers to the Global Window Object like Global Invocation, above.

function freeFunctionInvocation() {
  return this; // <- Refers to the Global
}
freeFunctionInvocation();

• Method Invocation: When a specific object is to be referenced then the function can be defined as an object method. Due to the dot notation connecting the function to the object it creates an ownership over the function.

const obj = {
  firstName: 'Paul',
  signature: function () {
    return `McBeth, ${this.firstName}`
  }
}
obj.signature(); // <- McBeth, Paul

In obj.signature() 'this' directly references what is to the left of the '.' at the time it is called therefore the signature function is called as a method of the 'obj' object.

• Constructor Function Invocation: What is a constructor function?

Rollbar defines a constuctor as: 'A special function that creates and initializes an object instance of a class'.

Simply it's a template object, beginning with a capital letter, used to create empty objects with the constructor's properties. When an object is created with a constructor it is done using the 'new' keyword.

function Person(name) {
  this.name = name; //'this' refers to the Person constructor
};

let person1 = new Person(); 
person1.name = 'Simon'; //assigns the name property to 'Simon' in the new object.

By declaring person1 and assigning it to the constructor with 'new' will allow for a separate copy of that object.

• Call() & Apply(): Call and Apply are methods that implicitly bind 'this' to the first parameter. When using these methods you can specify what you want 'this' to refer to by placing it as the first parameter and then with the arguments separated by commas, when using .call(), or an array, when using .apply().

var pdga = {
  founderFirstName: 'Ed',
  founderLastName: 'Headrick',
  founderFullName: function () {
    var fullname = `${this.founderFirstName} ${this.founderLastName}`;
    return fullname;
  }
};
var hq = function (sport, location) {
  console.log(`${this.founderFullName()}'s ${sport} Headquarters is in ${location}`);
};
//call method arguments are separated by commas
  hq.call(pdga, 'Disc Golf', 'Appling, GA');
//apply method arguments are separated by an array
  hq.apply(pdga, ['Disc Golf', 'Appling, GA']);

• The bind method: MDN defines Bind() as: 'creates a new function with the same body, but the value of 'this' is permanently bound to the first argument, regardless of how the function is being called' So, unlike call and apply, 'this' will always be the first argument when utilizing bind. With that being said, bind will create a new function that wasn't in the original object, but it can adopt the properties, as well as the methods.

var pdga = {
  founderFirstName: 'Ed',
  founderLastName: 'Headrick',
  founderFullName: function () {
    var fullname = `${this.founderFirstName} ${this.founderLastName}`;
    return fullname;
  }
};
var hq = function () {
  console.log(`${this.founderFullName()} founded the Professional Disc Golf Association`);


}
var steady = hq.bind(pdga); // <- Creates a copy of the 'hq' function and binds pdga to 'this'
steady(); 

In conclusion, when utilized correctly, or at least as intended, it can change the dynamic of how you create your work, moving forward! Finally understanding something so complex has that effect! At least for me, it does. Even if you don't use every method, it's good practice to understand how to decipher what each invocation is telling you.