this in JavaScript

• Refer this document for detail understanding of this

• Explicit binding (using call() and apply()) takes precedence over implicit binding. Hard binding (using bind()) takes precedence over explicit binding

• this works on the context of execution. Execution context is a concept in the language spec that—in layman's terms—roughly equates to the 'environment' a function executes in; that is, variable scope (and the scope chain, variables in closures from outer scopes), function arguments, and the value of the this object.

• The contents in execution context depends on the way in which method is called. One of the variable/argument of that execution context is this. Anytime you write a function, you'll have this variable and value of this variable, depends on the way you call a function.

• There are four ways of defining functions:

  1. Regular Functions

     function foo() {
        console.log(this); // window reference
     }
     foo();

     • value of this keyword is global object

  2. Function Expression

     var obj = {};
     obj.foo = function() {
        console.log(this); // {foo: ƒ}
     }
     obj.foo();

     • value of this keyword is referring to object itself

  3. Constructor Function

     function foo() {
        console.log(this); // foo {}
     }
     new foo();

     • value of this keyword is referring to newly created object

  4. Functions using call()

     function foo() {
        console.log(this);
     }
     foo.call(...);

     • value of this keyword is referring to object provided in argument of call() method

  5. Arrow functions

     const foo = () => {
        console.log(this); // window
     }
     foo();

     • value of this keyword is referring to the context in which the function is defined

---

Working of call() and apply() - Explicit Binding

• I have a person's method that takes two parameters

  function Person(firstName, lastName) {
     this.firstName = firstName;
     this.lastName = lastName;
     this.fullName = function() {
        return this.firstName + ' ' + this.lastName;
     }
  } 
  
  new Person('aakash', 'goplani');

• In the above example, we have two functions defined viz. Person() and fullName(). Both have different values for this. Person has this value set to a new Object i.e. Person {} whereas value of this for fullName() is the object on which the the function is called i.e. Person {firstName: "aakash", lastName: "goplani", fullName: ƒ}

• Now I have Employee() function that needs to access fullName property of Person() function

  function Employee(firstName, lastName) {
     Person.call(this, firstName, lastName);
  } 
  new Employee('aakash', 'goplani').fullName(); // aakash goplani

  • Here this within Person will refer to Employee object and the property fullName will be invoked with Employee object reference.

• While the syntax of this function is almost identical to that of apply(), the fundamental difference is that call() accepts an argument list, while apply() accepts a single array of arguments.

---

Working of bind() - Hard Binding

Stack Overflow