ES6入門系列 ----- Reflect

  Reflect   是ES6 爲了操做對象而提供的新的API, 目的是:函數

  1. 將Object 上一些明顯屬於語言內部的方法,好比 Object.defineProperty  放到 Reflect對象上

現階段某些方法同時在Object  ,  Reflect 上部署,  將來的新方法將只在Reflect對象上部署,也就是說spa

從Reflect對象上能夠得到語言內部的方法。3d

         2. 修改某些Object 方法的返回結果,讓其變得更合理。代理

    3.讓Object的操做都變成函數行爲。某些Object操做是命令式,好比name in obj   和  code

delete obj[name],    而Reflect.has(obj, name)  和  Reflect.deleteProperty(obj, name)  讓它們變成了函數行爲。對象

   4.Reflect 對象的方法與Proxy 對象的方法一一對應, 只要是Proxy 對象上的方法, 就能在Reflect 對象上找到對應的方法。這就使Proxy對象能夠方便地調用對應Reflect的方法來完成默認行爲,做爲修改行爲的基礎。不管Proxy怎麼修改默認行爲,咱們總能夠在Reflect上獲取默認行爲。blog

      看個例子:部署

  

const des = {
    name: 'liu',
    age: 18
};
const newDes = new Proxy(des, {
    set: function (target, name, value, receiver) {
        let res = Reflect.set(target, name, value, receiver);
        // 額外行爲
        if (res) {
            console.log(res)
            Reflect.set(target, 'age', 80, receiver);
        }
        return res
    }
});
console.log(newDes);
newDes.name = 'xxxx';
console.log(newDes);

咱們對  對象des  的set 方法  作了一層攔截, 每當newDes 設置值的時候,咱們先用get

Reflect.set() 保證默認行爲, 默認行爲成功後 再執行咱們的額外行爲,也就是把age 變成80.io

看下執行結果:

OK , 默認行爲name設置成功, 額外行爲age也設置成功,

咱們還能夠代理對象內部的其餘方法:

const des = {
    name: 'liu',
    age: 18
};
const newDes = new Proxy(des, {
    set(target, name, value, receiver) {
        let res = Reflect.set(target, name, value, receiver);
        // 額外行爲
        if (res) {
            console.log(res);
            Reflect.set(target, 'age', 80, receiver);
        }
        return res
    },
    deleteProperty(target, p) {
        console.log('delete ' + p);
        return Reflect.deleteProperty(target, p);
    },
    get(target, p, receiver) {
        console.log('get ' + p);
        return Reflect.get(target, p, receiver);
    }
});
const name = newDes.name;
delete newDes.age;

攔截對象的get方法 和 delete 指令

結果:

攔截成功。

相關文章
相關標籤/搜索