Object.defineProperty和Proxy

greatwhole 發布于2019-08-23 12:12 / 2384人閱讀

摘要：問題無法監控到數組下標的變化。的指向雖然可以代理針對目標對象的訪問，但它不是目標對象的透明代理，即不做任何攔截的情況下，也無法保證與目標對象的行為一致。主要原因就是在代理的情況下，目標對象內部的關鍵字會指向代理。

Object.defineProperty問題

Object.defineProperty() 無法監控到數組下標的變化。vue只能通過以下幾種方法來監聽

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

以上幾種方法也是經過vue內部處理后才能監聽的。

只能劫持對象的屬性,因此我們需要對每個對象的每個屬性進行遍歷，如果屬性值也是對象那么需要深度遍歷,顯然能劫持一個完整的對象是更好的選擇。

Proxy

代理:對外暴露代理對象,操作的時候，表面上操作的是代理對象(proxy)，實際上改變的是目標對象 (target)，從而可以在操作代理對象的時候進行一些處理(handler)后，再傳遞到目標對象。

特點：

可以劫持整個對象，并返回一個新對象

有13種劫持操作

Proxy是es6提供的，兼容性不好,無法用polyfill磨平

Proxy使用：

es6提供proxy構造函數，第一個參數target:是所要代理的目標對象，可以是空對象。第二個handler是攔截器，一個攔截器可以有多個攔截操作

var proxy = new Proxy(target, handler);

所有的對target的操作都落在proxy上了。

攔截操作一共有13個

get

get(target, propKey, receiver)：攔截對象屬性的讀取 可以繼承

set

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

更多攔截器信息>>

Reflect

反射：通過類的類類型來操作類的屬性。包含來對象語言內部的方法，一共有13種，和proxy一一對應，如果在Proxy中調用Reflect的話，其實對應的就是默認行為。

Proxy的this指向

雖然 Proxy 可以代理針對目標對象的訪問，但它不是目標對象的透明代理，即不做任何攔截的情況下，也無法保證與目標對象的行為一致。主要原因就是在 Proxy 代理的情況下，目標對象內部的this關鍵字會指向 Proxy 代理。

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

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

ES6 系列之 defineProperty 與 proxy

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

sean 2019-08-23 12:59 評論0 收藏0
深入理解ES6之《代理和反射》

摘要：使用陷阱驗證屬性用于接收屬性代理的目標的對象要寫入的屬性鍵被寫入的屬性的值操作發生的對象通常是代理屬性必須是數字拋錯用陷阱驗證對象結構屬性不存在拋出錯誤使用陷阱隱藏已有屬性可以用操作符來檢測給定對象中是否包含有某個屬性，如果自有屬性或原型屬使用set陷阱驗證屬性 let target = { name: target } let proxy = new Proxy(targe...

Stardustsky 2019-08-21 16:24 評論0 收藏0
深入理解ES6之《代理和反射》

摘要：使用陷阱驗證屬性用于接收屬性代理的目標的對象要寫入的屬性鍵被寫入的屬性的值操作發生的對象通常是代理屬性必須是數字拋錯用陷阱驗證對象結構屬性不存在拋出錯誤使用陷阱隱藏已有屬性可以用操作符來檢測給定對象中是否包含有某個屬性，如果自有屬性或原型屬使用set陷阱驗證屬性 let target = { name: target } let proxy = new Proxy(targe...

curried 2019-08-29 13:25 評論0 收藏0
ES6之Reflect

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

BingqiChen 2019-08-23 16:17 評論0 收藏0
ECMAScript6(12)：Proxy 和 Reflect

摘要：返回一個布爾值攔截操作符，返回一個布爾值攔截操作符，返回一個布爾值攔截遍歷器，返回一個遍歷器攔截，返回一個布爾值攔截，返回一個數組。 Proxy 對象 Proxy 用來修改某些默認操作，等同于在語言層面做出修改。所以屬于一種元編程(meta programming), 即對編程語言進行編程。字面理解為Proxy代理了某些默認的操作。其使用格式如下： var proxy = new Pr...

habren 2019-08-23 11:46 評論0 收藏0