深刻淺出ES6的標準內置對象Proxy

時間  2019-11-05
標籤 深刻 es6 標準 內置 對象 proxy 欄目 JavaScript 简体版
原文   原文鏈接

Proxy是ES6規範定義的標準內置對象，能夠對目標對象的讀取、函數調用等操做進行攔截。通常來講，經過Proxy可讓目標對象「可控」，好比是否能調用對象的某個方法，可否往對象添加屬性等等。javascript

const originalObj = {
    name: 'xialei'
};
const publicObj = new Proxy(originalObj, {
    set(target, prop, value) {
        // 將屬性值轉化爲大寫
        target[prop] = value.toString().toUpperCase();
    }
});

publicObj.name = 'xialei';
console.log(publicObj.name); // XIALEI
從上例能夠看出Proxy不須要更改目標對象(也就是originalObj)，就能夠對originalObj的行爲進行攔截。

語法

let obj = new Proxy(target, handler);
  • target Object 目標對象。能夠是任何類型的對象，甚至包括原生對象（好比數組，函數，另外一個Proxy對象）
  • handler Object 代理行爲對象。訪問目標對象時會自動觸發該handler的對應屬性。

和大多數開發者同樣，剛開始學習Proxy的時候，這個handler不知道是個什麼東西，何時能觸發。java

先看一個簡單的例子，看看handler究竟是什麼東西。假設咱們開發一個遊戲腳本，因爲內存修改器的盛行，咱們須要對內存中的數據進行安全處理，可是不能影響外部使用，咱們使用Proxy完成這個功能。數組

const gameObj = {
    hp: 0
  };
  
  const publicGameObj = new Proxy(gameObj, {
    get(target, prop) {
      return target[prop]/2;
    },
    set(target, prop, value) {
      target[prop] = value*2;
    }
  });

  publicGameObj.hp = 10000;
  console.log(publicGameObj.hp, gameObj); // 10000 {hp: 20000}

gameObj是咱們在內存中真實存儲數據的地方，能夠看到HP是20000，可是publicGameObj.hp是10000，外部使用publicGameObj.hp便可(好比UI層展現HP爲10000);安全

例程handler使用到的屬性

  • get publicGameObj.hp進行了讀取操做，所以會自動觸發handler的get方法
  • set publicGameObj.hp=10000進行了賦值操做，所以爲自動觸發handler的set方法

handler對象

handler對象是Proxy的核心基礎，全部對目標對象的操做都須要經過handler來處理，雖然內容有點多，可是經常使用的很少。app

說明

  • 目標對象 被代理的對象。外部不能直接訪問(固然語法上是能夠訪問的，你都用上Proxy了，還訪問他幹嗎?)
  • 代理對象 new Proxy的返回值。外部直接訪問。目標對象會做爲handler對應函數的參數傳入
  • 帶*號的是經常使用屬性
全部訪問都是對代理對象訪問纔會觸發，直接訪問目標對象不會觸發(代理對象壓根沒參與進來，若是觸發那必定是出bug了)

handler.getPrototypeOf(target)

說明：獲取目標對象的原型框架

觸發時機：Object.getPrototypeOf(代理對象)函數

參數：學習

  • target Object 目標對象

返回值：this

  • Object 對象的原型
const array = [];
const myArray = new Proxy(array, {
  getPrototypeOf(target) {
        console.log('讀取對象原型');
    return Object.getPrototypeOf(array);
  }
});
console.log(Object.getPrototypeOf(myArray));
// 輸出
// 讀取對象原型
// []

handler.setPrototypeOf(target, prototype)

說明：設置對象的原型spa

觸發時機：Object.setPrototypeOf(代理對象, 原型)
參數：

  • target Object 目標對象
  • prototype Object 原型對象或null

返回值：

  • boolean 設置成功返回true，不然返回false(好比不讓設置)
