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。
