使用 javascript 代理拦截方法调用时的非法调用

Question

谁能解释一下下面的输出

var handler = {
  get: function(target,key, receiver){
    return new Proxy(Reflect.get(target, key, receiver),handler);
  }, 
  apply: function(target, thisArg, args){
    Reflect.apply(target, thisArg, args);
  }
}

var p = new Proxy(window, handler);
p.alert("Alert"); // Throws illegal invocation error

var alias = p.alert;
alias("Alert") // Even this works which is baffling for me

var p = new Proxy(Reflect.get(window, "alert"), handler);
p("Alert"); // works as expected

第一个语句抛出非法调用错误，而第二个则没有。他们两个看起来和我一样，我不明白第一个语句在 Reflect.apply

期间为什么没有所需的 this 上下文

Answer 1

只是 alert 需要 window 作为上下文，否则会抛出该错误。它与代理无关。这两个示例抛出相同的错误：

var obj = {};
alert.call(obj, "hello!");           // doesn't work!

和：

var obj = { alert: alert };
obj.alert("hello!");                 // doesn't work!

在您的代码中，如果您将 p.alert 的上下文设置为 window，它会起作用：

p.alert.call(window, "hello!");      // works!

var handler = {
  get: function(target, key, receiver) {
    return new Proxy(Reflect.get(target, key, receiver), handler);
  },
  apply: function(target, thisArg, args) {
    Reflect.apply(target, thisArg, args);
  }
}

var p = new Proxy(window, handler);
p.alert.call(window, "Alert");

您的代码中的其他两个示例有效，因为上下文是 window。

使用 javascript 代理拦截方法调用时的非法调用

Illegal invocation while intercepting method calls with javascript proxy

javascript

javascript-objects

es6-proxy