ES6 Proxy/Reflect 淺析

Juven 發(fā)布于2019-08-20 14:14 / 2010人閱讀

摘要：即必須有返回值其中可接受三個參數(shù)，為目標對象，為屬性名，為實際接受的對象，默認為本例中新建的，如果多帶帶指出一個對象，可使指出對象受到相同的方法作用。且中的必須有返回值，的不用，這也正是因為在他之后還會執(zhí)行所以不需要。

ES6 Proxy/Reflect Proxy 攔截器

proxy是es6的新特性，簡單來講，即是對目標對象的屬性讀取、設(shè)置，亦或函數(shù)調(diào)用等操作進行攔截（處理）。

let proxy = new Proxy(target,handle)

target

一個proxy代理對象由兩部分組成target/handle。其中target為目標對象，可以為一個空對象即（target={}），也可以是一個含有屬性和方法的對象（target={foo:1,bar:2}）,在進行l(wèi)et proxy=new Proxy(target,handle)的操作后，新的proxy對象會對target進行“淺拷貝”,即proxy、target兩個對象會相互影響。即：

let target = { _prop: "foo", prop: "foo" };
let proxy = new Proxy(target, handler);
proxy._prop = "bar";
target._attr = "new"
console.log(target._prop) // "bar"
console.log(proxy._attr) //"new"

ES5 getter/setter

handle是實際運行的處理方法，Proxy的handle一共有13種方法，以最簡單常用的get/set方法為例。在ES5中，對象就有g(shù)et/set的訪問器（低版本瀏覽器不支持），它們的作用是在對象進行屬性的讀寫時，進行額外的操作。例如person對象下的age屬性，當它不在0-100之間時，給這個age的值重置為0。

var person = {
                get age(){
                    console.log("getter")
                    return this._age;//這里千萬不能return this.age,會出錯
                },
                set age(val) {
                    console.log("setter")
                    this._age = val < 100 && val > 0 ? val:0
                   
                }
            };
    person.age = 10 //10
    person.age = 101 //0
    person.age = "age" //0

在進行賦值操作時，會先觸發(fā)set、后觸發(fā)get，進行如person.age++的操作時，set、get的觸發(fā)順序為：get=>set。以上就是ES5的getter/setter訪問器。

handle

在 Proxy中的handle中g(shù)et、set方法也類似。即

   let handler = {
                get (target, key){
                    return target[key]
                },
                set (target, key, value) {
                    if (key === "age") {
                        target[key] = value > 0 && value < 100 ? value : 0
                    }
                    return true;//必須有返回值
                }
            };

            let target = {};
            let proxy = new Proxy(target, handler);
            proxy.age = 22 //22

其中g(shù)et可接受三個參數(shù)（target，key, receiver）,target為目標對象，key為屬性名，receiver為實際接受的對象，默認為本例中新建的proxy，如果多帶帶指出一個對象，可使指出對象受到相同的方法作用。例如：

   let _proxy={};
   let handler = {
                get (target, key , receiver){
                    receiver=_proxy;
                    target[key]="test";
                    return Reflect.get(target,key,receiver);
                },
                set (target, key, value) {
                    if (key === "age") {
                        target[key] = value > 0 && value < 100 ? value : 0
                    }
                    return true;//必須有返回值
                }
            };

            let target = {};
            let proxy = new Proxy(target, handler);
            proxy.age
            console.log(_proxy.age) // test

set方法多一個value參數(shù)，為屬性值，即 proxy.age=1，中的1。

與ES5 setter/getter訪問器的區(qū)別是，在proxy中，proxy.age=1,只會執(zhí)行 set的方法，而不是像ES5中的setter，會先執(zhí)行set，后執(zhí)行g(shù)et。且proxy中的set必須有返回值，ES5的setter不用，這也正是因為在他之后還會執(zhí)行g(shù)etter,所以不需要。

Reflect 反射

Reflect與ES5的Object有點類似，包含了對象語言內(nèi)部的方法，Reflect也有13種方法，與proxy中的方法一一對應。Proxy相當于去修改設(shè)置對象的屬性行為，而Reflect則是獲取對象的這些行為。
還是剛才的例子：

 let _proxy = {}
 let handler = {
                get (target, key,recive){
                    return Reflect.get(target,key,recive)
                },
                set (target, key, value) {
                    if (key === "age") {
                        target[key] = value > 0 && value < 100 ? value : 0
                    }
                    return Reflect.set(target,key,value,_proxy);
                }
            };

  let target = {};
  let proxy = new Proxy(target, handler);
  proxy.age = 33
  console.log(_proxy.age)//33

Reflect 也可與ES5的setter/getter配合使用,例如：

var myObject = {
  foo: 1,
  bar: 2,
  get baz() {
    return this.foo + this.bar;
  },};

var myReceiverObject = {
  foo: 4,
  bar: 4,};

Reflect.get(myObject, "baz", myReceiverObject) // 8

其余方法與Proxy均相同，區(qū)別即是，設(shè)置和獲取的關(guān)系。

Proxy和Reflect還有很多方法，比如apply作為操作對象函數(shù)時觸發(fā)的方法，比如myObject =function(){
return "it"s Fn"}, myObject();會觸發(fā)handle中的apply方法。還有觸發(fā)has方法的_attr in obj等等共計13種方法，本次只以最簡單的set、get方法來舉例。