带有调用/应用/绑定的箭头函数答案

【问题标题】：Arrow functions with call/apply/bind带有调用/应用/绑定的箭头函数
【发布时间】：2021-08-03 15:38:06
【问题描述】：

Mozilla 开发者网络声明 call、bind 和 apply 不应与箭头函数一起使用。这是有道理的，因为它们从定义它们的位置获取父级的上下文并自己使用它。

现在，下面是我在一些视频中看到的“去抖动”的一些代码。使用apply 甚至可以在这里做点什么吗？

const getData = () => {

}

const debounce = function(fn, d) {
    let timer;
    return function() {
        let context = this,
        args = arguments;
        clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(context, arguments);
        }, d);
    }
}

编辑：在 debounce 函数中将 getData 更改为 fn。

【问题讨论】：

由于箭头函数不绑定 this，所以不能使用 bind、call 或 apply 来改变“上下文”。而是使用“常规”功能。 --- 编辑：这些方法仍然可以用来改变参数
.apply()、.call() 和 .bind()，与箭头函数的工作原理相同除了不改变this 的值。很多时候this 没有被使用，所以你是否在箭头函数上调用f.apply(context, arguments) 并不重要。如果它确实很重要，那么您需要确保f 是一个常规函数。

标签： javascript web ecmascript-6 debouncing

【解决方案1】：

context 参数什么都不做（因为它设置了this 而你不能对箭头函数这样做）。

arguments 数组确实被应用了。

如果您是专门为箭头函数编写代码，那么惯用的方法是散布参数：

getData(...arguments);

在此特定上下文中，debounce 函数可以处理传递给 fn 的任何类型的函数（您应该在超时内使用 fn 而不是 getData）。

如果你传入一个非箭头函数，那么返回的函数将使this 正常工作。

如果你传入一个箭头函数，那么返回的函数将有this 不被改变（但也照常！）。

【讨论】：

谢谢。我几乎确信它不会有任何效果，但我在一些视频中看到它并感到困惑。