bug收集：專門解決與收集bug的網(wǎng)站

網(wǎng)址：www.bugshouji.com

最近看了《完全圖解超實(shí)用思考書(shū)》一書(shū),??覺(jué)得使用圖解來(lái)記憶非常有用，
所以，接下來(lái)準(zhǔn)備寫(xiě)一個(gè)【圖解系列】將很多的文字內(nèi)容使用圖解的形式表示出來(lái)。



主題：【Object.defineProperty? vs Proxy】

圖解：

文字說(shuō)明：
Proxy

Proxy 用于修改某些操作的默認(rèn)行為，等同于在語(yǔ)言層面做出修改，所以屬于一種“元編程”（meta programming），即對(duì)編程語(yǔ)言進(jìn)行編程。

Proxy 可以理解成，在目標(biāo)對(duì)象之前架設(shè)一層“攔截”，外界對(duì)該對(duì)象的訪問(wèn)，都必須先通過(guò)這層攔截，因此提供了一種機(jī)制，可以對(duì)外界的訪問(wèn)進(jìn)行過(guò)濾和改寫(xiě)。Proxy 這個(gè)詞的原意是代理，用在這里表示由它來(lái)“代理”某些操作，可以譯為“代理器”。

Proxy的優(yōu)勢(shì)如下:

• Proxy可以直接監(jiān)聽(tīng)對(duì)象而非屬性；

• Proxy可以直接監(jiān)聽(tīng)數(shù)組的變化；

• Proxy有多達(dá)13種攔截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具備的；

• Proxy返回的是一個(gè)新對(duì)象,我們可以只操作新的對(duì)象達(dá)到目的,而Object.defineProperty只能遍歷對(duì)象屬性直接修改；

• Proxy作為新標(biāo)準(zhǔn)將受到瀏覽器廠商重點(diǎn)持續(xù)的性能優(yōu)化，也就是傳說(shuō)中的新標(biāo)準(zhǔn)的性能紅利；

Object.defineProperty
Object.defineProperty的優(yōu)勢(shì)如下:

• 兼容性好（支持IE9）

Object.defineProperty (obj, prop, descriptor) 的問(wèn)題主要有三個(gè)：

Vue響應(yīng)式實(shí)現(xiàn)，使用 Object.defineProperty 的缺點(diǎn)：

• 無(wú)法監(jiān)聽(tīng)數(shù)組的變化

Vue 把會(huì)修改原來(lái)數(shù)組的方法定義為變異方法。變異方法例如 push、pop、shift、unshift、splice、sort、reverse等，是無(wú)法觸發(fā) set 的。非變異方法，例如 filter，concat，slice 等，它們都不會(huì)修改原始數(shù)組，而會(huì)返回一個(gè)新的數(shù)組。Vue 的做法是把這些變異方法重寫(xiě)來(lái)實(shí)現(xiàn)監(jiān)聽(tīng)數(shù)組變化。

• 必須遍歷對(duì)象的每個(gè)屬性

使用 Object.defineProperty 多數(shù)情況下要配合 Object.keys 和遍歷，于是就多了一層嵌套。并且由于遍歷的原因，假如對(duì)象上的某個(gè)屬性并不需要“劫持”，但此時(shí)依然會(huì)對(duì)其添加“劫持”。

• 必須深層遍歷嵌套的對(duì)象

當(dāng)一個(gè)對(duì)象為深層嵌套的時(shí)候，必須進(jìn)行逐層遍歷，直到把每個(gè)對(duì)象的每個(gè)屬性都調(diào)用 Object.defineProperty() 為止。

茍有恒?,?何必三更眠五更起關(guān)注我，一起學(xué)習(xí)吧
鼓勵(lì)一下，賜個(gè)贊?和?在看吧