necotech blog

JavaScriptでプロパティの監視

Empty an Array – loverajoel/jstips

上記リンクは、list.length = 0;にすると、その配列が空になる、という話。変数への代入(list = [];)ではなくて、オブジェクトのlengthプロパティを変更すると自動で配列の中身も変わるので、そのオブジェクトを参照している別の変数にも影響します。(元記事のソースコード参照)

このように、プロパティを監視し、値が変更された時にコールバックで何かアクションを起こすには、下記のような方法があるようです。

Object.defineProperty

Object.defineProperty() – JavaScript | MDN

高機能です。これを使うと、値の監視のほかに、書き込み禁止のプロパティを作ったり、高度なメタプログラミングが実現できるようです。(この辺、改めて調べて記事にしたい。)

getter/setterを用意する

九章第六回 ゲッタとセッタ — JavaScript初級者から中級者になろう — uhyohyo.net

これは恥ずかしながら知りませんでした。プライベートな変数には対応していないけど、クロージャを使えば問題無いようです。__defineGetter__, __defineSetter__というものも出てきますが、これらはdeprecatedで非推奨のようです。

あとは、これらに頼らずにgetter/setter用の関数を自前で用意しても、同様のことが実現できます。実はそれが一番現実的だったりすることもあります。

watch/unwatch

Object.prototype.watch() – JavaScript | MDN

2016/01現在、Firefox限定ということで使い道が難しいですが、かなり簡潔に記述できます。

仕様はちょっと違うけど、上記のgetter/setterを使って実装してる人もいるようです。
Watch for object properties changes in JavaScript – Stack Overflowとか

observe/unobserve

次世代JavaScriptでデータバインディング: Object.observe() を試す – ぼちぼち日記
Object.observe の死 (ECMAScript の提案取り下げ、V8 からも削除予定) – てっく煮ブログ

死にました。


使おうとして無理やり使うものでは決してないけど、設計段階で意識して取り入れたら何かを解決できるケースというのはありそう。でも、暗黙の了解という感じでこれらを使ってしまうと後々悩まされそうだなー、とは思う。Rubyみたいな言語ならともかくとして。

Facebook にシェア
LinkedIn にシェア
Pocket