防抖中this和arguments的问题

// 防抖
function debounce(fn, delay = 500) {
    // timer 是闭包中的
    let timer = null

    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            // 这里的this指向触发keyup事件的元素
            fn.apply(this, arguments)
            timer = null
        }, delay)
    }
}

input1.addEventListener('keyup', debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}, 600))

老师请问

fn.apply(this, arguments)

这里的argument指什么，e又是怎么传进去的？

debounce(function (e) {
    console.log(e.target)
    console.log(input1.value)
}

bobbylee 2022-04-10

源自：JavaSript面试课 10-3 手写防抖 debounce

收起

1回答

好帮手慕慕子回答被采纳获得+3积分 2022-04-10 14:23:45

同学你好，对于你的问题解答如下：

1、arguments指的是获取传入函数中的所有参数。由于箭头函数中不存在arguments，所以这里的arguments指的是获取调用下图选中的函数时，传入的所有参数

2、具体可以参考如下解析：

给input1绑定keyup事件时，由于addEventListener方法的第二个参数是一个“函数的调用”，所以debounce函数的返回值，是keyup的事件处理函数，如下：

即：keyup事件触发时，实际执行就是上图中选中的函数（return 后面那个function(){}），事件触发时，会默认往事件处理函数中，传递一个参数e（事件对象），而由于调用debounce时，传入了两个参数，传入的第一个参数，就是fn，具体可以结合下图标注理解：

祝学习愉快~

收起回答

精慕门5305869 #1

老师，这里的arguments即e吗？为什么不直接写e就好了？

2022-08-24 21:00:59
好帮手慕慕子回复精慕门5305869 #2

问题解答如下：
1、这里的arguments确实接收的是e。
2、因为e是系统调用keyup事件函数处理函数传入的参数，fn.apply(this,arguments) 这句代码所在作用域中并没有设置e，所以老师直接使用arguments来获取return 返回的函数中接受的参数。
祝学习愉快~

2022-08-25 09:54:10
精慕门5305869 回复好帮手慕慕子 #3

好的，谢谢子老师

2022-08-25 12:56:23