ES6 Proxy

定义及用法

ES6引入了Proxy可以为代理对象的基本操作设置一些自定义操作；基本用法：

var p = new Proxy(target, handler);
typeof p === 'object';	// true

target：被代理对象，可以是任意类型的对象，包括数组、函数及proxy等；
handler：一个对象，其每个属性为函数，用于定义代理的行为；可以用于数据合法性校验或数据预处理等；

handler解析

handler.get(target, prop, receiver)

var target = {
    name: 'fn',
    age: 28,
    interests: ['book', 'movie']
}

handler = {
    get: function(target, prop, receiver) {
        if (prop === 'name') {
            return 'King: ' + target[prop];
        } else if (prop === 'age') {
            return '18 forever';
        } else if (prop === 'interests' && target[prop].length < 3) {
            return `You should have broad interests: ${target[prop]}`;
        }
    }
}

var p = new Proxy(target, handler);

handler.set(target, prop, value, receiver)

handler.has(target, prop)

has可以用于自定义私有变量等；

var target = {
    name: 'fn',
    age: 28,
    _foible: 'beauty',
    interests: ['book', 'movie']
}

handler = {
    get: function(target, prop, receiver) {
        if (prop === 'name') {
            return 'King: ' + target[prop];
        } else if (prop === 'age') {
            return '18 forever';
        } else if (prop === 'interests' && target[prop].length < 3) {
            return `You should have broad interests: ${target[prop]}`;
        }
    },
    set (target, prop, val, receiver) {
        return Reflect.set(...arguments);
    },
    has (target, prop) {    // 自定义私有变量
        if (prop[0] === '_') {
            return false;
        }
        return prop in target;
    }
}

var p = new Proxy(target, handler);
'_foible' in p;           // false
'_foible' in target;      // true
'name' in p;			  // true

---

参考文献

1. ECMAScript2015
2. ES6 Proxy