先看个题目
让下列表达式成立
a === 1 && a === 2 && a === 3
我大致的思路是定义变量a = 0 每次取a得值时，先 a++，再返回。
ok要在完成取值之前拦截一步，并且输出我们想要的值，就需要用的es5中的数据劫持了。
于是我咔咔写出了下面的代码：
window['a'] = 0;
Object.defineProperty(window,'a',{
get() {
window['a']++
return window['a']
}
})
然后就咔咔的报错了，报错原因是堆栈溢出。
我思考了一下，原来如此，当我取a的值时，get劫持了我的操作，此时我使a++,相当于又取了a的值，又重复劫持了一次，所以死循环了。
所以我想我换一个不被劫持的值不得了，于是我咔咔写下了下面的代码：
let count = 0;
Object.defineProperty(window,'a',{
get() {
count++;
return count;
}
})
结果果然没错。
上面两端代码中，都用到了Object.defineProperty。
官方解释：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
它可以定义一个新属性，比如我上面的a，本来是不存在，却被程序定义出来了。
或者修改一个现有的属性，比如第一段程序中的window['a']，本来就有。
OK，据说Vue2.x中的数据双向绑定就用到了这个玩意。
如果想深入了解数据双向绑定的实现，请看文章：http://www.cnblogs.com/libin-1/p/6893712.html
接着说Proxy
Proxy表面上和defineProperty差不多，后者能实现的，前者也能实现，比如监听对象内一个属性的变化
let obj = new Proxy({a:1},{
get(target, p, receiver) {
console.log('取值')
},
set(target, p, value, receiver) {
console.log('改值')
}
})
相比defineProperty，Proxy具有下面几个优势
- 监听对象内所有属性时，不需要遍历，而defineProperty则需要遍历。
- 支持数组
- 不需要对 keys 进行遍历。这解决Object.defineProperty() 的第二个问题.Proxy 是针对整个 obj 的。所以 obj 内部包含的所有的 key ，都可以走进 set。(省了一个 Object.keys() 的遍历)
关于Proxy支持的拦截方法可参考官方文档：
http://es6.ruanyifeng.com/#docs/proxy#Proxy-%E5%AE%9E%E4%BE%8B%E7%9A%84%E6%96%B9%E6%B3%95
Reflect对象
还是刚才的代码
let obj = new Proxy({a:1},{
get(target, p, receiver) {
console.log('取值')
}
})
let a = obj.a
我咔咔的就输出了a,结果却是undefined，为啥，因为get方法里只是拦截和监听，但是方法却没有返回。
我按照官方教程输出了返回值，代码如下：
let obj = new Proxy({a:1},{
get(target, p, receiver) {
return Reflect.get(target,p,receiver)
}
})
let a = obj.a
取到了obj.a的值。
所以啥是Reflect?
官方解释：为操作对象而提供的新API
http://es6.ruanyifeng.com/#docs/reflect
Reflect的优势
1.将Object对象的属于语言内部的方法放到Reflect对象上，即从Reflect对象上拿Object对象内部方法。
let obj = {a:1};
// old
Object.defineProperty();
// new
Reflect.deleteProperty()
- 将用 老Object方法 报错的情况，改为返回false
// old
try {
Object.defineProperty(target, property, attributes);
// success
} catch (e) {
// failure
}
// new
if (Reflect.defineProperty(target, property, attributes)) {
// success
} else {
// failure
}
- 让Object操作变成函数行为
// old
'name' in Object
// new
Reflect.has(Object,'name')
- 在Proxy上有的方法，在Reflect就一定有。在Proxy修改了默认行为后，可通过Reflect保证默认行为正常运行。
let obj = new Proxy({a:1},{
get(target, p, receiver) {
// 改变默认行文
console.log('取值')
// 使默认行为正常执行
return Reflect.get(target,p,receiver)
}
})
let a = obj.a
console.log(a) // 1
Reflect对象拥有的方法：
请参考官方文档：http://es6.ruanyifeng.com/#docs/reflect
网友评论