ES6新特性：Proxy； 要使用的话， 直接在浏览器中执行即可， node和babel目前还没有Proxy的polyfill;，要使用的话，直接在浏览器中运行就好了， 浏览器的兼容性为：chrome>49或者firefox>18；
Proxy的基本使用：
Proxy如其名， 它的作用是在对象和和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值， 以及实例化等等多种操作， 都会被拦截住， 经过这一层我们可以统一处理，我们可以认为它就是“代理器” ;
Proxy是一个构造函数， 使用new Proxy创建代理器， 第一个参数为一个对象， 第二个参数也为一个对象， 返回被包裹后的代理器， 我们使用基本的get和set写一个demo：
<script>
var obj = new Proxy({}, {
get : function( target , prop ) {
console.log("我要获取值了");
return target[prop];
},
set : function( target, prop, value) {
console.log("我要设置值了");
target[prop] = value;
}
});
obj.vvvv = ;
obj.vvvv;
</script>
如果实例化的时候不给第二个参数设置get和set, 相当于没有这个代理器：
var obj = new Proxy({},{});
obj.vvvv = ;
console.log( obj.vvvv );
如果给一个对象设置两个代理器或者更多的话， 所有的代理器都会生效：
<script>
var obj = new Proxy({}, {
get : function( target , prop ) {
console.log("我要获取值了");
return target[prop];
},
set : function( target, prop, value) {
console.log("我要设置值了");
target[prop] = value;
}
});
obj = new Proxy(obj, {
get : function( target , prop ) {
console.log("我要再获取值了");
return target[prop];
},
set : function( target, prop, value) {
console.log("我要再设置值了");
target[prop] = value;
}
});
obj.vvvv = ;
obj.vvvv;
</script>
通过代理器， 能够对用户设置的值进行验证， 只有验证通过了才设置到对象上；
let validator = {
set: function(obj, prop, value) {
if (prop === 'age') {
if (!Number.isInteger(value)) {
throw new TypeError('The age is not an integer');
}
if (value > ) {
throw new RangeError('The age seems invalid');
}
};
obj[prop] = value;
}
};
let person = new Proxy({}, validator);
person.age = ;
console.log(person.age); //
person.age = 'young'; // 抛异常
person.age = ; // 值太大了，也抛异常
代理器Proxy有点像Object的geter和seter, 可以认为是geter和seter的扩展：
<script>
let obj = {
get hehe() {
console.log("获取值哦");
return obj.val;
},
set hehe(value) {
return this.val = value;
}
};
obj.hehe = ;
console.log(obj.val);
console.log(obj.hehe);
</script>
Proxy的第二个参数
Proxy的第二个参数为一个对象， 对象的参数为以下的列表， Proxy提供了更多的接口 ， 通过不同的参数， 我们可以截获代码的运行并重新处理， 顾名思义， 代理嘛：
handler.getPrototypeOf()
handler.setPrototypeOf()
handler.isExtensible()
handler.preventExtensions()
handler.getOwnPropertyDescriptor()
handler.defineProperty()
handler.has()
handler.get()
handler.set()
handler.deleteProperty()
handler.ownKeys()
handler.apply()
handler.construct()
handler.getPrototypeOf(),
getPrototypeOf方法必须返回一个对象， 否则会报错：
var obj = {};
var proto = {};
var handler = {
getPrototypeOf(target) {
console.log(target === obj); // true
console.log(this === handler); // true
return proto;
}
};
var p = new Proxy(obj, handler);
console.log(Object.getPrototypeOf(p) === proto); // true
5种触发getPrototypeOf的方法， 包揽了所有了所有获取原型的方法：
var obj = {};
var p = new Proxy(obj, {
getPrototypeOf(target) {
return Array.prototype;
}
});
console.log(
Object.getPrototypeOf(p) === Array.prototype, // true
Reflect.getPrototypeOf(p) === Array.prototype, // true
p.__proto__ === Array.prototype, // true
Array.prototype.isPrototypeOf(p), // true
p instanceof Array // true
);
handler.setPrototypeOf()
当对象被设置原型的时候会执行我们设定的代码：
let handler = {
setPrototypeOf : function(target, value) {
console.log("setPrototypeOf");
target.__proto__ = value;
target.hehe = "";
return target;
}
};
let proxy = new Proxy( {}, handler );
proxy.__proto__ = Object.prototype
console.log(proxy);
输出：setPrototypeOf
又输出： {hehe: ""}
handler.constructor();
当对象被new的时候会执行handler.constructor方法， 和上面不同的是第一个参数应该为一个函数：
<script>
var p = new Proxy(function() {}, {
construct: function(target, argumentsList, newTarget) {
console.log("called: " + argumentsList.join(", "));
return { value: argumentsList[] * };
}
}); console.log(new p());
//输出：called: 1
//输出：Object {value: 10}
</script>
Proxy的方法：
Proxy.revocable()返回一个可以取消的Proxy代理， 当实例化完毕后，在 执行 Proxy实例对象.revoke(); 那么这个proxy实例相当于被内存回收， 不存在一样；
var revocable = Proxy.revocable({}, {
get: function(target, name) {
return "[[" + name + "]]";
}
});
var proxy = revocable.proxy;
console.log(proxy.foo); // "[[foo]]"
revocable.revoke();
console.log(proxy.foo); // 抛出异常
proxy.foo = // 抛出异常
delete proxy.foo; // 抛出异常
typeof proxy // "object"， 但是它还是一个对象....
实际应用：
通过construct和apply两个变量， 可以实现一个：继承构造函数的工具函数extend：
function extend(sup,base) {
///获取base方法的constructor
var descriptor = Object.getOwnPropertyDescriptor(
base.prototype,"constructor"
);
//重写base方法的constructor，指向继承超类的对象
base.prototype = Object.create(sup.prototype);
//利用构造器的代理器， 当用户new这个函数的返回对象时候， 会生成一个继承超类和base类的对象
var handler = {
construct: function(target, args) {
var obj = Object.create(base.prototype);
this.apply(target,obj,args);
return obj;
},
apply: function(target, that, args) {
sup.apply(that,args);
base.apply(that,args);
}
};
var proxy = new Proxy(base,handler);
descriptor.value = proxy;
//修复constructor方法
Object.defineProperty(base.prototype, "constructor", descriptor);
return proxy;
}
var Person = function(name){
this.name = name;
};
var Boy = extend(Person, function(name, age) {
this.age = age;
});
Boy.prototype.sex = "M";
var Peter = new Boy("Peter", );
console.log(Peter.sex); // "M"
console.log(Peter.name); // "Peter"
console.log(Peter.age); //
给一个对象绑定一个set，当对象的selected元素发生改变， 那么就改变dom节点的属性：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="item-1">
item-
</div>
<div id="item-2">
item-
</div> <script>let view = new Proxy({
selected: null
},
{
set: function(obj, prop, newval) {
let oldval = obj[prop]; if (prop === 'selected') {
if (oldval) {
oldval.setAttribute('aria-selected', 'false');
}
if (newval) {
newval.setAttribute('aria-selected', 'true');
}
} // The default behavior to store the value
obj[prop] = newval;
}
}); let i1 = view.selected = document.getElementById('item-1');
console.log(i1.getAttribute('aria-selected')); // 'true' let i2 = view.selected = document.getElementById('item-2');
console.log(i1.getAttribute('aria-selected')); // 'false'
console.log(i2.getAttribute('aria-selected')); // 'true'
</script>
</body>
</html>
浏览器的DEMO：
let products = new Proxy({
browsers: ['Internet Explorer', 'Netscape']
},
{
get: function(obj, prop) {
// 如果实际的属性为latestBrowser
if (prop === 'latestBrowser') {
return obj.browsers[obj.browsers.length - ];
}
// 其他的属性
return obj[prop];
},
set: function(obj, prop, value) {
// 如果实际的属性为latestBrowser
if (prop === 'latestBrowser') {
obj.browsers.push(value);
return;
}
// 其他属性的话， 把值转化为数组;
if (typeof value === 'string') {
value = [value];
}
// 设置属性
obj[prop] = value;
}
});
console.log(products.browsers); // ['Internet Explorer', 'Netscape']
products.browsers = 'Firefox';
console.log(products.browsers); // 输出： ['Firefox']
products.latestBrowser = 'Chrome';
console.log(products.browsers); // 输出：['Firefox', 'Chrome']
console.log(products.latestBrowser); // 输出：'Chrome'
参考：
mdn：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy
阮一峰:http://es6.ruanyifeng.com/#docs/proxy
作者： NONO
出处：http://www.cnblogs.com/diligenceday/
QQ：287101329
微信：18101055830
