箭头函数中的this

最新推荐文章于 2025-07-09 10:44:35 发布

转载最新推荐文章于 2025-07-09 10:44:35 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/oulae/p/11072265.html

文章标签：

#javascript #ViewUI

本文主要探讨JavaScript中this的指向问题。函数声明式中this指向运行时作用域，无对象调用则指向global/window；箭头函数this指向固化，指向定义时所在作用域。还总结了箭头函数的特点，如不能用作构造函数，不能用call、apply、bind改变this指向等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　JavaScript的函数（函数声明式）中，this指向的是运行时的作用域，如果没有对象调用函数，则this指向 global/window，但是在箭头函数中，this的指向是固化的，如下面代码所示：

 1 function Timer() {
 2     this.s1 = 0
 3     this.s2 = 0
 4     setInterval(() => {
 5         this.s1++
 6     }, 1000)
 7     setInterval(function () {
 8         // console.log(this)
 9         this.s2++
10     }, 1000)
11 }
12 
13 var timer = new Timer()
14 
15 setTimeout(() => console.log('s1: ', timer.s1), 3100) // 3
16 setTimeout(() => console.log('s1: ', timer.s2), 3100) // 0

　　那么怎样理解输出的结果呢？其实只需要搞清楚在第4行和第7行中两个函数this的指向就行了。

　　在第4行中，使用的是箭头函数，箭头函数this绑定定义时所在的作用域（即Timer函数），则该this指向的是Timer函数中的对象

　　在第7行中，使用的是函数声明式，此时this指向运行时的作用域，即全局对象，操作的自然就不是Timer函数中的s2了

 1 function Timer() {
 2     this.s1 = 0
 3     this.s2 = 0
 4     setInterval(() => {
 5         this.s1++
 6     }, 1000)
 7     setInterval(func.bind(this), 1000)
 8     function func() {
 9         this.s2++
10     }
11 }
12 
13 var timer = new Timer()
14 
15 setTimeout(() => console.log('s1: ', timer.s1), 3100) // 3
16 setTimeout(() => console.log('s1: ', timer.s2), 3100) // 3