先看个题目
让下列表达式成立
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