国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6之Proxy學習

UnixAgain / 3857人閱讀

摘要:在中構造器的典型特點就是首字母大寫,我們通過原對象代理列表格式去創建對象創建的這個對象我們稱之為代理對象。就是原對象是當前的屬性名是代理對象。理解為明星的經理人消極怠工原封不動地轉告外界的信息給明星本身。但是要注意與是兩個不同的對象。

ES6之Proxy

proxy的中文有代理的意思。在其他的程序設計語言中這個單詞也具有類似的含義。

它是什么

Proxy是一個構造器。在js中構造器的典型特點就是首字母大寫,我們通過new Proxy(原對象,{代理列表})格式去創建對象,創建的這個對象我們稱之為代理對象。
即:

</>復制代碼

  1. 代理對象 = new Proxy(原對象,{代理列表})

之所以要額外產生這么一個代理對象,好處在于可以保持原對象不變,在代理對象中添加新的功能,或者是改造某些功能。而這個原對象則可以在適當的時機回滾回去。可以與設計模式中的代理模式對比理解。

使用格式

</>復制代碼

  1. var obj;
  2. var proxyObj = new Proxy(obj, {
  3. 對obj的操作1: 函數1,
  4. 對obj的操作2: 函數2,
  5. ...
  6. })
入門示例 Proxy的基本示范

</>復制代碼

  1. var obj = {name:"fan",age:34}
  2. console.info(obj.name)
  3. var proxyObj = new Proxy(obj,{
  4. get:function(target,key,receiver){console.info(target,key,receiver); return "no"}
  5. })
  6. console.info(proxyObj.name)
  7. console.info(proxyObj.abc)

解釋如下:

proxxy對象是在obj對象的基礎之上創建的一個新對象。

proxyObj.name是要去獲取proxy對象的name屬性。.操作符會自動去調用get()方法。這一點非常重要,在js中,對象是屬性的無序集合。對象只有屬性,其他什么都沒有. 而我們經常說的調用對象的某個方法:例如數組對象arr的sort方法:arr.sort(),這里的sort也是arr對象的屬性(更嚴謹一點,sort是arr.__proto__這個對象的屬性),與length屬性相比,sort屬性的屬性值是一個函數,所以在它的后面加()來執行這個函數,而length屬性的值是一個數值,所以不需要加()就可以直接使用。再次強調一下:對象的.操作,會自動去調用get。當然,我們平時使用.操作時,是沒有感知到這一點的。

在new Proxy的第二個參數中,明確設置了get的方法:當訪問proxyObj的任意屬性時,輸出target,key,receiver的值,并統一返回no。所以proxyObj.name和proxyObj.abc都會得到no。

寫到這里你會覺得原對象與代理對象之間有什么關系呢?為什么叫代理呢?

理解代理的作用

代理對象可以理解為明星的經紀人。

</>復制代碼

  1. 外界 <----> 原對象;
  2. 外界 <----> 代理對象 <------> 原對象;

還以上面的代碼為例,改進一下需求:如果有人問obj的名字,就直接告訴對方; 如果有人問obj的年齡,就返回小5歲的年齡。

</>復制代碼

  1. var obj = {name:"fan",age:34}
  2. console.info(obj.age) // 34
  3. var proxyObj = new Proxy(obj,{
  4. get:function(target,key,receiver){
  5. console.info(target === obj); //true
  6. console.info(receiver === proxyObj); //true
  7. if("age" === key){
  8. return target[key] - 5;
  9. }
  10. else{
  11. return target[key]
  12. }
  13. }
  14. })
  15. console.info(proxyObj.age) // 34- 5 = 29

解釋如下:

get函數中的三個參數:target,key,receiver。 target就是原對象j,keys是當前的屬性名;receiver是代理對象。你可以在get方法中做任意的自定義的處理。

代理對象與原對象的關系

</>復制代碼

  1. var arr = [2,1]
  2. var proxyArr = new Proxy(arr,{} )
  3. proxyArr.push(3);
  4. console.info(arr) // [2,1,3]
  5. console.info(arr === proxyArr) // false
  6. arr.sort();
  7. console.info(proxyArr[0]) // 1

以上代碼中,這個代理對象并沒有做任何的特殊操作。理解為明星的經理人消極怠工:原封不動地轉告外界的信息給明星本身。所以在proxyArr上做到操作會直接影響到arr上。

同理,在arr上的操作,也會影響proxyArr。
但是要注意:proxyArr與arr是兩個不同的對象:arr !== proxyArr。

你可能會想一想:為什么proxyArr能夠直接使用push這個方法呢?原因是:

</>復制代碼

  1. proxyArr.__proto__ === arr.__proto__ === Array.prototype

前一個等式成立的原因是由new Proxy的基因決定的:原對象被代理了嘛。

代理列表

在new Proxy的第二個參數中,可以設置的代理屬性如下:

</>復制代碼

  1. var proxyObj = new Proxy(obj, {
  2. get: function(tagert,key,receiver){},
  3. set: function(tagert,key,receiver){},
  4. has: function(tagert,key){},
  5. deleteProperty: function(tagert,key){},
  6. ownKeys: function(tagert){},
  7. getOwnPropertyDescriptor: function(tagert,key){},
  8. defineProperty: function(tagert,key,desc){},
  9. preventExtensions: function(tagert){},
  10. getPrototypeOf: function(tagert){},
  11. isExtensible: function(tagert){},
  12. setPrototypeof: function(tagert,proto){},
  13. apply: function(tagert,obj,args){},
  14. construct: function(tagert,args){},
  15. })
get() 代理的應用 允許數組下標是負值

