ES6：Proxy Reflect

Proxy

定義：Proxy 能夠理解爲在目標對象以外加一層「攔截」，外界對該對象的訪問，都必須會先通過這一層攔截，因些咱們能夠對外界的訪問作一些改寫與過濾，可譯爲「代理器」。

var proxy = new Proxy(target, handler);

target 就是想要代理的目標對象，handler 則是一個方法，在其中定義想要代理的一些操做。經常使用可代理操做列表以下：

• get(target, property, receiver)，攔截對象屬性的讀取
• set(target, property, value, receiver)，攔截對象屬性的設置
• has(target, property)，攔截 property in target 的操做，返回一個布爾值
• deleteProperty(target, property)，攔截 delete target[property]的操做，返回一個布爾值
• defineProperty(target, property, prop)，攔截 Object.defineProperty 的操做，返回一個布爾值
• apply(target, object, args)，攔截 函數的調用 、call 和 apply 操做

更多操做可查看MDN：https://developer.mozilla.org...

實際使用場景：

• 實現私有變量的訪問攔截

let person = {
    name: 'test',
    age: 23,
    _privateName: 'private name',
    _phone: '13888888888'
}
let personProxy = new Proxy(person, {
    get(target, prop) {
        if(prop.startsWith('_')){
            console.log('私有變量禁止訪問');
            return false;
        }
        return target[prop];
    },
    set(target, prop, value) {
        if(prop.startsWith('_')) {
            console.log('私有變量禁止修改');
            return false;
        }
        target[prop] = value;
    },
    has(target, prop) {
        return prop.startsWith('_') ? false : (prop in target);
    }
})
personProxy._phone;   // 私有變量禁止訪問
personProxy._phone = '13999999999';   // 私有變量禁止修改
'_phone' in personProxy;   // false
'name' in personProxy;    // true

• 設置對象屬性前進行校驗

let person = {
    phone: ''
}
let personProxy = new Proxt(person, {
    set(target, prop, value) {
        if(prop === 'phone') {
           let reg = 'xxx';
           if(!reg.test(value)){
               throw Error('validate error!')
           }
        }
        target[prop] = value;
    }
})

• Observe Function

function observe(obj, callback) {
    return new Proxy(obj, {
        set(target, prop, value) {
            callback(prop, value);
            target[prop] = value;
        }
    })
}
const bar = { open: false}
const barObserve = observe(bar, (prop, value) => {
    prop === 'open' && value ? alert('Opening!') : console.log('Waiting');
})
barObserve.open = true;  //  'Opening!'

Reflect

Reflect的方法與Proxy的方法一一對應 ，它能夠讓對 Object 的一切操做都變成函數形爲；好比 key in object => Reflect.has(key)、delect object[key] => Reflect.deleteProperty(object, key)。

let proxy = new Proxt({}, {
    get(target, prop) {
        return Reflect.get(target, name);
    },
    set(target, prop, value) {
        Reflect.set(target, prop, value);
    },
    has(target, prop) {
        return Reflect.has(target, prop);
    },
    deleteProperty(target, prop) {
        return Reflect.deleteProperty(target, prop);
    }
})

原文連接：https://arronf2e.github.io/post/es6-proxy-reflect