this的值由调用方式动态决定，而非定义位置；obj.method()中this为obj，独立调用时非严格模式下为window/globalThis，严格模式下为undefined，箭头函数则继承外层普通函数的this。
普通函数中 this 的值由调用方式决定
JavaScript 中 this 不是定义时绑定的，而是执行时根据「谁调用了这个函数」动态确定的。常见误区是以为它取决于函数写在哪、属于哪个对象，其实只看调用表达式左侧的「点前面是谁」。
比如：obj.method() 中 this 是 obj；func() 单独调用时，在非严格模式下是 window（浏览器）或 globalThis（Node.js），严格模式下是 undefined。
-
call、apply、bind可显式指定this值 - 构造函数调用（
new Fn()）时，this指向新创建的实例 - 事件处理器中，
this通常指向绑定事件的 DOM 元素（除非用箭头函数或手动绑定）
箭头函数没有自己的 this，它继承外层作用域的 this
箭头函数不绑定 this，也不支持 call/apply/bind 改变它。它的 this 值在定义时就固定了，等于定义位置所在函数作用域的 this。
这导致它无法用作需要动态 this 的场景，比如对象方法、原型方法、事件监听器（若需访问实例属性）。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
立即学习“Java免费学习笔记（深入）”；
const obj = {
name: 'Alice',
regular() {
console.log(this.name); // 'Alice'
},
arrow: () => {
console.log(this.name); // undefined（this 是全局对象，没有 name）
},
wrapper() {
const inner = () => {
console.log(this.name); // 'Alice' —— 继承 wrapper 的 this
};
inner();
}
};
容易踩的坑：事件监听 + 箭头函数 + 类方法
在类中用箭头函数定义方法并绑定到事件，看似简洁，但会丢失对实例的正确引用——因为箭头函数的 this 是定义时外层的 this，而类体顶层没有 this（类体不是函数作用域），此时 this 是 undefined（严格模式）或全局对象。
- 错误写法：
handleClick = () => { console.log(this.value); }在类字段中定义，但this并非指向实例（Chrome 早期版本曾有 bug 表现为指向实例，但不符合规范） - 正确做法：用普通函数 +
bind(this)，或在构造函数中赋值，或使用事件回调内联箭头函数（onClick={() => this.handleClick()}） - Vue/React 等框架组件中，生命周期或渲染函数内的箭头函数，其
this指向取决于该函数定义时所在函数的this，不是组件实例本身
判断 this 指向的实操建议
别猜，直接打印。遇到不确定的 this，加一句 console.log('this:', this) 最快定位问题。
- 检查调用形式：是
obj.fn()？还是fn()？还是setTimeout(fn, 100)？后者等价于独立调用 - 查是否被箭头函数包裹：只要函数体是
=>，立刻跳过「调用时绑定」逻辑，回溯到上一个普通函数作用域 - 注意 class 字段语法：类中
method = () => {}是在构造函数中隐式赋值，但其内部this仍取决于字段初始化时的外层作用域（通常是全局）
最麻烦的不是规则难记，而是不同上下文嵌套时，外层作用域的 this 本身就不明确——比如在 setTimeout 里写箭头函数，它的 this 来自 setTimeout 所在函数，而不是定时器回调触发时的环境。