const array = [];
const myArray = new Proxy(array, {
    setPrototypeOf(target, prototype) {
        Object.setPrototypeOf(target, prototype);
        return true;
    }
});
Object.setPrototypeOf(myArray, Object.prototype);
console.log(Object.getPrototypeOf(myArray)); // {}

handler.isExtensible(target)

說明：檢測對象是否可擴展(我的理解：也就是可否添加屬性、函數)
觸發時機：Object.isExtensible(代理對象)
參數：

  • target Object 目標對象

返回參數：

  • boolean

handler.preventExtensions(target)

說明：設置目標對象爲不可擴展
觸發時機：Object.preventExtensions(代理對象)
參數：

  • target Object 目標對象

返回值：

  • boolean 設置目標對象不可擴展後返回true，無論是否設置目標對象不可擴展，返回false都會報錯
const obj = {};
const p = new Proxy(obj, {
    preventExtensions(target) {
        Object.preventExtensions(target);
        return true;
    }
});

Object.preventExtensions(p);

p.a = 1;
console.log(p); // {} 目標對象不可擴展，因此a屬性設置不進去

*handler.getOwnPropertyDescriptor(target, prop)

說明：獲取目標對象屬性的描述符

觸發時機：Object.getOwnPropertyDescriptor(代理對象)

參數：

  • target Object 目標對象
  • prop <string|Symbol|number> 屬性名

返回參數：

  • Object 屬性描述符
const obj = {
    a: 1
};
const p = new Proxy(obj, {
    getOwnPropertyDescriptor(target, prop) {
        return target[prop];
    }
});

console.log(Object.getOwnPropertyDescriptor(obj, 'a')); // { value: 1, writable: true, enumerable: true, configurable: true }

*handler.defineProperty(target,prop,properties)

說明：在對象上定義屬性(添加新屬性或修改現有屬性)
觸發時機：Object.defineProperty(代理對象，屬性名，屬性描述對象)
參數：

  • target Object 目標對象
  • prop string|number|Symbol 屬性名
  • properties Object 屬性描述對象

返回值：

  • boolean 定義成功返回true，定義失敗或不容許定義返回false
const obj = {
    name: 'xialei',
    name2: 'xx'
};
const p = new Proxy(obj, {
    defineProperty(target, prop, properties) {
        if (prop === 'name') {
            Object.defineProperty(target, prop, properties);
            return true;
        }
        return false;
    }
});

Object.defineProperty(p, 'name', {
    value: 'aaa',
});

Object.defineProperty(p, 'name2', { // TypeError
    value: 'aaa',
});

*handler.has(target, prop)

說明：判斷對象是否有指定屬性
觸發時機：prop in 代理對象
參數：

  • target Object 目標對象
  • prop string|number|Symbol 屬性名

返回值：

  • boolean

*handler.get(target, prop, receiver)

說明: 屬性讀取器
觸發時機：讀取代理對象的屬性時觸發

參數：

  • target Object 目標對象
  • prop string|number|Symbol 屬性名
  • receiver Proxy 代理對象或者原型鏈上的代理對象

返回值：

  • 任何值
const obj = {
    name: 'xialei'
};
const p = new Proxy(obj, {
    get(target, prop) {
        if(prop in target) {
            return target[prop].toUpperCase();
        }
        return undefined;
    }
});

console.log(p.name); // XIALEI

*handler.set(target, prop, value, receiver)

說明：屬性寫入訪問器
觸發時機：對代理對象的屬性進行賦值時觸發

參數：

  • target Object 目標對象
  • prop string|number|Symbol 屬性名
  • value any 屬性值
  • receiver Proxy 代理對象或原型鏈上的代理對象

返回值：

  • boolean 賦值成功返回true，不然返回false。嚴格模式下返回false會拋出TypeError

*handler.deleteProperty(target, prop)

說明：刪除對象屬性
觸發時機：對代理對象的屬性進行delete時觸發

