鍍金池/ 問答/HTML/ 看了別人實(shí)現(xiàn)的節(jié)流代碼，十分不理解這個(gè)閉包里this，arguments的含義，

看了別人實(shí)現(xiàn)的節(jié)流代碼，十分不理解這個(gè)閉包里this，arguments的含義，望指點(diǎn)一二

function throttle(fn,interval){
var timer,
    isFirst = true;
return function(){
//////////////////////////////////////////////////////////////////////
    var args = arguments,      就是這里了
        that = this;
///////////////////////////////////////////////////////////////////////
    if(isFirst){
        fn.apply(that,args)
        return isFirst = false
    }
    if(timer){
        return
    }
    timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null
        fn.apply(that,args)
    }, interval || 1000);
}   
}
回答
編輯回答
筱饞貓

arguments 是當(dāng)前函數(shù)被調(diào)用時(shí)傳入的參數(shù)，這個(gè)是特殊的內(nèi)建參數(shù)，換個(gè)方法塊它的值就不一樣了，所以用 var args = arguments 來拷貝一份當(dāng)前函數(shù)被調(diào)用時(shí)的參數(shù)。

var that = this 同樣是拷貝一份當(dāng)前的上下文，或者說 this 指向。

這兩行代碼是為了下面定時(shí)器內(nèi)調(diào)用所做的一次拷貝，這涉及到 this 指向、作用域等等一系列知識(shí)點(diǎn)。

2017年11月21日 07:46
編輯回答
乞許

這個(gè)應(yīng)該就是習(xí)慣性寫法。
在這段代碼的情形下，并不涉及構(gòu)造closure造成的context變化，不做這一步轉(zhuǎn)引也一樣能正常運(yùn)行。

2018年6月11日 10:24
編輯回答
淺時(shí)光

首先你要明白，throttle的功能是接受一個(gè)函數(shù)并返回一個(gè)新的函數(shù)，這個(gè)函數(shù)有節(jié)流的功能。

用法會(huì)是這樣:

function handleClick(param) {console.log('clicked', param)};

const throttledHandleClick = throttle(handleClick, 2000)

// 下面的代碼只會(huì)打印一次clicked
throttledHandleClick('p')
throttledHandleClick('p')
throttledHandleClick('p')

所以你說的arguments其實(shí)就是

{
 0 : 'p',
}
如果你不 fn.apply(that,arguments)，而是fn() 那么參數(shù)就會(huì)丟失

關(guān)于this，個(gè)人感覺this應(yīng)該取決于生成函數(shù)時(shí)候的執(zhí)行方式，throttle(handleClick, 2000), 所以this就是window。 而不是如你寫的取決于最終函數(shù)throttledHandleClick的調(diào)用方式。

如果按照我的理解應(yīng)該這么寫：

function throttle(fn,interval){
    var timer,
        isFirst = true;
        that = this; // 注意這里
return function(){
    if(isFirst){
        fn.apply(that,arguments)
        return isFirst = false
    }
    timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null
        fn.apply(that,arguments)
    }, interval || 1000);
}   
}
2017年10月6日 14:12