亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解ES6中的代理模式——Proxy

 更新時(shí)間:2018年01月08日 10:51:42   作者:玉鴦  
這篇文章主要介紹了詳解ES6中的代理模式——Proxy,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

什么是代理模式

代理模式(英語:Proxy Pattern)是程序設(shè)計(jì)中的一種設(shè)計(jì)模式。

所謂的代理者是指一個(gè)類別可以作為其它東西的接口。代理者可以作任何東西的接口:網(wǎng)絡(luò)連接、內(nèi)存中的大對象、文件或其它昂貴或無法復(fù)制的資源。

著名的代理模式例子為引用計(jì)數(shù)(英語:reference counting)指針對象。

當(dāng)一個(gè)復(fù)雜對象的多份副本須存在時(shí),代理模式可以結(jié)合享元模式以減少內(nèi)存用量。典型作法是創(chuàng)建一個(gè)復(fù)雜對象及多個(gè)代理者,每個(gè)代理者會引用到原本的復(fù)雜對象。而作用在代理者的運(yùn)算會轉(zhuǎn)送到原本對象。一旦所有的代理者都不存在時(shí),復(fù)雜對象會被移除。

上面是維基百科中對代理模式的一個(gè)整體的定義.而在JavaScript中代理模式的具體表現(xiàn)形式就是ES6中的新增對象---Proxy

什么是Proxy對象

在MDN上對于 Proxy 的解釋是:

Proxy 對象用于定義基本操作的自定義行為(如屬性查找,賦值,枚舉,函數(shù)調(diào)用等)。

簡單來說: Proxy 對象就是可以讓你去對JavaScript中的一切合法對象的基本操作進(jìn)行自定義.然后用你自定義的操作去覆蓋其對象的基本操作.也就是當(dāng)一個(gè)對象去執(zhí)行一個(gè)基本操作時(shí),其執(zhí)行的過程和結(jié)果是你自定義的,而不是對象的.

:sweat:好吧,用文字表達(dá)可能太復(fù)雜了.我們還是直接上代碼吧.

首先Proxy的語法是:

let p = new Proxy(target, handler);

其中:

  1. target 是你要代理的對象.它可以是JavaScript中的任何合法對象.如: (數(shù)組, 對象, 函數(shù)等等)
  2. handler 是你要自定義操作方法的一個(gè)集合.
  3. p 是一個(gè)被代理后的新對象,它擁有 target 的一切屬性和方法.只不過其行為和結(jié)果是在 handler 中自定義的.

然后讓我們來看這段代碼:

let obj = {
 a: 1,
 b: 2,
}

const p = new Proxy(obj, {
 get(target, key, value) {
  if (key === 'c') {
   return '我是自定義的一個(gè)結(jié)果';
  } else {
   return target[key];
  }
 },

 set(target, key, value) {
  if (value === 4) {
   target[key] = '我是自定義的一個(gè)結(jié)果';
  } else {
   target[key] = value;
  }
 }
})
console.log(obj.a) // 1
console.log(obj.c) // undefined
console.log(p.a) // 1
console.log(p.c) // 我是自定義的一個(gè)結(jié)果
obj.name = '李白';
console.log(obj.name); // 李白
obj.age = 4;
console.log(obj.age); // 4
p.name = '李白';
console.log(p.name); // 李白
p.age = 4;
console.log(p.age); // 我是自定義的一個(gè)結(jié)果

從上面這段代碼中,我可以很清楚的看到 Proxy 對象的作用.即是之前所受的 用于定義基本操作的自定義行為 .同樣的 get 和 set 操作.沒有沒代理的對象所得的結(jié)果是其JavaScript本身的執(zhí)行機(jī)制運(yùn)行計(jì)算后所得到的.而被代理了的對象的結(jié)果則是我們自定義的.

Proxy所能代理的范圍--handler

