防抖函数中this丢失本质是执行上下文丢失，解决方案有三：一是func.bind(context)显式绑定；二是防抖内部用func.apply(this, args)转发；三是类中用箭头函数属性绑定this。
防抖函数内部的 this 指向问题，本质是函数执行时上下文丢失导致的。默认情况下，防抖后返回的新函数被单独调用（如作为事件回调），this 会指向全局对象（非严格模式）或 undefined（严格模式），而非原函数绑定的对象。
使用 bind 显式绑定 this
在创建防抖函数时，把原始函数和它的 this 一起绑定，再传入防抖逻辑：
- 先用
func.bind(context)固定原始函数的this - 再把这个已绑定的函数传给防抖函数处理
- 适用于明确知道调用对象的场景，比如类方法、对象方法
示例：
const obj = { value: 42, handleClick() { console.log(this.value); } };const debounced = debounce(obj.handleClick.bind(obj), 300);
button.addEventListener('click', debounced); // 点击时输出 42
在防抖函数内部用 apply 或 call 转发 this
更通用的做法是在防抖函数执行原始函数时，手动把当前调用的 this 和参数传过去：
- 防抖函数返回的闭包中，用
func.apply(this, args)调用原函数 - 这样能保留事件触发时的真实上下文（比如 DOM 元素、React 组件实例等）
- 适合需要动态
this的场景，比如事件监听器、箭头函数外的普通函数
示例（防抖函数实现片段）：
function debounce(func, delay) {let timeout;
return function(...args) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(this, args); // 关键：转发 this 和参数
}, delay);
};
}
用箭头函数避免 this 丢失（需配合正确写法）
箭头函数不绑定自己的 this，它会沿作用域链向上找外层的 this。但要注意：
- 不能直接把箭头函数传给防抖（因为它没有自己的
this，且无法被bind改变） - 可在对象方法中用箭头函数定义逻辑，再防抖包装外层普通函数
- 更推荐的方式是：在类中将方法定义为箭头函数属性，再防抖——此时
this已被绑定到实例
示例（Class 中）：
class Handler {constructor() {
this.value = 100;
this.handleClick = debounce(() => {
console.log(this.value); // this 指向实例，没问题
}, 300);
}
}
React 中常见陷阱与建议
在函数组件中使用防抖，this 不是问题（无 this），但闭包中的 props/state 可能过期：
- 不要在防抖函数里直接读取 props 或 state，要用
useRef缓存最新值 - 如果必须用 class 组件，优先用箭头函数定义方法，或在
render中绑定this - 第三方库如
lodash.debounce默认不处理this，需手动bind或用options.leading/trailing配合apply方式封装
