javascriptで変数の変更を検知する方法を調べたところ、 Object.defineProperty が使えるようだ。 この機能自体は、Chrome v5、IE9の頃から利用可能だったようだが、今まで知らなかった・・・
静的メソッドの Object.defineProperty() は、あるオブジェクトに新しいプロパティを直接定義したり、オブジェクトの既存のプロパティを変更したりして、そのオブジェクトを返します。
引用元URL: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
概要の説明がいまいちよく分からないので、
実例をぐぐりつつ下記を満たす処理を実装してみる。
- 変数の変更を検知する
- 変更を検知して何らか処理を行う
実装例
function watchValue(obj, propertyName, callback) { let value = obj[propertyName]; Object.defineProperty(obj, propertyName, { get: () => value, set: newValue => { value = newValue callback(newValue) } }) } let test = { value: 0 } watchValue(test, 'value', value => console.log('updated!', value)) test.value = 9