JavaScript中this由调用方式决定,按优先级依次为new绑定、显式绑定、隐式绑定、默认绑定;箭头函数继承外层this且不可修改,常用于回调场景。

JavaScript 中的 this 不是指向函数本身,也不是固定指向某个对象,而是由函数如何被调用决定的。理解 this 的绑定规则,比死记“谁调用就指向谁”更可靠。
四种 this 绑定规则,按优先级从高到低
JavaScript 引擎在执行函数时,会按以下顺序确定 this 值:
-
new 绑定:用
new调用构造函数时,this 指向新创建的对象 -
显式绑定:通过
call、apply、bind明确指定 this,优先级高于隐式绑定 -
隐式绑定:函数作为对象的方法被调用(如
obj.method()),this 指向该对象 -
默认绑定:独立调用函数(如
foo()),非严格模式下 this 指向全局对象(浏览器中是window),严格模式下为undefined
箭头函数没有自己的 this
箭头函数不遵循上述四条规则,它继承外层普通函数作用域中的 this 值,且无法通过 call/apply/bind 改变。适合用于需要保持上下文的回调场景:
const obj = {
name: 'Alice',
regular() {
console.log(this.name); // 'Alice'
setTimeout(() => {
console.log(this.name); // 'Alice' —— 继承 regular 的 this
}, 100);
},
broken() {
console.log(this.name); // 'Alice'
setTimeout(function() {
console.log(this.name); // undefined(严格模式)或 window.name(非严格)
}, 100);
}
};
常见失控场景与修复方式
以下情况容易导致 this 意外丢失,需主动干预:
立即学习“Java免费学习笔记(深入)”;
-
事件监听器中:直接传方法引用(
btn.addEventListener('click', obj.handleClick))会丢失 this → 改用箭头函数、bind 或包装函数:() => obj.handleClick() -
数组方法回调中:如
arr.map(obj.method)→ 使用arr.map(obj.method.bind(obj))或arr.map(item => obj.method(item)) -
解构后调用方法:如
const { method } = obj; method()→ this 丢失 → 改为obj.method()或提前 bind:const bound = obj.method.bind(obj)
调试和确认 this 的实用技巧
不必靠猜,可主动验证当前 this:
- 在函数开头加
console.log(this)直观查看 - 使用
debugger断点,在开发者工具控制台输入this查看实时值 - 对关键方法统一用
bind初始化(如类构造器中:this.handleClick = this.handleClick.bind(this)) - 现代写法推荐 class 字段语法 + 箭头函数:
handleClick = () => { ... },自动绑定 this











