JavaScript中this调用时绑定:普通调用非严格模式指向全局对象、严格模式为undefined;对象方法调用指向该对象;箭头函数继承外层this;new调用指向新实例;绑定优先级为new>显式绑定>隐式绑定>默认绑定。

JavaScript 中的 this 不是定义时绑定,而是调用时绑定——它永远指向函数被调用时的“执行上下文对象”,和函数在哪定义、怎么声明完全无关。
普通函数调用时,this 指向什么
在非严格模式下,直接调用函数(如 foo()),this 指向全局对象(浏览器中是 window,Node.js 中是 global);严格模式下则为 undefined。
常见错误现象:在回调、定时器或事件处理中直接传入普通函数,this 丢失:
const obj = {
name: 'Alice',
say: function() { console.log(this.name); }
};
setTimeout(obj.say, 100); // 输出 undefined(严格模式)或 window.name
原因:这里 obj.say 被取出来单独调用,等价于 const fn = obj.say; fn();,已脱离 obj 上下文。
立即学习“Java免费学习笔记(深入)”;
- 修复方式:用
bind、箭头函数、或改写为setTimeout(() => obj.say(), 100) - 注意:
call/apply可显式指定this,但只影响当次执行,不改变函数本身
对象方法调用时,this 绑定的是谁
当函数作为对象属性被调用(即 obj.method() 形式),this 指向该对象(obj),这是最直观也最容易依赖的绑定场景。
但要注意“隐式丢失”边界:
-
const fn = obj.method;→ 后续fn()已不是对象方法调用,this不再是obj - 嵌套对象中,只有最后一层点号决定
this:obj.nested.method()的this是obj.nested,不是obj - 原型链上的方法,
this仍指向调用时的实际对象(不是定义它的原型)
箭头函数没有自己的 this,它继承外层作用域
箭头函数不绑定 this,它会沿作用域链向上查找最近的非箭头函数的 this 值,并固定住——无法用 call、apply、bind 改变。
典型使用场景:避免回调中 this 丢失,比如事件监听或 Promise 链:
const obj = {
name: 'Bob',
init() {
document.addEventListener('click', () => {
console.log(this.name); // 正确输出 'Bob'
});
}
};
但这也意味着:箭头函数不能用作构造函数(无 this 实例),也不适合需要动态 this 的场景(如 Vue 或 React 类组件中的事件处理器若需访问实例,有时反而要避免箭头函数)。
new 调用时,this 指向新创建的实例
用 new 调用函数时,引擎会创建空对象,将其设为 this,并隐式返回该对象(除非显式返回其他对象)。
关键点:
- 必须是函数表达式或函数声明,不能是箭头函数(
new箭头函数会报TypeError: xxx is not a constructor) - 构造函数内部若返回一个对象,则以该对象为准;返回原始值(
string/number/etc)会被忽略 -
class语法本质是函数加语法糖,constructor内的this就是即将返回的实例
真正容易被忽略的是:所有绑定规则优先级有明确顺序——new > 显式绑定(bind/call) > 隐式绑定(对象方法) > 默认绑定(普通调用)。而箭头函数根本不在这个链条里,它从定义时就“抄了作业”。