參數：

  • target Object 目標對象
  • prop string|number|Symbol 屬性名

返回值：

  • boolean 刪除成功返回true，不然返回false。嚴格模式下返回false會拋出TypeError

*handler.apply(target, thisArg, args)

說明：攔截函數調用，被代理對象必須是函數
觸發時機：

  • 直接調用函數 obj.xxx()或xxx()
  • apply/call

參數：

  • target Object 目標函數
  • thisArg Object this對象
  • args Array 參數列表

返回值：

  • any 任何值
function sum(a, b) {
    return a + b;
}
const absSum = new Proxy(sum, {
    apply(target, thisArg, args) {
        const value = target.apply(thisArg, args);
        return value < 0 ? -value : value;
    }
});


console.log(absSum(-1, -2)); // 3，由於被攔截了

*handler.construct(target,args)

說明：攔截構造過程
觸發時機：new 目標構造函數(...args)

參數：

  • target Function 構造函數
  • args Array 構造函數的參數

返回值：

  • Object 對象
function Person(name) {
    this.name = name;
}

const P = new Proxy(Person, {
    construct(target, args, newTarget) {
        console.log(newTarget, newTarget === P, newTarget === Person); // [Function: Person] true false
        return new target(args[0].toUpperCase());
    }
});

const p = new P('xialei');

console.log(p); // Person { name: 'XIALEI' }

使用場景

  • 保護目標對象(經過鉤子方法進行攔截)
  • 數據轉換(上文有一個內存保護的例子)

  • 數據驗證(不符合規則的值不容許設置)

    const privateUser = {
    name: 'xialei',
    phone: '13888888888'
};

const user = new Proxy(privateUser, {
    set(target, prop, value) {
        if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {
            return false;
        }
        target[prop] = value;
        return true;
    }
});

user.phone = '13666666666';
console.log(user.phone); // 13666666666
user.phone = '+8613777777777';
console.log(user.phone); // +8613777777777
user.phone = '1';
console.log(user.phone); // +8613777777777

  • 數據修正(也作數據標準化)

    const privateUser = {
    name: 'xialei',
    phone: '13888888888'
};

const user = new Proxy(privateUser, {
    set(target, prop, value) {
        if (prop === 'phone' && !/^(\+86)?1[\d]{10}$/.test(value)) {
            return false;
        }
        target[prop] = value.replace('+86','');
        return true;
    }
});

user.phone = '+8613666666666';
console.log(user.phone); // 13666666666

  • 添加實用方法

    const list = [
    { name: 'xialei', phone: '13888888888' },
    { name: 'xialei1', phone: '13899999999' },
];

const mList = new Proxy(list, {
    get(target, prop) {
        if (prop in target) {
            return target[prop];
        }

        for (const item of target) {
            if (item.name === prop) {
                return item;
            }
        }
        return undefined;
    }
});

const firstItem = mList[0];
const itemXialei = mList["xialei"];

console.log(firstItem); // { name: 'xialei', phone: '13888888888' }
console.log(itemXialei);// { name: 'xialei', phone: '13888888888' }

  • 提供易用API

    // 本例對localStorage作了封裝，能夠像普通對象同樣操做localStorage,而不須要調用方法
const storage = new Proxy(localStorage, {
    get(target, prop) {
        return localStorage.getItem(prop);
    },
    set(target, prop, value) {
        localStorage.setItem(prop, value);
        return true;
    },
    deleteProperty(target, prop) {
        localStorage.removeItem(prop);
    },
    has(target, prop) {
        return localStorage.getItem(prop) !== null;
    }
});

storage.aaa = '1';
console.log(storage.aaa); // '1'
delete storage.aaa;
console.log(storage.aaa); // undefined

總結

Proxy的語法雖然簡單，可是可謂前途無量，好比開了一個Virtual Dom框架也是能夠的。

0.jpeg
更多原創文章，盡在天天進步一點點

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程