ES6之proxy

Proxy 這個東西,在開發的時候解決跨域使用過,翻譯成代理器。Proxy 用於修改某些操做的默認行爲,等同於在語言層面作出修改,因此屬於一種「元編程」(meta programming),即對編程語言進行編程。編程

Proxy 能夠理解成,在目標對象以前架設一層「攔截」,外界對該對象的訪問,都必須先經過這層攔截,所以提供了一種機制,能夠對外界的訪問進行過濾和改寫。跨域

ES6 原生提供 Proxy 構造函數,用來生成 Proxy 實例:數組

var target = {};var handler = {};

var proxy = new Proxy(target, handler);
複製代碼

target參數表示所要攔截的目標對象,handler參數也是一個對象,用來定製攔截行爲。要使得Proxy起做用,必須針對Proxy實例(上例是proxy對象)進行操做,而不是針對目標對象(上例是空對象)進行操做。bash

Proxy構造函數new出來的實例對數是第一個參數target:app

var proxy = new Proxy([1, 2], {});

console.log(proxy instanceof  Array);//true



var proxy = new Proxy({a: 1}, {});

console.log(proxy instanceof  Object);//true



var proxy = new Proxy(function () {}, {});

console.log(proxy instanceof  Function);//true

複製代碼

Handler是攔截的函數,函數默認有參數,第一個是target,其餘是不一樣方法須要的不一樣參數:編程語言

var proxy = new Proxy({a: 1}, {

    get(target, key){

        console.log(target);//{a: 1}

        console.log(key);//a

    }

});

proxy.a;

複製代碼

好比咱們攔截獲取a以外的任何值都是error,a就返回1:函數

var proxy = new Proxy({a: 1}, {

    get(target, key){

        if(key == 'a'){

            return target.a;

        }else{

            return 'error';

        };

    }

});

console.log(proxy.a);//1

console.log(proxy.b);//error

console.log(proxy.c);//error
複製代碼

這就是最簡單的攔截。ui

攔截參數能夠有多個一塊兒,Proxy支持的攔截有13種:spa

get(target, propKey, receiver):攔截對象屬性的讀取,好比proxy.foo和proxy['foo']。翻譯

set(target, propKey, value, receiver):攔截對象屬性的設置,好比proxy.foo = v或proxy['foo'] = v,返回一個布爾值。

has(target, propKey):攔截propKey in proxy的操做,返回一個布爾值。

deleteProperty(target, propKey):攔截delete proxy[propKey]的操做,返回一個布爾值。

ownKeys(target):攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循環,返回一個數組。該方法返回目標對象全部自身的屬性的屬性名,而Object.keys()的返回結果僅包括目標對象自身的可遍歷屬性。

getOwnPropertyDescriptor(target, propKey):攔截Object.getOwnPropertyDescriptor(proxy, propKey),返回屬性的描述對象。

defineProperty(target, propKey, propDesc):攔截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一個布爾值。

preventExtensions(target):攔截Object.preventExtensions(proxy),返回一個布爾值。

getPrototypeOf(target):攔截Object.getPrototypeOf(proxy),返回一個對象。

isExtensible(target):攔截Object.isExtensible(proxy),返回一個布爾值。

setPrototypeOf(target, proto):攔截Object.setPrototypeOf(proxy, proto),返回一個布爾值。若是目標對象是函數,那麼還有兩種額外操做能夠攔截。

apply(target, object, args):攔截 Proxy 實例做爲函數調用的操做,好比proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

construct(target, args):攔截 Proxy 實例做爲構造函數調用的操做,好比new proxy(...args)。

相關文章
相關標籤/搜索