我可以使用ES2015课程扩展代理吗？

Question

我试图扩展代理,如下:

class ObservableObject extends Proxy {}

我使用Babel将其转换为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

好吧,我已经忘记了这个问题,但最近有人提出了这个问题.即使您在技术上无法扩展代理,也有一种方法可以强制类实例化为代理并强制其所有子类实例化为具有相同属性描述符函数的代理(我只在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 2

不,ES2015课程不能延长Proxy¹.

代理对象具有非常非典型的语义,在ES2015中被认为是"异国情调的对象",这意味着它们"没有一个或多个必须由所有对象支持的基本内部方法的默认行为".它们没有任何原型,这是您通常可以获得所扩展类型的大部分行为的地方.从规范中的第26.2.2节:"代理构造函数的属性":

该Proxy构造不具有prototype的性质,因为代理异国对象没有[[原型]]内部需要初始化插槽.

这不是巴别塔的限制.如果您尝试Proxy在Chrome中扩展,它本身支持它和类语法,您仍会收到类似的错误:

未捕获的TypeError:类扩展值没有未定义的有效原型属性

_{¹ "否"是实际答案.然而,亚历山大·奥马拉指出,如果你为Proxy.prototype(总计!)分配一个值,它至少可以扩展,至少在某些浏览器中.我们对此进行了一些实验.由于外来代理实例的行为,这不能用于完成包装构造函数的功能,并且某些行为在浏览器之间似乎不一致(我不确定规范期望什么如果你这样做).请不要在严肃的代码中尝试这样的事情.}

Answer 3

来自@John L. self response:
在构造函数中我们可以使用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)

Answer 4

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

d = 新的 c1(); 达 = 123;