我可以使用ES2015類來擴展Proxy嗎？

Question

我試圖擴大代理，像這樣：

class ObservableObject extends Proxy {} 

我用巴貝爾將其transpile到ES5，我得到這個錯誤在瀏覽器：

app.js:15 Uncaught TypeError: Object prototype may only be an Object or null: undefined 

我看着這行代碼它指出。下面的代碼與指向問題的代碼行的箭部分：

var ObservableObject = exports.ObservableObject = function (_Proxy) { 
    _inherits(ObservableObject, _Proxy); // <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 

    function ObservableObject() { 
     _classCallCheck(this, ObservableObject); 

     return _possibleConstructorReturn(this, Object.getPrototypeOf(ObservableObject).apply(this, arguments)); 
    } 

    return ObservableObject; 
}(Proxy); 

有誰知道爲什麼我可能會得到這個錯誤？這是巴別爾的一個錯誤嗎？當您嘗試擴展代理時應該發生什麼？

Answer 1

沒有，一個ES2015類不能延伸Proxy 。

代理對象具有非常非典型的語義，在ES2015中被認爲是「異域對象」，意味着它們「不具有一個或多個必須由所有對象支持的基本內部方法的默認行爲」。他們沒有任何原型，這是您通常會爲您正在擴展的類型獲取大部分行爲的原型。 From section 26.2.2: "Properties of the Proxy Constructor" in the specification：

The Proxy constructor does not have a prototype property because proxy exotic objects do not have a [[Prototype]] internal slot that requires initialization.

這不是巴別塔的限制。如果試圖在Chrome中，它和類的語法都原生支持擴展Proxy，你仍然會得到類似的錯誤：

Uncaught TypeError: Class extends value does not have valid prototype property undefined

_{「否」是實際的答案。但是，Alexander O'Mara指出，如果您爲Proxy.prototype（總數！）指定值，則至少在某些瀏覽器中可以擴展。 We experimented with this a little。由於異常代理實例的行爲，這不能用於完成比使用包裝構造函數的函數更多的功能，並且某些行爲在瀏覽器之間看起來並不一致（我不確定規範期望的結果如果你這樣做）。請不要以嚴肅的代碼嘗試這樣的事情。}

Answer 2

巴別爾不支持代理，只是因爲它不能。因此，直到瀏覽器添加支持，它不存在。

從巴別文檔： 「不支持的特徵 由於ES5的限制，代理不能transpiled或polyfilled」

Answer 3

class c1 { 
    constructor(){ 
     this.__proto__ = new Proxy({}, { 
      set: function (t, k, v) { 
       t[k] = v; 
       console.log(t, k, v); 
      } 
     }); 
    } 
} 

d = new c1（）; d.a = 123;

Answer 4

嗯，我已經忘記了這個問題，但最近有人提出了這個問題。儘管你在技術上無法擴展代理，但有一種方法可以強制類實例化爲代理並強制其所有子類實例化爲具有相同屬性描述符函數的代理（我只在Chrome中測試過）：

class ExtendableProxy { 
    constructor() { 
     return new Proxy(this, { 
      set: (object, key, value, proxy) => { 
       object[key] = value; 
       console.log('PROXY SET'); 
       return true; 
      } 
     }); 
    } 
} 

class ChildProxyClass extends ExtendableProxy {} 

let myProxy = new ChildProxyClass(); 

// Should set myProxy.a to 3 and print 'PROXY SET' to the console: 
myProxy.a = 3; 

Answer 5

class A { } 

class MyProxy { 
    constructor(value, handler){ 
    this.__proto__.__proto__ = new Proxy(value, handler); 
    } 
} 


let p = new MyProxy(new A(), { 
    set: (target, prop, value) => { 
    target[prop] = value; 
    return true; 
    }, 
    get: (target, prop) => { 
    return target[prop]; 
    } 
}); 

console.log("p instanceof MyProxy", p instanceof MyProxy); // true 
console.log("p instanceof A", p instanceof A); // true 

p是種MyProxy，它是由同時類的A延長。 A不是原始的原型，而是代理的，有點。

Answer 6

來自@John L.自我回應：
在構造函數內部，我們可以使用Proxy來包裝新創建的實例。無需擴展代理。

實施例，提供從現有Point類的觀測點：

class Point { 

    constructor(x, y) { 
     this.x = x 
     this.y = y 
    } 

    get length() { 
     let { x, y } = this 
     return Math.sqrt(x * x + y * y) 
    } 

} 

class ObservedPoint extends Point { 

    constructor(x, y) { 

     super(x, y) 

     return new Proxy(this, { 
      set(object, key, value, proxy) { 
       if (object[key] === value) 
        return 
       console.log('Point is modified') 
       object[key] = value 
      } 
     }) 
    } 
} 

測試：

p = new ObservedPoint(3, 4) 

console.log(p instanceof Point) // true 
console.log(p instanceof ObservedPoint) // true 

console.log(p.length) // 5 

p.x = 10 // "Point is modified" 

console.log(p.length) // 5 

p.x = 10 // nothing (skip)