ES6中的Proxy<代理>和Reflect<反射>

先看个题目

让下列表达式成立

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具有下面几个优势

1. 监听对象内所有属性时，不需要遍历，而defineProperty则需要遍历。
2. 支持数组
3. 不需要对 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()

2. 将用 老Object方法 报错的情况，改为返回false

// old
try {
  Object.defineProperty(target, property, attributes);
  // success
} catch (e) {
  // failure
}

// new
if (Reflect.defineProperty(target, property, attributes)) {
  // success
} else {
  // failure
}

3. 让Object操作变成函数行为

// old
'name' in Object

// new
Reflect.has(Object,'name')

4. 在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