Easy ES6 arrow function and 'this' keyword

arrowFunction.md

ES6 Arrow function.

This in JS

• much like objects functions have their own property, this being one of them

• this always holds the reference to a single object, that defines the current line of code’s execution context.

• functions in JS are invoked in following manner 1.Function invocation - THIS with function invocation. - calling the function --- something() - this inside the something() function has value of the global objects (window object in browser environment). - 'use strict' the default value of this, for any function object is set to undefined instead of the global object.

  2.Method invocation - Functions, when defined as fields or properties of objects, are referred to as methods. - method invocation is of that function defined in an object. - invoking a function within a method to avoid being global ref to this we user thisreference 3.Constructor invocation

  • Constructor invocation is performed when new keyword is followed by a function name, and a set of opening and closing parentheses(with or without arguments).

  let person1= new People(‘John’, 21);

  Here, person1 is the newly created object and People is the constructor function used to create this object.

  This and Arrow Functions

  • Arrow functions, introduced in ES6, provides a concise way to write functions in JavaScript.
  • Another significant advantage it offers is the fact that it does not bind its own this. In other words, the value of this depends on enclosing context.
  • when invoking function within object the context is set to global or have to use this reference
  • undefined without lexical bindings vs arrow function lexical binding.

     let People = function(person, age) { 
      this.person = person; 
      this.age = age; 
      this.info = function() { 
    
       // logs People 
       document.write(this); 
    
       setTimeout(function() { 
          // here this!=People 
         document.write(this.person + " is " + this.age +  
                                            " years old"); 
        }, 3000); 
      } 
    // OUTPUTS : undefined is undefined years old
    
     let People = function(person, age) { 
      this.person = person; 
      this.age = age; 
      this.info = function() { 
    
          // logs People 
          document.write(this);  
    
         setTimeout(() => {  
          // arrow function to make lexical "this" binding 
          // here this=People."this" has been inherited 
          document.write(this.person + " is " + this.age  
                                         + " years old"); 
         }, 3000); 
      } 
      // OUTPUT: John is 12 years old. 
    
      let person1 = new People('John', 12); 

• In other words, an arrow function’s this value is the same as it was immediately outside it.

• arrow functions are anno functions.

• arrow function don't bind this keyword or arguments.

• arrow function bind this from parent method.

• es 5 fucntion does not.

function qasim1() {
     let name = "abul";
     this.age = 22;
     let qasim = { name: 'Qasim', age : '23',
                topo: ()=> {
                    setTimeout(()=> {console.log(this.age)}, 1000);
                }
                }
     qasim.topo();
}
qasim1(); // outputs 22

function qasim1() {
     let name = "abul";
     this.age = 22;
     let qasim = { name: 'Qasim', age : '23',
                topo() {
                    setTimeout(()=> {console.log(this.age)}, 1000);
                }
                }
     qasim.topo();
}
qasim1(); // outputs 23