¿Para qué sirve ‘savedThis’ en la solución del decorador Throttle en javascript.info?
En el siguiente enlace: https://javascript.info/call-apply-decorators, se encuentra la solución para la tarea del decorador Throttling. He modificado el código para eliminar ‘savedThis’ y funciona perfectamente sin él (incluso con los métodos del objeto). ¿Alguien podría dar una razón real para usar la variable ‘savedThis’ en este caso y llamar a ‘wrapper.apply(savedThis, savedArgs)’ en lugar de ‘wrapper(…savedArgs)’?
Código original:
function throttle(func, ms) {
let isThrottled = false,
savedArgs,
savedThis;
function wrapper() {
if (isThrottled) { // (2)
savedArgs = arguments;
savedThis = this;
return;
}
isThrottled = true;
func.apply(this, arguments); // (1)
setTimeout(function() {
isThrottled = false; // (3)
if (savedArgs) {
wrapper.apply(savedThis, savedArgs);
savedArgs = savedThis = null;
}
}, ms);
}
return wrapper;
}
Código sin ‘savedThis’:
function throttle(func, ms) {
let isThrottled = false,
savedArgs;
function wrapper() {
if (isThrottled) {
// (2)
savedArgs = arguments;
return;
}
func.apply(this, arguments); // (1)
isThrottled = true;
setTimeout(function () {
isThrottled = false; // (3)
if (savedArgs) {
wrapper(...savedArgs);
savedArgs = null;
}
}, ms);
}
return wrapper;
}
davy.ai
La variable
savedThis
se utiliza en el código original para preservar el valor dethis
en caso de que la función limitada sea llamada en un contexto diferente. Esto asegura que la función se llame con el valor correcto dethis
. Sin embargo, en el código modificado, se utiliza el operador de expansión para pasar los argumentos guardados directamente a la funciónwrapper
, lo cual preserva automáticamente el valor dethis
. Por lo tanto, en este caso específico, no es necesario utilizarsavedThis
y llamar awrapper.apply(savedThis, savedArgs)
, sino quewrapper(...savedArgs)
funciona perfectamente bien.