有人可以解释 JavaScript 中的 'this' in debounce 函数吗？

Question

使用这个 debounce 函数：

function debounce(fn, delay) {
    var timer
    return function () {
      var context = this
      var args = arguments
      clearTimeout(timer)
      timer = setTimeout(function () {
        fn.apply(context, args)
      }, delay)
    }
  }

谁能解释为什么我应该只使用 fn.apply(context,args) 而不是 fn()？

我知道 .apply 会更改上下文，而 var context = this 会使上下文始终与 fn() 中的上下文相同。我找不到使用 fn() 和 fn.apply(context, args) 给出不同结果的场景。

有人能给我举个例子吗？

Answer 1

考虑以下 class：

class Foo {
  constructor () {
    this.a = 'a';
    this.bar = debounce(this.bar, 500);
  }

  bar () {
    console.log(this.a);
  }
}

const foo = new Foo();
foo.bar();
foo.bar();
foo.bar();

那么记录什么，什么时候记录，记录多少次？您将看到一个值被记录，一次，在最后一次调用后大约半秒。根据您发布的定义，您会看到 a。如果省略上下文部分，您将看到 undefined:

function debounceWithoutCtx(fn, delay) {
    var timer
    return function (...args) {
      clearTimeout(timer)
      timer = setTimeout(function () {
        fn(...args)
      }, delay)
    }
 }

有人可以解释 JavaScript 中的 'this' in debounce 函数吗？

Can someone explain the 'this' in debounce function in JavaScript?

javascript

debouncing