当前位置：网站首页>＃yyds干货盘点＃重新梳理箭头函数的this

＃yyds干货盘点＃重新梳理箭头函数的this

2022-07-06 12:39:00 【51CTO】

记得之前分享过this的用法，是关于普通函数、构造函数的this，今天主要分享ES6箭头函数的this。先看普通函数下的this。

普通函数下的this:

在普通函数中的this总是代表它的直接调用者，在默认情况下，this指的是window，
在严格模式下,没有直接调用者的函数中的this是 undefined使用
call,apply,bind(ES5新增)绑定的,this指的是绑定的对象

箭头函数中的this:

箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象),
而不是执行时的对象, 定义它的时候,可能环境是window,也有可能是其他的。

普通函数

       
       function test() { 
       
   console.log(this);  
       
 }  
       
 test();  //window
      
1.
2.
3.
4.

test是一个全局函数，也就是挂载在window对象下的 test()等价于window.test();

       
       var obj = {  
       
   func: function () {  
       
     console.log(this); 
       
     setTimeout(function () {   
       
       console.log(this);
       
     },0);   
       
   }  
       
 }  
       
 obj.func(); 
       
// obj,此时的this是obj对象    
       
// window
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

func的宿主环境是obj,所以func里面的this是obj。定时器中的函数，由于没有默认的宿主对象，所以this指向window 严格模式下的this:

       
       function test() {  
       
   'use strict';  
       
   console.log(this); 
       
 }  
       
 test(); 
       
 //undefined   
      
1.
2.
3.
4.
5.
6.

严格模式

在严格模式下,没有直接调用者的函数中的this是 undefined

       
       "use strict";   
       
    var obj={   
       
      say:function(){   
       
        console.log(this);
       
      }  
       
    };  
       
obj.say();  
       
//obj    
      
1.
2.
3.
4.
5.
6.
7.
8.

有直接调用者的this是它的调用者

箭头函数

       
       var obj = {  
       
   say: function () {  
       
     setTimeout(() => {  
       
       console.log(this);
       
     });  
       
   }  
       
 }  
       
 obj.say(); 
       
 // obj    
      
1.
2.
3.
4.
5.
6.
7.
8.
9.

此时的 this继承自obj, 指的是定义它的对象obj, 而不是 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.

因为f1定义时所处的函数中的 this是指的 obj, setTimeout中的箭头函数this继承自f1,所以不管有多层嵌套,都是 obj

       
       var obj = {  
       
 say: function () {  
       
   var f1 = function () {  
       
     console.log(this);  
       
     setTimeout(() => {  
       
       console.log(this); 
       
   })  
       
   };  
       
   f1();  
       
 }  
       
}  
       
obj.say()
       
// window, f1调用时,没有宿主对象,默认是window 
       
// window  
      
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.