this 在函数调用时绑定，按 new > 显式 > 隐式 > 默认优先级确定；箭头函数无 this，继承外层；常见丢失场景需用 bind、箭头函数或属性初始化修复。
理解 this 的绑定时机和规则
JavaScript 中的 this 不是在函数定义时确定的，而是在函数被**调用时**才决定指向谁。它不取决于函数在哪定义、怎么定义，只取决于函数以何种方式被调用。四大绑定规则（按优先级从高到低）是：
- new 绑定：构造函数调用，this 指向新创建的对象
- 显式绑定：通过 call、apply、bind 强制指定 this
- 隐式绑定：方法调用形式 obj.foo()，this 指向 obj
- 默认绑定：独立调用（如 foo()），非严格模式下指向 window（浏览器），严格模式下为 undefined
常见“丢失 this”的场景与修复方案
最典型的坑是把对象方法赋值给变量或传入回调后，this 指向意外丢失：
-
事件监听器中：
btn.addEventListener('click', obj.handleClick)→ this 变成 btn 或 undefined。修复：用 bind(obj)、箭头函数封装、或在 class 中用属性初始化语法handleClick = () => { ... } -
定时器/异步回调：
setTimeout(obj.method, 100)→ 默认绑定生效。修复：改用setTimeout(() => obj.method(), 100)或setTimeout(obj.method.bind(obj), 100) -
数组方法回调：
arr.map(obj.method)→ 同样丢失。修复：传入obj.method.bind(obj)，或用arr.map(item => obj.method(item))，更推荐用 箭头函数 或提前绑定
箭头函数不是万能解药，但有明确边界
箭头函数没有自己的 this，它会沿作用域链向上查找外层普通函数的 this 值。这意味着：
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 它不能用 call/apply/bind 改变 this
- 不能作为构造函数（无 prototype，调用 new 报错）
- 适合封装回调、保持外层上下文，但**不能替代需要动态 this 的方法设计**（比如 Vue/React 类组件中需依赖实例状态的方法，若写成箭头函数反而无法访问 this.state）
实用防坑建议：三招落地
写代码时可主动规避问题：
- 优先使用箭头函数处理回调，尤其在事件、Promise.then、setTimeout、map/filter 等场景
-
类方法需被外部引用时，统一在 constructor 或字段中绑定：
this.handleClick = this.handleClick.bind(this)或handleClick = () => {...} -
调试时快速判断 this：在函数开头加
console.log(this)；或在 Chrome DevTools 中断点后，在控制台直接输入 this 查看当前值
一句话总结核心逻辑
this 是调用时的产物，不是函数的属性；绑定顺序固定，显式 > 隐式 > 默认；箭头函数跳过绑定规则，直接继承外层；防坑的关键不是死记规则，而是养成「调用方式决定 this」的直觉，并在高频丢失场景（回调、赋值、异步）主动加固。
