update proxy blog 🚜 🍿 🌟

Author: ccforward

Blog/58.ES6 Proxy 实用代码示例.md

@@ -51,9 +51,12 @@ const o = defaultProp({ name: 'default name'})
 
 test() // name = "default name", name not in o
 
+// 替换默认值
 o.name = 'abcdef'
 test() // name = "abcdef", name in o
 
+
+// 删除name属性后 使用默认值
 delete o.name
 test() // name = "default name", name not in o
 
@@ -64,9 +67,10 @@ test() // name = "default name", name not in o
 
 Proxy 也有利于限制属性的访问，比如隐藏以下划线开头的的属性，让他们真正私有化。
 
-上面两个例子相对简单，这个的代码就麻烦点了，先上代码，后面解释： 
+先上代码，后面解释： 
 
 ```js
+// filter参数作为一个过滤函数出入
 function priavateProp(obj, filter){
   const handler = {
     get(obj, prop) {
@@ -94,7 +98,14 @@ function priavateProp(obj, filter){
 
   return new Proxy(obj, handler)
 }
-// 私有属性过滤器
+
+```
+
+上面代码使用了4个 trap 函数来实现，参数 `filter` 函数是用来过滤私有属性的过滤器。`has` 函数因为在 Proxy 中用来监听对象 `in` 的使用，所以成了过滤私有属性的核心。`ownKeys` 过滤私有属性，让 `Object.keys(p)` 返回其他所有属性。
+
+```js
+// 私有属性过滤器 
+// 规则：以 _ 为开头的属性都是私有属性
 function filter(prop){
   return prop.indexOf('_') === 0
 }
@@ -114,6 +125,7 @@ console.log(p)  // Proxy {_private: "private property", name: "public name"}
 
 p._private  // undefined
 JSON.stringify(p) // "{"name":"public name"}"
+
 // 只能内部访问私有属性
 p.say()  //  private property
 
@@ -122,13 +134,13 @@ console.log('_private' in p)   // false
 // 不能遍历到私有属性 
 Object.keys(p)  // ["name", "say"]
 
+// 私有属性不能赋值
 p._private = '000'  // Uncaught Error: cannot set property _private
 
 ```
 
-上面代码使用了4个 trap 函数来实现，参数 `filter` 函数是用来过滤私有属性的过滤器。`has` 函数因为在 Proxy 中用来监听对象 `in` 的使用，所以成了过滤私有属性的核心。`ownKeys` 过滤私有属性，让 `Object.keys(p)` 返回其他所有属性。
 
-注意，因为在 Proxy 上调用方法, `this` 默认指向的是 Proxy ，而不是原始对象，因此方法将无法访问私有属性，所以通过将方法绑定到 `get` 函数中来解决。
+注意，因为在 Proxy 上调用方法, `this` 默认指向的是 Proxy 代理 ，而不是原始对象，因此方法将无法访问私有属性，所以通过将方法绑定到 `get` 函数中来解决。
 
 
 ## 枚举 Enum
@@ -267,12 +279,11 @@ obj.key('x')  // undefined
 
 ## 追踪对象和数组
 
-这也是观察者模式的一部分，同时 Vue.js 在今年(2017)也会实现一个基于 Proxy 的 Observation 
+这也是观察者模式的一部分
+在 Vue.js 中无法监听数组的 `length` 导致 `arr.length = 1` 这种数据的改变无法监听，因此 Vue.js 在今年(2017)也会实现一个基于 Proxy 的 Observation 
 
 当对象或数组发生变化时，我们通过订阅的事件就可以观察到，同理，我们还可以添加验证的拦截，在数据更改之前先做验证处理。
 
-在 Vue.js 中无法监听数组的 `length` 导致 `arr.length = 1` 这种数据的改变无法监听
-
 因此我们把对象和数组也加一层 Proxy 来处理，我们把所有的改变都转发到原对象上，在修改或删除之后添加一个函数当做监听器 ：
 
 ```js
@@ -407,7 +418,7 @@ p2.value // "proxy value"  p1 p2 引用同一个实例对象
 
 一旦某个代理对象被撤销，它将变的几乎完全不可用，在它身上执行任何的可代理操作都会抛出 TypeError 异常。
 
-所以，利用 `Proxy.revocable` 实现一个验证和可撤销访问的例子
+`Proxy.revocable`的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。所以，利用 `Proxy.revocable` 实现一个验证和可撤销访问的例子
 
 ```js
 const revocableInfo = Proxy.revocable({}, {
@@ -467,7 +478,7 @@ setUser(revocableInfo.proxy)
 // TypeError:  must be "name" or "age"
 
 
-// 代理对象执行撤销方法 
+// 代理对象执行撤销方法 收回代理权
 revocableInfo.revoke()
 setUserAgain()
 // TypeError: Cannot perform 'set' on a proxy that has been revoked
@@ -477,13 +488,16 @@ setUserAgain()
 某个代理对象一旦被撤销，这个代理对象永远不可能恢复到原来的状态，同时和它关联的目标对象以及处理器对象将有可能被垃圾回收掉。
 
 
+## 最后
+
+Proxy 是在目标对象之前加一层劫持，外界对该对象的访问，都必须先通过这层劫持，因此提供了一种机制，可以对外界的访问进行过滤和改写，等同于在语言层面做出修改，所以属于一种 『元编程』
 
-### 参考文章
+> 参考文章、代码
 
-* [MDN Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
-* [http://es6.ruanyifeng.com/#docs/proxy](http://es6.ruanyifeng.com/#docs/proxy)
-* [http://es6.ruanyifeng.com/#docs/reflect](http://es6.ruanyifeng.com/#docs/reflect)
-* [http://dealwithjs.io/es6-features-10-use-cases-for-proxy/](http://dealwithjs.io/es6-features-10-use-cases-for-proxy/)
+> * [MDN Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+> * [http://es6.ruanyifeng.com/#docs/proxy](http://es6.ruanyifeng.com/#docs/proxy)
+> * [http://es6.ruanyifeng.com/#docs/reflect](http://es6.ruanyifeng.com/#docs/reflect)
+> * [http://dealwithjs.io/es6-features-10-use-cases-for-proxy/](http://dealwithjs.io/es6-features-10-use-cases-for-proxy/)