雑多なブログ

音楽や語学、プログラム関連の話題について書いています

javascript: Object.defineProperty() で変数の変更を検知

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