在js中,數組的有效下表是從0開始的。

</>復制代碼

  1. var arr = [1,2,3];
  2. console.info(arr[0]) // 1
  3. console.info(arr[-1]) // undefined
  4. console.info(arr[100]) // undefined

值得注意的是,下表越界或者是負值的情況下,得到的結果是undefined,而不是報錯。

下面我們希望數組可以取負值下表,規則如下:

-n表示倒數第n個元素。例如:-1表示倒數第一個元素。

使用Proxy解決如下:

</>復制代碼

  1. var arr = [1,2,3];
  2. var proxyArr = new Proxy(arr,{
  3. get: (target,prop)=>{
  4. let index = Number(prop);
  5. if(index < 0){
  6. prop = target.length + index;
  7. }
  8. return target[prop];
  9. }
  10. })
  11. console.info(arr[-1]); // undefined
  12. console.info(proxyArr[-1]); // 3

注意:

Number()可以把傳入的值轉成數值型。非數值 --> NaN;

如果是proxyArr.push(3),由于此時的prop是"push",所以不會進入if分支。

如果是proxyArr[-1],此時的prop是"-1",所以會進入到if分支:把prop從-1改成 2 ,從而實現了被代理的效果。

此時,完全可以把proxyArr當作一個數組來使用,sort,push等方法均可以調用。Array.isArray(proxyArr) === true

當然,你也可以進一步封裝成工廠函數。

</>復制代碼

  1. function myArr(...args){
  2. var arr = new Array(...args);
  3. var proxyArr = new Proxy(arr,{
  4. get: (target,key)=>{
  5. let index = Number(key);
  6. if(index < 0){
  7. key = target.length + index;
  8. }
  9. return target[key];
  10. }
  11. })
  12. return proxyArr;
  13. }
  14. var obj = myArr([1,2,3]);
  15. console.info(obj[0],obj[-1])
鏈式運算

</>復制代碼

  1. var double = n => n*2;
  2. var pow2 = n => n*n;
  3. var half = n => n/ 2;
  4. var add1 = n => n+1;
  5. function pipe (num){
  6. let funs = []
  7. let obj = new Proxy({},{
  8. get:function(target,prop){
  9. if(prop === "end"){
  10. return funs.reduce((val,currentfn)=>currentfn(val),num);
  11. }else{
  12. funs.push(window[prop])
  13. }
  14. return obj;
  15. }
  16. })
  17. return obj;
  18. };
  19. console.info( pipe(4).double.pow2.end);
  20. console.info( pipe(4).pow.double.pow2.add1.end);

說明:

reduce

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/98000.html

相關文章

  • 正則表達式

    摘要:最全正則表達式總結驗證號手機號中文郵編身份證地址等是正則表達式的縮寫,作用是對字符串執行模式匹配。學習目標了解正則表達式語法在中使用正則表達式在中使 JS高級技巧 本篇是看的《JS高級程序設計》第23章《高級技巧》做的讀書分享。本篇按照書里的思路根據自己的理解和經驗,進行擴展延伸,同時指出書里的一些問題。將會討論安全的類型檢測、惰性載入函數、凍結對象、定時器等話題。1. 安全的類型檢測...

    yibinnn 評論0 收藏0
  • 前端進階資源整理

    摘要:前端進階進階構建項目一配置最佳實踐狀態管理之痛點分析與改良開發中所謂狀態淺析從時間旅行的烏托邦,看狀態管理的設計誤區使用更好地處理數據愛彼迎房源詳情頁中的性能優化從零開始,在中構建時間旅行式調試用輕松管理復雜狀態如何把業務邏輯這個故事講好和 前端進階 webpack webpack進階構建項目(一) Webpack 4 配置最佳實踐 react Redux狀態管理之痛點、分析與...

    BlackMass 評論0 收藏0
  • ES6 系列 defineProperty 與 proxy

    摘要:存取描述符同時具有以下可選鍵值一個給屬性提供的方法,如果沒有則為。該方法返回值被用作屬性值。值得注意的是屬性描述符必須是數據描述符或者存取描述符兩種形式之一,不能同時是兩者。可以忽略方法的返回值。 前言 我們或多或少都聽過數據綁定這個詞,數據綁定的關鍵在于監聽數據的變化,可是對于這樣一個對象:var obj = {value: 1},我們該怎么知道 obj 發生了改變呢? define...

    sean 評論0 收藏0
  • ES6Reflect

    摘要:查找并返回對象的屬性例例屬性部署了讀取函數返回的是的參數對象注意如果的第一個參數不是對象,則會報錯。它返回一個布爾值,表示是否操作成功用于返回對象的所有屬性使用和實現觀察者模式請參考觀察者模式 1、什么是Reflect?為操作對象而提供的新API 2、為什么要設計Reflect?(1)將Object對象的屬于語言內部的方法放到Reflect對象上,即從Reflect對象上拿Object...

    BingqiChen 評論0 收藏0
  • ES6Proxy & Reflection API

    摘要:的出現,使用內建對象的繼承得以實現。屬性不存在拋出異常是取值操作,而就是賦值操作,可以對屬性值進行驗證。屬性必須為數字拋出異常接受兩個參數被讀取屬性的原對象,即代理的目標。這個可以攔截內部方法,通過返回數組的值可以覆寫其行為。 Proxy & Reflect extends的出現,使用內建對象的繼承得以實現。Proxy可以攔截JS引擎內部目標的底層對象操作,這些底層操作被攔截后會觸發響...

    yearsj 評論0 收藏0

發表評論

0條評論

UnixAgain

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<