为什么 "Failed to execute 'delete' on 'Cache': Illegal invocation" 当 cachel.delete 被分配给变量？

Question

我正在尝试将 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

Answer 1

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

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

为什么 "Failed to execute 'delete' on 'Cache': Illegal invocation" 当 cachel.delete 被分配给变量？

Why "Failed to execute 'delete' on 'Cache': Illegal invocation" when cachel.delete is assigned to variable?

javascript

functional-programming

browser-cache