普通函数的this调用时动态绑定,箭头函数无this、词法继承外层this;前者适用于需动态this或new调用的场景,后者适合回调中保持外层this。

箭头函数与普通函数在 this 绑定上的核心差异,一句话就能说清:普通函数的 this 是调用时决定的(动态绑定),而箭头函数没有自己的 this,它直接沿用定义时所在外层作用域的 this(词法绑定)。
普通函数的 this 是“看怎么调用”
它的值完全取决于函数被调用的方式,不是写在哪、定义在哪,而是谁在什么时候执行了它:
- 作为对象方法调用,比如
obj.method(),this 指向obj - 单独调用,比如
func(),非严格模式下指向全局对象(浏览器中是window),严格模式下是undefined - 用
call、apply或bind调用,this 就是你显式传进去的那个对象 - 用
new调用,this 指向新创建的实例
箭头函数的 this 是“看定义在哪”
它不关心自己在哪被调用,只认自己诞生那一刻的上下文:
- 没有自己的 this,也不参与任何 this 绑定规则(默认/隐式/显式/new)
- 会一层层往外找,直到遇到第一个非箭头函数,然后继承那个函数的 this
- 用
call、apply、bind强行传入 this,完全无效 - 在对象字面量里直接写箭头函数,this 不会指向该对象,而是指向外层(比如模块顶层或 class 外部)
典型场景对比:setTimeout 和对象方法
这是最容易踩坑的地方:
- 定时器回调中想访问实例属性?普通函数里
this会丢失,箭头函数天然保持外层this,不用.bind(this) - 对象里定义方法?用箭头函数会导致
this.name是undefined,因为this没指向对象本身,而普通函数能正常工作 - React 类组件中绑定事件处理函数?常用箭头函数写法(如
onClick={() => this.handleClick()})来避免手动绑定,本质就是靠它的词法 this
判断该用哪个的关键信号
写函数前快速问自己两个问题:
- 我需要这个函数的 this 随调用方式变化吗?→ 需要就选普通函数
- 我只想让它“记住”当前环境的 this,尤其在回调里不希望它变?→ 箭头函数更安全
- 是否打算用
new实例化它?→ 只能用普通函数 - 是否在对象字面量中定义行为方法?→ 优先用普通函数或方法简写(
method() {})
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











