当前位置：网站首页>Yyds dry goods count re comb this of arrow function

Yyds dry goods count re comb this of arrow function

2022-07-06 20:42:00 【51CTO】

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

       
       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();

       
       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:

       
       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

       
       "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

       
       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

       
       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

       
       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.

原网站

版权声明
本文为[51CTO]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/187/202207061233055965.html