ES6 中的 Reflect 和 Proxy
Reflect
Reflect 是ES6中新增的特性。它是一个普通对象，下面有13个静态方法（enumerate在最终的发布版中被移除），能够再全局下访问。它不能当作函数调用，也不能够用new操做符生成一个实例。javascript
首先来讲，Reflect的提出是为了整合以前JS中存在的一些不太合理的地方。vue
1）更加有用的返回值java
Object.getOwnPropertyNames(Reflect) // ["defineProperty", "deleteProperty", "apply", "construct", "get", "getOwnPropertyDescriptor", "getPrototypeOf", "has", "isExtensible", "ownKeys", "preventExtensions", "set", "setPrototypeOf"]
Reflect.apply
功能跟Function.prototype.apply相似。git
var a = [1,2,3]; Math.max.apply(null, a);// 3 Reflect.apply(Math.max, null, a); // 3
Reflect.isExtensible / Reflect.preventExtensions
Reflect.preventExtensions用于让一个对象变为不可扩展。它返回一个布尔值，表示是否操做成功。
Reflect.isExtensible表示当前对象是否可扩展， 返回一个布尔值。es6
var o = {};
Reflect.isExtensible(o);// true
Object.isExtensible(o);// true
Object.freeze(o);
Reflect.isExtensible(o);// false
Object.isExtensible(o);// false
// 这两方法的区别
Object.isExtensible(1) // false
Reflect.isExtensible(1) // 报错
var newO = {};
Reflect.isExtensible(newO);// true
Reflect.preventExtensions(newO); // true 返回true，表示该操做成功
Reflect.isExtensible(newO);// false
Reflect.set / Reflect.get
设置和获取对象属性, 这两个方法还容许接受一个reciever，用于重定义setter和getter方法的上下文。github
var o = {};
Reflect.set(o, 'key', 'value');
console.log(o); // {key: "value"}
Reflect.get(o, 'key'); // "value"
Reflect.get(o, 'nokey'); // undefined
下面演示一下receiver的使用方法面试
var o = {
name: 'O'
}
Object.defineProperty(o, 'sayHi', {
get(){
return 'hi, I am ' + this.name
}
})
o.sayHi; // "hi, I am O"
var receiver = {
name: 'receiver'
}
// 下面是关键， 看好咯~
Reflect.get(o, 'sayHi', receiver); // "hi, I am receiver"
// 下面试验了下Proxy的用法，能够忽略
var p = new Proxy(o, {
get(o, k, p){
return o[k] ? Reflect.get(o, k, receiver) : undefined;
},
set(o, k, v, p){
v += +new Date();
Reflect.set(o, k, v, p)
}
});
p.sayHi; // "hi, I am receiver"
p.t = 'time:';
p.t; // "time:1530865528713"
Reflect.ownKeys
Reflect.ownKeys方法用于返回对象的全部属性数组。
这个数组的排序是根据: 先显示数字， 数字根据大小排序，而后是 字符串根据插入的顺序排序， 最后是symbol类型的key也根据插入插入顺序排序。
出现这种排序是由于，你给一个对象属性赋值时候， 对象的key的排序规则就是先数字， 在字符串， 最后是symbol类型的数据。数组
Reflect.ownKeys(JSON); // ["parse", "stringify", Symbol(Symbol.toStringTag)] Object.getOwnPropertyNames(JSON); // ["parse", "stringify"] Object.getOwnPropertySymbols(JSON); // [Symbol(Symbol.toStringTag)]
Reflect.has
用于判断对象是否具备某个属性安全
Reflect.has(JSON, 'parse'); // true Reflect.has(JSON, 'nokeyxx'); // false Reflect.has(1, 'parse');// Uncaught TypeError: Reflect.has called on non-object
Reflect.construct
功能相似于new操做符app
var a = new Array(3); console.log(a); // [empty × 3] var b = Reflect.construct(Array, [3]) console.log(b); // [empty × 3]
Reflect.defineProperty / Reflect.deleteProperty
Reflect.defineProperty 对应于Object.DefineProperty;
Reflect.deleteProperfy 对应于 delete 语句；
var o = {};
Object.defineProperty(o, 'sayHi', {
configurable: true,
get(k){
return this[k] ? "Hi, I am " + this[k] : 'I have no name';
}
});
o.sayHi;// "I have no name"
Reflect.defineProperty(o, 'sayHello', {
configurable: true,
get(k){
return this[k] ? "Hi, I am " + this[k] : 'I have no name';
}
})
o.sayHello; // "I have no name"
// 演示属性删除方法
delete o.sayHi; // true
Reflect.deleteProperty(o, 'sayHello'); // true
Reflect.setPrototypeOf / Reflect.getPrototypeOf
这两个方法用于设置和访问对象的原型__proto__
function A(){};
A.prototype.name= "A";
Reflect.getPrototypeOf(A)
// ƒ () { [native code] }
var a = new A();
Reflect.getPrototypeOf(a)
// {name: "A", constructor: ƒ}
a.name; // "A"
var c = {};
Reflect.setPrototypeOf(c, A.prototype);
c.name; // "A"
A.prototype.newName = "C";
c.newName; // "C"
Reflect.getOwnPropertyDescriptor
基本等同于Object.getOwnPropertyDescriptor，用于获得指定属性的描述对象。
Reflect.getOwnPropertyDescriptor(JSON, 'parse'); // {value: ƒ, writable: true, enumerable: false, configurable: true}
var c = {};
Reflect.defineProperty(c, 'name', {
configurable: true,
enumerable: true,
value: 'CCC',
writable: false
});
Reflect.getOwnPropertyDescriptor(c, 'name'); // {value: "CCC", writable: false, enumerable: true, configurable: true}
c.name; // "CCC"
c.name = 111;
c.name; // "CCC", 由于writable=== false
Proxy
Proxy 对象用于定义JS对象的基本操做行为（如属性查找，赋值，枚举，函数调用等）。
下面看一个修改对象get行为的demo：
var obj = { n : 1};
var p = new Proxy(obj, {
get(t, k){
if( Reflect.has(t, k) ){
return t[k] + 100;
} else {
throw Error('no the property')
}
}
});
p.n; // 101
p.p; // Uncaught Error: no the property
关于Proxy具体能够从新定义哪些基本操做：
definePropertydeletePropertyapplyconstructgetgetOwnPropertyDescriptorgetPrototypeOfhasisExtensibleownKeyspreventExtensionssetsetPrototypeOf
这个列表跟 Reflect 具备的静态方法是一致的。更多信息能够参考Proxy能够处理的方法列表 的描述
不说上面这些值基本操做，咱们列举下一下Proxy的一些使用场景。
设置默认值
若是访问一个对象中尚未初始化的值，Proxy能够经过代理get方法，返回一个默认值。
function setDefault(defaults) {
const handler = {
get(t, k) {
return Reflect.get(t, k) || defaults[k];
}
}
return new Proxy({},handler);
}
const d = setDefault({
name: 'name'
});
const log = console.log;
log(d.name); // "name"
d.name = 'new name';
log(d.name); // "new name"
log(d);
隐藏私有属性
Proxy能够代理对象的基础操做，咱们经过代理 get 方法，控制外部对对象内部属性的方法。这样即可以达到隐藏某些特性（私有属性）的目的。
const log = console.log;
function hideProp(obj,filter) {
const handler = {
get(t, k) {
if(!filter(k)){
let v = Reflect.get(t, k);
if(typeof v === 'function'){
v = v.bind(t);
}
return v;
}
}
}
return new Proxy(obj,handler);
}
function filter(key){
return key[0] === '_';
}
const o = {
_p : 'no access',
p: 'access',
f: function(){
log(this._p);
}
};
const p = hideProp(o, filter);
log(p.p); // access
log(p._p); // undefined
log(p.f()); // no access
更完美的枚举
不少JavaScript代码使用字符串、普通或冻结的对象做为枚举。这些解决方案有其类型的安全问题，并且一般容易出错。
Proxy能够提供一个可行的替代方案。咱们采用一个简单的键值对象，并经过保护它免受（甚至无心的）修改而使其更加健壮。甚至比Object.freeze更加完善。（Object.freeze不容许修改，但不会引起错误，而是静默报错）
const log = console.log;
function enumF(obj) {
const handler = {
get(t, k) {
if(Reflect.has(t, k)){
let v = Reflect.get(t, k);
if(typeof v === 'function'){
v = v.bind(t);
}
return v;
}
},
set(t){
throw new TypeError('Enum is read only');
}
}
return new Proxy(obj,handler);
}
const o = {
p: 'access',
f: function(){
log(this._p);
}
};
const p = enumF(o);
log(p.p); // access
p.p = 'modified'; // TypeError
// 对比Object.freeze
const o1 = {
p: '1'
}
Object.freeze(o1);
o1.p = 'modified';
log(o1.p);
跟踪对象变化
由于Proxy能够截获对象的大部分基础操做，所以咱们其实是能够跟踪的对 对象的访问和修改。经过记录这些访问和修改信息，能记录下对这个对象的全部操做记录。
const log = console.log;
function trackChange(obj, onchange) {
const handler = {
deleteProperty(t, k){
const oldVal = t[k];
Reflect.deleteProperty(t, k);
onchange(t, k , undefined, oldVal)
},
set(t,k, v){
const oldVal = t[k];
Reflect.set(t, k , v);
onchange(t, k, v, oldVal);
}
}
return new Proxy(obj,handler);
}
const o = {
p: 'access',
f: function(){
log(this._p);
}
};
const p = trackChange(o, (t,k,newV, oldV)=>{
log(`the property: ${k} change from old value [${oldV}] to new value [${newV}]`)
});
p.p = 'modified';
delete p.f;
Proxy实现单例模式
来看看经过Proxy如何实现 单例模式。
const log = console.log;
function singleInstance(obj){
let instance,
handler = {
construct:function(t){
if(!instance){
instance = Reflect.construct(...arguments);
}
return instance;
}
}
return new Proxy(obj, handler);
}
function A(){
this.v = 1;
}
const p = singleInstance(A);
const p1 = new p();
const p2 = new p();
log(p1.v);
log(p2.v);
p1.v = 'new value';
log(p1.v);
log(p2.v);
总结
总结一下，上面的几个例子中，咱们基本上代理的都是对象的get,set,deleteProperty方法。这些都是对象的常见操做。用好了Proxy能够解决不少问题，例如vue.js数据双向绑定的特性实际上也可使用Proxy实现。
说了这么多，可是并不极力推荐使用Proxy，并非出于兼容性问题。主要是性能方面，能够确定的是，使用了Proxy确定不如原有对象访问速度更快。Proxy至关于在对象前添加了一道墙，任何操做都要先通过Proxy处理。这确定会增长成本。写这篇文章的主要目的是 但愿可以了解更多的东西，为本身解决问题增长另一种方案。
【参考资料】
- 1. ES6(Proxy 和 Reflect)
- 2. ES6的Proxy和Reflect
- 3. ES6：Proxy Reflect
- 4. es6 Proxy和Reflect（十一）
- 5. 【ES6入门10】：Proxy和Reflect
- 6. ES6 Proxy/Reflect 浅析
- 7. JS 中的 Reflect 和 Proxy
- 8. ES6中的元编程-Proxy & Reflect
- 9. es6-快速掌握Proxy、Reflect
- 10. 浅谈ES6之Proxy与Reflect
- 更多相关文章...
- • 现实生活中的 XML - XML 教程
- • Spring中Bean的作用域 - Spring教程
- • C# 中 foreach 遍历的用法
- • 适用于PHP初学者的学习线路和建议
-
每一个你不满意的现在，都有一个你没有努力的曾经。