• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• rikuba2013/12/30 09:19:59

  満足200pt

  現状ではオブジェクトの変更をフックするための普遍的な方法はありません。
  次期バージョンのECMAScript6ではProxyが定義されており、これを使えば可能です。今のところ先行実装しているのはFirefoxだけです。

  var ObservableArray = (function () {
      // isArrayIndex, handlerをグローバル変数にしないための即時関数
      function isArrayIndex(p) {
          var n = p >>> 0;
          return String(n) === p && n !== (-1 >>> 0);
      }
  
      var handler = {
          set: function (target, name, val, receiver) {
              if (isArrayIndex(name)) {
                  var detail;
                  var index = name >>> 0;
                  if (index >= target.length) {
                      target.length = index + 1;
                      detail = {
                          type: 'add',
                          object: target,
                          name: name
                      };
                  } else if (name in target) {
                      detail = {
                          type: 'update',
                          object: target,
                          name: name,
                          oldValue: target[name]
                      };
                  }
                  target[name] = val;
                  if (detail) {
                      target.notifyObservers(detail);
                  }
              }
          }
      };
  
      function ObservableArray(length) {
          this.length = length >>> 0;
          this._observers = [];
          return new Proxy(this, handler);
      }
  
      // Array.prototypeのメソッドを継承する
      ObservableArray.prototype = Object.create(Array.prototype, {
          constructor: Object.getOwnPropertyDescriptor(ObservableArray.prototype, 'constructor')
      });
  
      ObservableArray.prototype.observe = function (callbackfn/*, thisArg*/) {
          this._observers.push([callbackfn, arguments[1]]);
      };
  
      ObservableArray.prototype.notifyObservers = function (detail) {
          this._observers.forEach(function (observer) {
              observer[0].call(observer[1], detail);
          });
      };
  
      return ObservableArray;
  }());
  
  (function main() {
      var array = new ObservableArray(2);
      array.observe(function (e) {
          alert(e.type + ': array[' + e.name + '] = ' + array[e.name]);
      });
      array[0] = 'Hello';
      array[1] = 'World';
      array[2] = '!';     // add
      array[1] = 'work';  // update
      array.push('?');    // add
      alert(array.join('')); // "Hellowork!?"
  }());
  

  getter, setterであれば例えばlengthを1000まで決め打ちにするなどすれば似たようなことはできるでしょうが……。
  では巷のライブラリ（Knockout.jsのobservableArray、WinJS.Binding.Listなど）はどうしているかというと、角括弧によるアクセスはできず、すべての操作をメソッド経由で行うように制限して実現しています。
  同じように実装するとしたら、内部にプロパティとして「本物の」配列を保持しておき、角括弧によるアクセスの代わりとしてsetAt, getAtなどのメソッドを用意し、またArray.prototypeのメソッドをwrapして間接的に操作するような形にすればいいと思います。

  var ObservableArray = (function () {
      function ObservableArray(length) {
          this._backingArray = new Array(length);
          this._observers = [];
      }
  
      Object.defineProperty(ObservableArray.prototype, 'length', {
          get: function () {
              return this._backingArray.length;
          },
          set: function (value) {
              this._backingArray.length = value;
          }
      });
  
      ObservableArray.prototype.getAt = function (index) {
          return this._backingArray[index];
      };
  
      ObservableArray.prototype.setAt = function (index, value) {
          index >>>= 0;
          var detail;
          if (index >= this.length) {
              detail = {
                  type: 'add',
                  object: this,
                  name: index
              };
          } else if (index in this._backingArray) {
              detail = {
                  type: 'update',
                  object: this,
                  name: index,
                  oldValue: this._backingArray[index]
              };
          }
          this._backingArray[index] = value;
          if (detail) {
              this.notifyObservers(detail);
          }
      };
  
      ObservableArray.prototype.push = function push(item1) {
          var length = this.length;
  
          // pushの処理は委譲
          var result = Array.prototype.push.apply(this._backingArray, arguments);
  
          // Observableの処理
          for (var i = 0, I = arguments.length; i < I; ++i) {
              this.notifyObservers({
                  type: 'add',
                  name: length + i
              });
          }
  
          return result;
      };
  
      ObservableArray.prototype.join = function join(separator) {
          // joinはObservableに関わらないのでそのまま委譲
          return Array.prototype.join.call(this._backingArray, separator);
      };
  
      // 同様にArray.prototypeのメソッドを定義していく……
  
      ObservableArray.prototype.observe = function (callbackfn/*, thisArg*/) {
          this._observers.push([callbackfn, arguments[1]]);
      };
  
      ObservableArray.prototype.notifyObservers = function (detail) {
          this._observers.forEach(function (observer) {
              observer[0].call(observer[1], detail);
          });
      };
  
      return ObservableArray;
  }());
  
  (function main() {
      var array = new ObservableArray(2);
      array.observe(function (e) {
          alert(e.type + ': array[' + e.name + '] = ' + array.getAt(e.name));
      });
      array.setAt(0, 'Hello');
      array.setAt(1, 'World');
      array.setAt(2, '!');     // add
      array.setAt(1, 'work');  // update
      array.push('?');         // add
      alert(array.join(''));   // "Hellowork!?"
  }());
  

  スター

  • 

    4件のコメントを見る

  • kameoyaji_2 2013/12/31 14:43:18

    色々やり方がるんですね・・・。
    他の言語でできるるので、出来るかなとは思っていたのですが、出来ることが分かったので、自分なりの思考に合ったクラスを何とか実現出来そうです。
    ターゲットが、クロームなので、角括弧が使えないのが残念ですが。
    また、ご提供いただいたソースを自分なりに理解するには、少々時間がかかりそうですが、勉強させていただきます。
    ところで　>>>=　なのですが、>>>でビット演算しているのはわかるのですが、
    >>>=　0 では、どのような処理を行っていことになるのでしょうか？
    javaに詳しくないので、ご指導いただければ幸いです。
    （正規表現もいまだにいまいち理解できないレベルのポンコツプログラマーで申し訳ございません。）

    スター

  • rikuba 2013/12/31 17:02:53

    >>>= 0 は32ビット符号なし整数に変換する(内部メソッドのToUint32を適用する)ためのイディオムです。
    少数や負数を渡されたときもindexを符号なし整数に丸め込むために書きましたが、getAtでやっていないなどお粗末……というわけでまあ、あまり気にしないでください。自然数でなければエラーにするなどにした方がいいかもしれないですね。自分しか使わないのであれば、typeof index === "number"の確認くらいで十分かもしれません。
    ちなみにisArrayIndexは仕様書のArray Objectsに書かれていることをそのままコードにしたものです。
    
    Array.prototypeにある関数は、Function.prototype.callやFunction.prototype.applyを使うことで配列以外のオブジェクトにも適用することができます（仕様にそう定義されています(The push function is intentionally generic)）。

    var object = {};
    Array.prototype.push.call(object, 'foo', 'bar', 'baz');
    alert(JSON.stringify(object, null, 4));
    /* {
        "0": "foo",
        "1": "bar",
        "2": "baz",
        "length": 3
    } */
    

    配列に関する処理はArray.prototypeの関数に丸投げして、Observableにあたる部分の処理を自分で考えていけばいい、というわけです。
    最初の回答ではああ書きましたが、初めからArray.prototypeのメソッドを全部移植しようとせずとも、必要なメソッドから定義していけばいいと思います。
    
    個人的には、汎用的なObservableArrayを使うよりも、より具体的なクラスに配列を持たせて、そのクラス自身をObservableにすることが多いです。

    function ContactList() {
        this._contacts = []; // privateのつもり
    }
    ContactList.prototype.add = function (contact) {
        this._contacts.push(contact);
        this.notifyObservers({ type: 'add', value: contact });
    };
    // 省略
    

    スター

  • rikuba 2014/01/08 20:40:04

    今更ですが、ChromeではObject.observe, Array.observeというAPIが実装されており、これらを使えば簡単にオブジェクトの変異を検知できるようです。

    var array = [];
    
    Array.observe(array, function (changes) {
        alert(JSON.stringify(changes, null, 2));
    });
    
    array.push('foo', 'bar', 'baz');
    array.splice(0, 2, 'hoge', 'fuga');
    array[2] = 'piyo';
    array.length = 0;
    

    • 次世代JavaScriptでデータバインディング： Object.observe() を試す - ぼちぼち日記
    • harmony:observe_api_usage [ES Wiki]

    スター

  • kameoyaji_2 2014/01/09 11:57:08

    ありがとうございます、希望した動きが実装できそうです。
    実際には、連想配列なので、indexの部分は、修正して、作りこみます。

    スター

その他の回答

この質問へのコメント

質問の情報

登録日時

2013-12-29 19:08:00

終了日時

2014-01-05 19:10:04

回答条件

1人5回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者312日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者1日前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者211日前
• 内定してほしいポケモンはいますか？匿名質問者1日前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