爲什麼是代理在ES2015一個Map對象不工作

Question

我正在通過谷歌的Chrome版本57.0.2987.133以下腳本：

var loggingProxyHandler = { 
 
    "get" : function(targetObj, propName, receiverProxy) { 
 
     let ret = Reflect.get(targetObj, propName, receiverProxy); 
 
     console.log("get("+propName.toString()+"="+ret+")"); 
 
     return ret; 
 
    }, 
 

 
    "set" : function(targetObj, propName, propValue, receiverProxy) { 
 
     console.log("set("+propName.toString()+"="+propValue+")"); 
 
     return Reflect.set(targetObj, propName, propValue, receiverProxy); 
 
    } 
 
}; 
 

 
function onRunTest() 
 
{ 
 
    let m1 = new Map(); 
 
    let p1 = new Proxy(m1, loggingProxyHandler); 
 
    p1.set("a", "aval"); // Exception thrown from here 
 
} 
 

 
onRunTest();

NOTE: Requires a browser supporting ES2015's Proxy

運行時，我看到了處理器的get陷阱被稱爲返回地圖的設定功能 然後我收到以下錯誤：

"Uncaught TypeError: Method Map.prototype.set called on incompatible receiver [object Object]" 
at Proxy.set (native) 
... 

我試過removin g loggingProxyHandler中的陷阱函數（使其成爲空對象），但仍然收到相同的錯誤。

我的理解是，代理對象應該能夠爲所有原生ES5和ES2015 JavaScript對象生成。數組似乎在相同的代理處理程序下工作良好。 我誤解了規格嗎？
我的代碼丟失了什麼？ Chrome中有沒有已知的錯誤？ （我做了搜索，發現Chrome的無缺陷對這個問題）。

Answer 1

你得到錯誤的原因是，代理未捲入了p1.set調用（比set陷阱其他  —無關，儘管名稱相同  —正在調用以檢索函數引用）。所以一旦檢索到函數引用，就會調用this設置爲代理，而不是Map   —其中Map不喜歡。

如果你真的試圖攔截在Map所有屬性訪問調用，您可以結合你從get返回任何函數引用修復它（見***線）：

var loggingProxyHandler = { 
 
    "get" : function(targetObj, propName, receiverProxy) { 
 
     let ret = Reflect.get(targetObj, propName, receiverProxy); 
 
     console.log("get("+propName.toString()+"="+ret+")"); 
 
     if (typeof ret === "function") { // *** 
 
      ret = ret.bind(targetObj);  // *** 
 
     }        // *** 
 
     return ret; 
 
    }, 
 

 
    "set" : function(targetObj, propName, propValue, receiverProxy) { 
 
     console.log("set("+propName.toString()+"="+propValue+")"); 
 
     return Reflect.set(targetObj, propName, propValue, receiverProxy); 
 
    } 
 
}; 
 

 
function onRunTest() 
 
{ 
 
    let m1 = new Map(); 
 
    let p1 = new Proxy(m1, loggingProxyHandler); 
 
    p1.set("a", "aval"); 
 
    console.log(p1.get("a")); // "aval" 
 
} 
 

 
onRunTest();

NOTE: Requires a browser supporting ES2015's Proxy

但是，如果您的目標只是攔截Map#get和Map#set，您根本不需要代理。或者：

1. 創建一個Map子類並實例化它。儘管如此，假設您控制Map實例的創建。

2. 創建一個繼承Map實例的新對象，並覆蓋get和set;你不必控制原始Map的創作。

3. 用您自己的版本替換Map實例上的set和get方法。

這裏的＃1：

class MyMap extends Map { 
 
    set(...args) { 
 
    console.log("set called"); 
 
    return super.set(...args); 
 
    } 
 
    get(...args) { 
 
    console.log("get called"); 
 
    return super.get(...args); 
 
    } 
 
} 
 

 
const m1 = new MyMap(); 
 
m1.set("a", "aval"); 
 
console.log(m1.get("a"));

＃2：

const m1 = new Map(); 
 
const p1 = Object.create(m1, { 
 
    set: { 
 
    value: function(...args) { 
 
     console.log("set called"); 
 
     return m1.set(...args); 
 
    } 
 
    }, 
 
    get: { 
 
    value: function(...args) { 
 
     console.log("get called"); 
 
     return m1.get(...args); 
 
    } 
 
    } 
 
}); 
 

 
p1.set("a", "aval"); 
 
console.log(p1.get("a"));

＃3：

const m1 = new Map(); 
 
const m1set = m1.set; // Yes, we know these are `Map.prototype.set` and 
 
const m1get = m1.get; // `get`, but in the generic case, we don't necessarily 
 
m1.set = function(...args) { 
 
    console.log("set called"); 
 
    return m1set.apply(m1, args); 
 
}; 
 
m1.get = function(...args) { 
 
    console.log("get called"); 
 
    return m1get.apply(m1, args); 
 
} 
 

 
m1.set("a", "aval"); 
 
console.log(m1.get("a"));