JS基礎——Proxy

luodongseu 發布于2019-08-23 18:31 / 1444人閱讀

摘要：用于修改某些操作的默認行為基本操作有屬性查找，賦值，枚舉，函數調用等。報錯攔截某個屬性的賦值操作目標對象屬性名屬性值代理本身攔截的操作，返回一個布爾值。

Proxy 用于修改某些操作的默認行為（基本操作有屬性查找，賦值，枚舉，函數調用等）。

/*
* target 目標對象（可以是任何類型的對象，包括原生數組，函數，甚至另一個代理）
* handler 一個對象，其屬性是操作對應的自定義代理函數
*/
let p = new Proxy(target, handler);

基本操作

1、get(target, propKey, receiver)：攔截對象屬性的讀取

/*
* target 目標對象
* propKey 對象屬性名
* proxy 實例本身（嚴格地說，是操作行為所針對的對象)
*/
get(target, propKey, receiver)

var obj = {name : "Lucy"}
var p = new Proxy(obj,{
    get : function(target,key,receive){
        return key === "name" ? "Hello "+target[key] : target[key]
    }
})
p.name  //Hello Lucy

需要注意的是，如果一個屬性不可配置（configurable）且不可寫（writable），則 Proxy 不能修改該屬性。

var obj = Object.defineProperties({}, {
  name: {
    value: "Lucy",
    writable: false,
    configurable: false
  },
});
var p = new Proxy(obj, {
    get : function(target,key){
        return key === "name" ? "Hello "+target[key] : target[key]
    }
});
p.name //報錯

2、set: function(obj, prop, value,receive) : 攔截某個屬性的賦值操作

/*
* target 目標對象
* key 屬性名
* value 屬性值
* receive 代理本身
*/
set: function(target, key, value,receive)

var obj = {age : 18}
var p = new Proxy(obj,{
    set : function(target,key,value){
      if(key === "age"){
        target[key] = Math.min(value,100);    
      }else{
        target[key] = value;    
      }
    }
})
p.age = 101;
p.age // 100
obj.age // 100

3、has(target, key)：攔截key in proxy的操作，返回一個布爾值。

4、deleteProperty(target, propKey)：攔截delete proxy[propKey]的操作，返回一個布爾值。

5、ownKeys(target)：ownKeys方法用來攔截對象自身屬性的讀取操作，返回一個數組。具體來說，攔截以下操作:

Object.getOwnPropertyNames() //返回所有屬性

Object.getOwnPropertySymbols()

Object.keys(proxy) //返回可枚舉屬性

for...in循環

var obj = Object.create(null)
Object.defineProperties(obj, {
  "_id": {
    value: 1,
    configurable : true,
    writable : true,
    enumerable : true
  },
  "name": {
    value : "Lucy",
    configurable : true,
    writable : true,
    enumerable : true
  }
});
Object.getOwnPropertyNames(obj) // ["_id","name"]
for(let key in obj){
    console.log(key) //依次輸出_id,name
}

var p = new Proxy(obj,{ 
    ownKeys : function(target){
        return Object.getOwnPropertyNames(target).filter(x => x[0] != "_")
    }
})
Object.getOwnPropertyNames(p) // ["name"]
for(let key in p){
    console.log(key) //輸出name
}

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

7、defineProperty(target, propKey, propDesc)：返回一個布爾值,攔截以下操作

Object.defineProperty(proxy, propKey, propDesc）

Object.defineProperties(proxy, propDescs)

8、preventExtensions(target)：攔截Object.preventExtensions(proxy)，返回一個布爾值。

9、getPrototypeOf(target)：攔截Object.getPrototypeOf(proxy)，返回一個對象。

10、isExtensible(target)：攔截Object.isExtensible(proxy)，返回一個布爾值。

11、setPrototypeOf(target, proto)：攔截Object.setPrototypeOf(proxy, proto)，返回一個布爾值。如果目標對象是函數，那么還有兩種額外操作可以攔截。

12、apply(target, object, args)：攔截 Proxy 實例作為函數調用的操作，比如

proxy(...args)

proxy.call(object, ...args)

proxy.apply(...)

13、construct(target, args)：攔截 Proxy 實例作為構造函數調用的操作，比如new proxy(...args)。

參考資料：

Proxy MDN
ECMAScript 6入門

GPU云服務器云服務器 js基礎 js的基礎 js基礎全套視頻 js基礎視頻講解

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

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

【重溫基礎】14.元編程

摘要：本文是重溫基礎系列文章的第十四篇。元，是指程序本身。有理解不到位，還請指點，具體詳細的介紹，可以查看維基百科元編程。攔截，返回一個布爾值。本文是重溫基礎系列文章的第十四篇。這是第一個基礎系列的最后一篇，后面會開始復習一些中級的知識了，歡迎持續關注呀！接下來會統一整理到我的【Cute-JavaScript】的JavaScript基礎系列中。今日感受：獨樂樂不如眾樂樂...

cc17 2019-08-23 14:34 評論0 收藏0
寫給前端小白看的linux部署基礎知識

摘要：前端平時接觸到的機會并不多，但是懂點對于前端來說還是有益無害的，起碼還是要了解一下最基本的部署知識。特別注意的是，國內注冊的域名要實名備案，否則無法域名解析。前端平時接觸到linux的機會并不多，但是懂點linux對于前端來說還是有益無害的，起碼還是要了解一下最基本的部署知識。博客地址購買服務器要部署項目，首先我們需要一臺服務器。平時開發，項目是跑在我們本地電腦上的，現在我們想...

王巖威 2019-07-25 14:17 評論0 收藏0
Docker 私有注冊中心身份認證

摘要：考慮到這一點，我們花費了一些時間審查了我們維護的多種系統，并在這星期，我給我們的私人注冊中心設置了添加身份認證的目標。你也許知道，注冊沒有提供身份認證的方法。授權響應觸發客戶端回應一組使用基本身份驗證的憑據。注：原文作者是 Alex Ianchici，原文地址是 Docker private registry authentication 安全已經融入了我們的生活。我們鎖門...

klinson 2019-07-25 13:25 評論0 收藏0
Docker 私有注冊中心身份認證

摘要：考慮到這一點，我們花費了一些時間審查了我們維護的多種系統，并在這星期，我給我們的私人注冊中心設置了添加身份認證的目標。你也許知道，注冊沒有提供身份認證的方法。授權響應觸發客戶端回應一組使用基本身份驗證的憑據。注：原文作者是 Alex Ianchici，原文地址是 Docker private registry authentication 安全已經融入了我們的生活。我們鎖門...

Cc_2011 2019-06-28 14:49 評論0 收藏0