ES: Reflect & Proxy

[xvno]

[Refs]

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect

[xvno]

Reflect

静态方法

• Reflect.ownKeys (target)

• Reflect.getOwnPropertyDescriptor(target, propertyKey)

• Reflect.has(obj, name)

• Reflect.get(target, name, receiver)

• Reflect.set(target, name, value, receiver)

• Reflect.defineProperty(target, propertyKey, attributes)

• Reflect.deleteProperty(obj, name)

• Reflect.getPrototypeOf(obj)

• Reflect.setPrototypeOf(obj, newProto)

• Reflect.construct(target, args)

• Reflect.apply(func, thisArg, args)

• Reflect.isExtensible (target)

• Reflect.preventExtensions(target)

[xvno]

Proxy

静态方法:

• Proxy.revocable()

Proxy 实例的方法

• ownKeys()

• getOwnPropertyDescriptor()

• has()
• get()

• set()

• defineProperty()

• deleteProperty()

• getPrototypeOf()

• setPrototypeOf()

• apply()

• construct()

• isExtensible()
• preventExtensions()

[xvno]

使用 Proxy 实现观察者模式

function observe(obj) {
    let preCallbackSet = new Set();
    let sufCallbackSet = new Set();

    let proxy =  new Proxy(obj, {
        set (obj, key, value, receiver) {
            preCallbackSet.forEach(cb => {
                cb(obj, key, value);
            });
            Reflect.set(obj, key, value, receiver);
            sufCallbackSet.forEach(cb => {
                cb(obj, key, value);
            });
        }
    })

    proxy.subPre = function(fn) {
        preCallbackSet.add(fn);
    }
    proxy.subSuf = function(fn) {
        sufCallbackSet.add(fn);
    }

    return proxy;
}

let o = {name: 'o'};
let po = observe(o);

o.subPre(function(obj, k, v) {
    console.log('Changing...');
});

o.subPre(function(obj, k, v) {
    console.log(obj, k, v);
});

o.subSuf(function(obj, k, v) {
    console.log(obj, k, v);
});

o.subSuf(function(obj, k, v) {
    console.log('Changed!!!');
});

po.age = 11;
po.age = 12;

[xvno]

preventExtensions & isExtensible

function observe(obj) {
    let preCallbackSet = new Set();
    let sufCallbackSet = new Set();
    let prevented = !Reflect.isExtensible(obj);
    console.log(prevented, '...')
    let proxy =  new Proxy(obj, {
        set (obj, key, value, receiver) {
            preCallbackSet.forEach(cb => {
                cb(obj, key, value);
            });

            Reflect.set(obj, key, value, receiver);
            sufCallbackSet.forEach(cb => {
                cb(obj, key, value);
            });
        },
        get(obj, key) {
            if(key === 'isPrevented') {
                return prevented;
            } else {
                return Reflect.get(obj, key);
            }

        }
    })

    proxy.subPre = function(fn) {
        preCallbackSet.add(fn);
    }
    proxy.subSuf = function(fn) {
        sufCallbackSet.add(fn);
    }
    proxy.preventExtensions = function() {
        prevented = true;
        Reflect.preventExtensions(obj)
    }

    return proxy;
}

let o = {name: 'o'};
let po = observe(o);

o.subPre(function(obj, k, v) {
    console.log('Changing...');
});

o.subPre(function(obj, k, v) {
    console.log(obj, k, v);
});

o.subSuf(function(obj, k, v) {
    console.log(obj, k, v);
});

o.subSuf(function(obj, k, v) {
    console.log('Changed!!!');
});

po.age = 11;
po.age = 12;

console.log(!Reflect.isExtensible(o))
console.log(po.isPrevented)
po.preventExtensions();
console.log(!Reflect.isExtensible(o))
console.log(po.isPrevented)