JavascriptでスマートにObservableする

追記

全然スマートじゃなかったのでもっとスマートにしました
https://qiita.com/angeart/items/29979f67d7a511bbec0e

JavascriptでObservableパターンを書きたい

諸事情により、Javascriptを用いたフロントエンドの実装を行っていたのですが
MVVMのようにObservableな書き方をしたい欲望ができてきたのでES2015で何とかしてみました。
後から追加されたプロパティにも対応しています。

実装

Proxyクラスを用いるとよいらしい
尚、イベントハンドラを設定する部分においてjQueryに依存しています。

var $ = require('jquery');

class Observable {
  constructor(inherited_object = {}) {
    return new Proxy(inherited_object, {
      set: function(obj, prop, value) {
        if (obj[prop] === value) return true;
        obj[prop] = value;
        $(obj).trigger("onchanged", {
          prop: prop
        });
        return true;
      }
    });
  }
}

class Test {
  constructor() {
    $(this).on("onchanged", function(e, data) {
      console.log("changed : " + this[data.prop]);
    });
    return new Observable(this);
  }
}

var tester = new Test();

tester.hoge = "hoge";
tester.hoge = "hoge";
tester.hoge = "fuga";

実行結果

changed : hoge
changed : fuga

gist

repl.it