Comparison of this in arrow functions and this in ordinary functions

The syntax of arrow function has been added in ES6. Arrow function is characterized by its brevity and convenience to obtain this. Here's a summary of the differences between them:

this under ordinary functions:

This in a normal function always represents its direct caller. By default, this refers to window,
In strict mode, this in a function with no direct caller is undefined use
Call, apply, bind (new in ES5) are bound, this refers to the bound object

this in arrow functions:

The arrow function does not have its own this, its this is inherited; by default it points to the object (host object) where it was defined,
Instead of the object at execution time, when it is defined, the environment may be window, or it may be other.

Look at the following code:

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

Because a is a global function, that is, it is mounted under the window object, so a() is equivalent to window.a();

var obj = {  
   say: function () {  
     setTimeout(function () {  
       console.log(this);   //window   
     });  
   }  
 }   
 obj.say();

The function in the timer, since there is no default host object, this points to the window

var obj = {  
   func: function() {},  
   say: function () {  
     console.log( this ); // obj, this is the obj object     
     setTimeout( function () {   
       console.log(this);  //window
       that.func();  
     });   
   }  
 }  
 obj.say();

At this time, the host environment of say is obj, so the this in say is obj, and the function in the timer. Since there is no default host object, the default this points to window.

this in strict mode:

function test() {  
   'use strict';  
   console.log(this); //undefined   
 }  
 test();

In strict mode, this in a function with no direct caller is undefined

"use strict";   
    var obj={   
      say:function(){   
        console.log(this); //obj    
      }  
    };  
obj.say();

this with a direct caller is its caller

this in arrow functions:

var obj = {  
   say: function () {  
     setTimeout(() => {  
       console.log(this);// obj    
     });  
   }  
 }  
 obj.say();

At this time, this inherits from obj, which refers to the object obj that defines it, not window!

var obj = {  
say: function () {  
  var f1 = () => {  
    console.log(this); // obj  
    setTimeout(() => {  
      console.log(this); // obj  
    })  
  }  
  f1 ();  
  }  
}   
obj.say()

Because this in the function where f1 is defined refers to obj, the arrow function this in setTimeout inherits from f1, so no matter there are multiple levels of nesting, it is obj

var obj = {  
say: function () {  
  var f1 = function () {  
    console.log( this ); // window, when f1 is called, there is no host object, the default is window   
    setTimeout(() => {  
      console.log(this); // window  
    })  
  };  
  f1 ();  
  }  
}  
obj.say()

Result: All are windows, because the environment in which the arrow function is defined is equivalent to window, so the this function window inside the arrow function

Comparison of this in arrow functions and this in ordinary functions

Guess you like