在上面代碼中,我們看到了構(gòu)造一個(gè)代理對象時(shí)所傳的第二個(gè)參數(shù) handler ,這個(gè) handler 對象是由 get 和 set 兩個(gè)函數(shù)方法組成的.這兩個(gè)方法會在一個(gè)對象被 get 和 set 時(shí)被調(diào)用執(zhí)行,以代替原生對象上的操作.那么為什么在 handler ,定義 get 和 set 這兩個(gè)函數(shù)名之后就代理對象上的 get 和 set 操作了呢?

實(shí)際上 handler 本身就是ES6所新設(shè)計(jì)的一個(gè)對象.它的作用就是用來 自定義代理對象的各種可代理操作 。它本身一共有13中方法,每種方法都可以代理一種操作.其13種方法如下:

handler.getPrototypeOf()

// 在讀取代理對象的原型時(shí)觸發(fā)該操作,比如在執(zhí)行 Object.getPrototypeOf(proxy) 時(shí)。

handler.setPrototypeOf()

// 在設(shè)置代理對象的原型時(shí)觸發(fā)該操作,比如在執(zhí)行 Object.setPrototypeOf(proxy, null) 時(shí)。

handler.isExtensible()

// 在判斷一個(gè)代理對象是否是可擴(kuò)展時(shí)觸發(fā)該操作,比如在執(zhí)行 Object.isExtensible(proxy) 時(shí)。

handler.preventExtensions()

// 在讓一個(gè)代理對象不可擴(kuò)展時(shí)觸發(fā)該操作,比如在執(zhí)行 Object.preventExtensions(proxy) 時(shí)。

handler.getOwnPropertyDescriptor()

// 在獲取代理對象某個(gè)屬性的屬性描述時(shí)觸發(fā)該操作,比如在執(zhí)行 Object.getOwnPropertyDescriptor(proxy, "foo") 時(shí)。

handler.defineProperty()

// 在定義代理對象某個(gè)屬性時(shí)的屬性描述時(shí)觸發(fā)該操作,比如在執(zhí)行 Object.defineProperty(proxy, "foo", {}) 時(shí)。

handler.has()

// 在判斷代理對象是否擁有某個(gè)屬性時(shí)觸發(fā)該操作,比如在執(zhí)行 "foo" in proxy 時(shí)。

handler.get()

// 在讀取代理對象的某個(gè)屬性時(shí)觸發(fā)該操作,比如在執(zhí)行 proxy.foo 時(shí)。

handler.set()

// 在給代理對象的某個(gè)屬性賦值時(shí)觸發(fā)該操作,比如在執(zhí)行 proxy.foo = 1 時(shí)。

handler.deleteProperty()

// 在刪除代理對象的某個(gè)屬性時(shí)觸發(fā)該操作,比如在執(zhí)行 delete proxy.foo 時(shí)。

handler.ownKeys()

// 在獲取代理對象的所有屬性鍵時(shí)觸發(fā)該操作,比如在執(zhí)行 Object.getOwnPropertyNames(proxy) 時(shí)。

handler.apply()

// 在調(diào)用一個(gè)目標(biāo)對象為函數(shù)的代理對象時(shí)觸發(fā)該操作,比如在執(zhí)行 proxy() 時(shí)。

handler.construct()

// 在給一個(gè)目標(biāo)對象為構(gòu)造函數(shù)的代理對象構(gòu)造實(shí)例時(shí)觸發(fā)該操作,比如在執(zhí)行new proxy() 時(shí)。

Proxy的作用

對于代理模式 Proxy 的作用主要體現(xiàn)在三個(gè)方面:

1、 攔截和監(jiān)視外部對對象的訪問

2、 降低函數(shù)或類的復(fù)雜度

2、 在復(fù)雜操作前對操作進(jìn)行校驗(yàn)或?qū)λ栀Y源進(jìn)行管理

而對于這三個(gè)使用方面的具體表現(xiàn)大家可以參考這篇文章-- 實(shí)例解析ES6 Proxy使用場景

Proxy的兼容性

參考資料:

MDN---Proxy

實(shí)例解析ES6 Proxy使用場景

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論