JavaScript 之 Proxy

程式設計三昧發表於2022-01-27
JavaScript

proxy.001

前言

Proxy 可以理解成，在目標物件之前架設一層“攔截”，外界對該物件的訪問，都必須先通過這層攔截，因此提供了一種機制，可以對外界的訪問進行過濾和改寫。Proxy 這個詞的原意是代理，用在這裡表示由它來“代理”某些操作，可以譯為“代理器”。

語法

var proxy = new Proxy(target, handler);

Proxy 物件的所有用法，都是上面這種形式，不同的只是handler引數的寫法。其中：

  • new Proxy() 表示生成一個 Proxy 例項
  • target 參數列示所要攔截的目標物件
  • handler 引數也是一個物件，用來定製攔截行為

如果handler沒有設定任何攔截，那就等同於直接通向原物件。

let target = {};
let handler = {};
let proxy = new Proxy(target,handler);
proxy.name = '程式設計三昧'; 
console.log(target.name); // '程式設計三昧'

還有一個技巧是將 Proxy 物件，設定到 object.proxy 屬性,從而在 object 物件上呼叫：

let proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

let obj = Object.create(proxy);
obj.time // 35

get()

get() 方法用於攔截某個屬性的讀取操作，可以接受三個引數，依次為:

  • 目標物件
  • 屬性名
  • proxy 例項本身（嚴格地說，是操作行為所針對的物件），可選。

get() 方法的用法，上文已經有一個例子，下面是另一個攔截讀取操作的例子:

let  perosn = {
    name:'james',
    age:26,
    profession:'software'
}

var proxy = new Proxy(perosn,{
    get:function(target,property) {
        if (property in target) {
            return target[property];
        } else {
            throw new ReferenceError("propertype\""+property + "\" does no exit" );
        }
    }
});

console.log(proxy.name,proxy.profession); // james software
console.log(proxy.sex); // Uncaught ReferenceError: propertype"sex" does no exit

set()

set() 方法用來攔截某個屬性的賦值操作，可以接受四個引數，依次為:

  • 目標物件
  • 屬性名
  • 屬性值
  • Proxy 例項本身，可選。

假定 person 物件有一個 age 屬性，該屬性應該是一個不大於 200 的整數，那麼可以使用 Proxy 保證 age 的屬性值符合要求。

let perosn = {
    name:'james',
    age:26,
    profession:'software'
}

let proxy = new Proxy(perosn,{
    get:function(target,property) {
        if (property in target) {
            return target[property];
        } else {
            throw new ReferenceError("propertype\""+property + "\" does no exit" );
        }
    },
    set:function(target,key,value) {
        if(key === 'age') {
            if(value>80) {
                throw ReferenceError("invail");
            } else {
                return target[key] = value;
            }
        } else {
            return target[key];
        }
    }
});
proxy.age = 60;
console.log(proxy.name,proxy.profession,proxy.age); // james software 60

proxy.age = 99; // Uncaught ReferenceError: invail

apply()

apply() 方法攔截:

  • 函式的呼叫
  • call 操作
  • apply 操作

apply() 方法可以接受三個引數，分別是：

  • 目標物件
  • 目標物件的上下文物件（this）
  • 目標物件的引數陣列。
let twice = {
    apply(target, ctx, agrs) {
        return Reflect.apply(...arguments) * 2;
    }
};
function sum (a, b) {
    return a + b;
}
let proxy5 = new Proxy(sum, twice);

console.log(proxy5(1, 3));  // 8
console.log(proxy5.apply(null, [1, 3])); // 8

另外，直接呼叫Reflect.apply方法，也會被攔截。

Reflect.apply(proxy5, null, [9, 10]) // 38

has()

has() 方法用來攔截 HasProperty 操作，即判斷物件是否具有某個屬性時，這個方法會生效。典型的操作就是 in 運算子。

has() 方法可以接受兩個引數，分別是目標物件、需查詢的屬性名。

下面的例子使用 has 方法隱藏某些屬性，不被 in 運算子發現。

let stu1 = {name: '張三', score: 59};
let stu2 = {name: '李四', score: 99};

let handler = {
  has(target, prop) {
    if (prop === 'score' && target[prop] < 60) {
      console.log(`${target.name} 不及格`);
      return false;
    }
    return prop in target;
  }
}

let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);

'score' in oproxy1
// 張三 不及格
// false

'score' in oproxy2
// true

for (let a in oproxy1) {
  console.log(oproxy1[a]);
}
// 張三
// 59

for (let b in oproxy2) {
  console.log(oproxy2[b]);
}
// 李四
// 99

上面程式碼中，has 攔截只對 in 運算子生效，對 for...in 迴圈不生效，導致不符合要求的屬性沒有被 for…in 迴圈所排除。

Proxy 支援的攔截操作一覽

Proxy 支援的攔截操作基本有 13 種。

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)。

~

~ 本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章