"this" of Arrow Function in CallBack Function of Constructor in MutationObserver

検証はChromeのDevlopper Toolsのみで行っています。

MutationObserver

任意のノードの変更を監視,記録し、その都度コールバック関数を実行するオブジェクトです。
Webアプリケーション拡張などを書く際、任意のノードの 子(孫)要素作成/子(孫)要素削除/属性変更/ノードのデータ変更 を監視することができます。

Usage

var observer = new MutationObserver(function(mutaitonRecords, observer){
  // Any procedure
});
observer.observe(targetNode, {childList:true, characterData:true, attributes: true}/*Options*/);

mutationRecordsはノードの変更情報, observerはこのMutationObserverオブジェクト自身を指します。またthisも同様にMutationObserverオブジェクト自身になります。
不要になったら observer.disconnect(); することで監視オブジェクトを破棄することができます。

Arrow Function in MutaitonObserver

ECMAScript6のArrow Function内でのthisは基本的に定義されたスコープのオブジェクトを指します。こちら参照

MutationObserver のコールバックでArrow Functionを使う場合、定義されたスコープがthisとなってしまう(hoge クラス内部の関数でArrow Functionを定義する場合はhogeがthisになる)ため、this.disconnect(); によって監視を終了することができない為、第二引数によって自身のオブジェクトを参照する必要があります。

class exMutationObserver extends MutationObserver{
  constructor(cb){
    super(cb.bind(this));
  }
}

のようなクラスを書けばよいかと思ったんですが、Arrow Functionが定義された段階で定められたthisはbindによって変更することができないため、だめみたいですね…