为何将Cache.delete方法赋值给变量后调用会触发“Failed to execute 'delete' on 'Cache': Illegal invocation”错误？

你遇到的问题核心在于函数的this上下文丢失。当你执行const cacheDeleteFunction = cache.delete;时，你只是把delete这个函数本身从cache实例上摘了出来，但没有带上它原本的this指向——也就是那个具体的Cache实例。

Cache接口的delete方法内部依赖this来指向当前操作的缓存实例，当你直接调用cacheDeleteFunction(request)时，this会变成全局对象（非严格模式下）或者undefined（严格模式下），这完全不符合方法的预期，所以浏览器才会抛出"Failed to execute 'delete' on 'Cache': Illegal invocation"的错误。

• 直接调用await cache.delete(request)：这种方式是通过cache实例来调用方法的，JavaScript会自动把this绑定到调用这个方法的对象（也就是cache）上，所以方法内部能正确识别要操作的缓存实例。
• 箭头函数包裹：箭头函数不会创建自己的this上下文，它会直接捕获外层作用域中的变量。这里cache.delete(x)直接引用了外层的cache变量，相当于还是通过实例调用方法，自然不会有this绑定的问题。

如果你想直接把delete方法赋值给变量使用，需要手动把this绑定到cache实例上，有两种常用方式：

1. 使用bind()方法（最推荐的方式）：

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

bind()会返回一个新函数，这个函数的this会永久绑定到你传入的cache参数上，无论后续怎么调用它，this都不会变。

2. 使用call()/apply()手动指定this：
   如果你之前尝试这两个方法没成功，大概率是没传对第一个参数。call和apply的第一个参数就是用来指定函数执行时的this指向的：

const cacheDeleteFunction = cache.delete;
// 使用call
await cacheDeleteFunction.call(cache, request);
// 或者使用apply（适合参数是数组的场景）
await cacheDeleteFunction.apply(cache, [request]);

简单来说，所有依赖实例上下文的方法，都不能直接单独提取出来调用——必须保证它的this指向原实例，要么通过实例直接调用，要么手动绑定上下文，要么用箭头函数间接引用。

内容的提问来源于stack exchange，提问作者Maxim Mazurok