setTimeout中的this指向问题和箭头函数结合的区别

皮革探戈

1、首先

• 首先要解释下，函数体内变量的作用域是在函数定义的时候就确定的，而不是运行时；
  
• 函数的上下文是在调用时确定的，函数体内的this指向其上下文；
  
• 箭头函数没有自己的this，它的this指向的是它上级的this，而它上级的this指向的是上级的上下文。
  

2、普通函数的this，指向其调用者，箭头函数this，指向其上级this

1.         let app = {
2.             a: 1,
3.             fn: function () {
4.                 console.log('app.fn:', this, this.a);
5.                 // this指向需要函数被调用时才能确定，当app.fn()执行，
6.                 // 确定其上下文为app，所以this指向app对象
7.                 // this.a = app.a = 1
8.             }
9.         }
11.         window.a = 0
12.         let app2 = {
13.             a: 2,
14.             fn: () => {
15.                 console.log('app2.fn:', this, this.a);
16.                 // app2.fn()执行，上下文为app2,this本应指向app2对象，
17.                 // 但是fn是箭头函数，所以this指向它上级的this，也就是
18.                 // 指向app2的this,由于app2的this指向的是其上下文，所以这里就是window,
19.                 // this.a = window.a = 0
20.             }
21.         }

复制代码

拓展：var、let和const声明的数据，作用域不同，var声明的对象可以在global全局作用域下查找，也就是赋值给了window对象；而let和const声明的对象只能在script作用域下查找，所以window对象上不会显示声明的app等对象和函数。var声明的对象和function函数都可以在global全局作用域下找到。
说到了script，多个script在浏览器中一般是分块编译的，不是同时编译。但是作用域只有一个，就是script作用域。
3、seiTimeout中的this，指向window，箭头函数this，指向其上级this

1.         let app3 = {
2.             a: 3,
3.             fn: function () {
4.                 setTimeout(() => {
5.                     console.log('app3.fn:', this, this.a);
6.                     // app3.fn()执行，但输出语句在setTimeout中，
7.                     // this本应指向window，但箭头函数的this指向其上级的this，
8.                     // 所以this指向fn的this，也就是fn的上下文，this指向app3对象
9.                     // this.a = app3.a = 3
10.                 }, 1000);
11.             }
12.         }
14.         let app4 = {
15.             a: 4,
16.             fn: ()=> {
17.                 setTimeout(() => {
18.                     console.log('app4.fn:', this, this.a);
19.                     // app4.fn()执行，this本应指向window，
20.                     // 但箭头函数的this指向fn的this，fn的this指向app4的this,
21.                     // app4的this指向app4的上下文
22.                     // 所以this指向app4的上下文，this指向window
23.                     // this.a = window.a = 0
24.                 }, 1000);
25.             }
26.         }
28.         let app5 = {
29.             a:5,
30.             fn:function(){
31.                 setTimeout(() => {
32.                     console.log('app5.fn:', this, this.a);
33.                     // app5.fn()执行，this指向fn的this，
34.                     // fn的this指向fn的上下文，也就是this指向app5
35.                     // this.a = app5.a = 5
36.                 }, 1000);
37.             }
38.         }

复制代码

4、数组中的函数，调用后的this，指向该数组

1.         function app6() {
2.             console.log('app6.fn:', this, this.a);
3.         }
4.         let arr = [0, 1, 2, app6]
5.         arr[3]() // 函数执行，上下文是arr数组，this指向arr，
6.                  // this.a = undefined, this[0] = 0

复制代码

5、事件处理函数的this，指向触发事件的对象

6、可用call、apply和bind改变this指向


来源:https://www.cnblogs.com/fangcunjian/p/17182455.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！