詳細可以看上面的轉載文章,本文簡單筆記
一:Object.defineProperty()
ES 5 JavaScript 所提供 Object.defineProperty() 函式。它允許我們為屬性定義 getter 和 setter 函式。
控制檯列印:
程式碼執行並嘗試 get price
屬性的值時,我們希望price
能夠記住這個匿名函式(target
)。通過這種方式,如果price
發生了變化,或者被set
了一個新的值,這個函式就能重新執行,因為它能夠知道這行程式碼依賴該屬性。所以,你可以按照如下的方式來思考。
Get=>記住該匿名函式,當值發生變化的時候我們會重新執行。
Set=>執行儲存的匿名函式,我們的值就會發生變化。
或者,在 Dep Class 的場景下:
Price 訪問 (get) =>呼叫dep.depend()
儲存當前的target
;
Price set =>呼叫 price 的dep.notify()
,重新執行所有的target
。接下來,我們將這兩個理念組合起來,並看一下最終的程式碼。