17370845950

JavaScript中this的指向由函数调用方式决定：普通调用指向全局对象或undefined，对象方法调用指向点前对象，构造调用指向新实例，call/apply/bind显式绑定指定对象，箭头函数继承外层this。

JavaScript 中 this 的指向不是看函数怎么定义的，而是看它**怎么被调用的**——也就是函数执行时的调用方式决定了 this 绑定的对象。

调用方式决定 this（核心规则）

绝大多数情况下，this 的值由函数调用时的「调用位置」和「调用语法」直接决定，和函数定义的位置、是否在对象里、是否嵌套无关。

• 普通函数调用（如 foo()）：非严格模式下 this 指向全局对象（浏览器是 window），严格模式下是 undefined
• 对象方法调用（如 obj.method()）：this 指向调用它的那个对象（obj），注意只看「点前面是谁」
• 构造函数调用（new Foo()）：this 指向新创建的实例对象
• 显式绑定（call/apply/bind）：this 被明确指定为第一个参数
• 箭头函数：不绑定自己的 this，而是沿用外层普通函数作用域中的 this 值（词法绑定）

常见误区与掉坑场景

很多问题其实源于混淆了「定义」和「调用」：

• 把对象方法赋值给变量后调用：const fn = obj.method; fn(); → 此时已脱离对象，this 不再是 obj
• 回调函数中丢失 this：btn.addEventListener('click', obj.handler) → 点击触发时是 DOM 元素调用 handler，this 指向按钮，不是 obj
• 嵌套函数误以为继承外层 this：普通函数内部的普通函数，this 不会自动继承，而是按自身调用方式决定（常变成 window 或 undefined）
• 箭头函数滥用：在需要动态 this 的场景（如 Vue/React 的事件方法、定时器回调需访问实例）用了箭头函数，反而无法拿到预期对象

实用解决策略

不是靠死记规则，而是用简单可靠的方式控制 this 行为：

• 优先使用箭头函数：适用于不需要动态 this 的场合（如事件回调、定时器、Promise 回调中要访问外层实例）
• 显式绑定 this：用 .bind(obj)、或调用时用 func.call(obj, ...) / func.apply(obj, [...])
• 用属性赋值方式保留上下文：const self = this; 在外层保存，内层函数用 self 替代 this（兼容性好，但略显冗余）
• class 中用 public class fields + 箭头函数（现代写法）：handler = () => { console.log(this); }，天然绑定实例

快速判断 this 的三步法

遇到不确定时，按顺序问自己三个问题：

• 这个函数是用 new 调用的吗？→ 是：this 是新实例
• 是用 call/apply/bind 显式调用的吗？→ 是：this 是传入的第一个参数
• 是通过对象点语法调用的吗？（obj.fn()）→ 是：this 是点前面的对象；否则就是普通调用（看严格模式）

箭头函数跳过以上所有，直接取外层最近的非箭头函数的 this。