时间戳

首页 > 解决方案 > 当 cachel.delete 分配给变量时，为什么“无法在 'Cache' 上执行 'delete'：非法调用”？

javascript - 当 cachel.delete 分配给变量时，为什么“无法在 'Cache' 上执行 'delete'：非法调用”？

问题描述

我试图将cache.delete本机函数作为参数传递，以使我的代码更容易测试。

但是当我这样做时：

const cacheDeleteFunction = cache.delete;
await cacheDeleteFunction(request);

它失败并Failed to execute 'delete' on 'Cache': Illegal invocation出现错误。

相同的代码，但直接调用await cache.delete(request)作品。

另外，如果我这样做：

const cacheDeleteFunction = (x) => cache.delete(x);
await cacheDeleteFunction(request);

然后它也有效！

我试过玩，.apply()但.call()他们没有任何区别。

(async () => {
    const cache = await caches.open('1');
    try {
        await cache.add(new Request('?apple'));
        await cache.add(new Request('?google'));
    } catch (e) {}
    const keys = await cache.keys();
    for (const request of keys) {
        if (request.url.includes('apple')) {
            // Failed to execute 'delete' on 'Cache': Illegal invocation
            // const cacheDeleteFunction = cache.delete;
            // await cacheDeleteFunction(request);


            // Works
            await cache.delete(request);

            // Also works
            // const cacheDeleteFunction = (x) => cache.delete(x);
            // await cacheDeleteFunction(request);
        }
    }
})();

我错过了什么？为什么const cacheDeleteFunction = cache.delete;不起作用？

相关问题：https ://github.com/noahjohn9259/react-clear-cache/pull/36/files

标签： javascriptfunctional-programmingbrowser-cache

解决方案

问题可能是因为删除函数引用了“this”。因此，当您在不使用 bind 的情况下获得对它的引用时， this 将是未定义的。所以你需要做的是：

const deleteFunction = cache.delete.bind(cache);

推荐阅读