Yyds dry goods count re comb this of arrow function

I remember sharing before this Usage of , It's about ordinary functions 、 Constructor's this, Today's main share ES6 Arrowhead function this. Let's first look at this.

Under ordinary function this:

• In ordinary functions this Always represents its direct caller , By default ,this refer to window,
• In strict mode , There is no direct caller in the function of this yes undefined Use
• call,apply,bind(ES5 newly added ) The binding of ,this refer to Bound object

In the arrow function this:

• Arrow function does not have its own this, its this It's inherited ; By default, it points to the object where it was defined ( Host object ),
• Not the object at execution time , When you define it , Maybe the environment is window, It could be something else .

Ordinary function

Log in and copy

      
      

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

       
       
1.
       
       
2.
       
       
3.
       
       
4.
      
      

test It's a global function , That is to mount on window Under the object test() Equivalent to window.test();

Log in and copy

      
      

       
       var obj = {  
       
       
   func: function () {  
       
       
     console.log(this); 
       
       
     setTimeout(function () {   
       
       
       console.log(this);
       
       
     },0);   
       
       
   }  
       
       
 }  
       
       
 obj.func(); 
       
       
// obj, At this time this yes obj object     
       
       
// window
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
      
      

func The host environment is obj, therefore func Inside this yes obj. Functions in timer , Because there is no default host object , therefore this Point to window In strict mode this:

Log in and copy

      
      

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

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
      
      

Strict mode

In strict mode , There is no direct caller in the function of this yes undefined

Log in and copy

      
      

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

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
      
      

With direct callers this Is its caller

Arrow function

Log in and copy

      
      

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

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
      
      

At this time this Inherited from obj, It refers to the object that defines it obj, instead of window

Log in and copy

      
      

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

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
      
      

because f1 The function in which it is defined Medium this It means obj, setTimeout Arrow function in this Inherited from f1, So no matter there are multiple nesting , All are obj

Log in and copy

      
      

       
       var obj = {  
       
       
 say: function () {  
       
       
   var f1 = function () {  
       
       
     console.log(this);  
       
       
     setTimeout(() => {  
       
       
       console.log(this); 
       
       
   })  
       
       
   };  
       
       
   f1();  
       
       
 }  
       
       
}  
       
       
obj.say()
       
       
// window, f1 Invocation time , No host object , The default is window 
       
       
// window  
      
      
      
      

       
       
1.
       
       
2.
       
       
3.
       
       
4.
       
       
5.
       
       
6.
       
       
7.
       
       
8.
       
       
9.
       
       
10.
       
       
11.
       
       
12.
       
       
13.
       
       
14.
      
      

The arrow function doesn't this The binding of , Its value must be determined by looking up the action chain . If the arrow function is contained by a non arrow function , be this Bound is the latest layer of non arrow functions this; otherwise .this The value of will be set to undefined. When defining an arrow function, its environment is equivalent to window, So inside the arrow function this function window.