小知识 - 防抖节流函数为什么要用 call 或 apply 去执行 fn

小成C2023-08-05 14:36

在 JavaScript 中，防抖（Debounce）和节流（Throttle）函数是常用的性能优化技术，用于限制事件的触发频率。在实现防抖函数时，我们经常会使用 apply 或 call 来执行传入的函数 fn，尤其当 fn 是在对象或其他函数的作用域下定义时。

为什么要这么做呢？

当 fn 函数被包含在对象或其他函数内部时，其执行上下文中的 this 指向将会受到调用方式的影响。默认情况下，在非严格模式下，定时器内部的 this 指向全局对象 window，而不是 fn 原本所在的作用域对象。

这就意味着，如果直接调用 fn()，可能会导致 this 的错误绑定，从而导致代码无法按预期执行。

为了避免这个问题，我们使用 fn.apply(context, args) 或 fn.call(context, ...args) 来确保在执行 fn 函数时，明确指定函数内部的 this 指向为 context，从而保持函数在其原始作用域内正确执行。

示例代码：

ini 复制代码

javascriptCopy code
function debounce(fn, delay) {
  let timeoutId;
  
  return function() {
    const context = this;
    const args = arguments;
    
    clearTimeout(timeoutId);
    
    timeoutId = setTimeout(() => {
      fn.apply(context, args);
    }, delay);
  };
}

const app = {
  count: 0,
  doSomething() {
    this.count++;
    console.log(`Button clicked! Count: ${this.count}`);
  },
};

const debouncedFunction = debounce(app.doSomething, 1000);
debouncedFunction.call(app);

通过使用 call 或 apply，我们保证了防抖函数在执行时，正确地绑定了 this，使得 doSomething 函数能够在 app 对象的作用域内正确执行。

总结:

在编写防抖和节流函数时，特别注意这一点，确保你的代码在不同上下文中也能正确运行，避免因 this 绑定错误而导致的 bug。