JavaScript函式的反應性

Jsp發表於2018-08-23

轉載:以Vue為例,解釋JavaScript的反應性

詳細可以看上面的轉載文章,本文簡單筆記

一:Object.defineProperty()

ES 5 JavaScript 所提供 Object.defineProperty() 函式。它允許我們為屬性定義 getter 和 setter 函式。

JavaScript函式的反應性

控制檯列印:

JavaScript函式的反應性


程式碼執行並嘗試 get price屬性的值時,我們希望price能夠記住這個匿名函式(target)。通過這種方式,如果price發生了變化,或者被set了一個新的值,這個函式就能重新執行,因為它能夠知道這行程式碼依賴該屬性。所以,你可以按照如下的方式來思考。

Get=>記住該匿名函式,當值發生變化的時候我們會重新執行。

Set=>執行儲存的匿名函式,我們的值就會發生變化。

或者,在 Dep Class 的場景下:

Price 訪問 (get) =>呼叫dep.depend()儲存當前的target;

Price set =>呼叫 price 的dep.notify(),重新執行所有的target。接下來,我們將這兩個理念組合起來,並看一下最終的程式碼。   

 JavaScript函式的反應性                                             

JavaScript函式的反應性



相關文章