JavaScriptにおけるオブジェクト指向について

Question

JavaScriptにおけるオブジェクト指向を学んでいます。
PHPにおけるオブジェクト指向は一通り学び理解しておりましたが、JavaScriptに置き換わるといまいち理解できずにいます。
現在学んでいるのは、プロトタイプ、オブザーバー、クロージャなどです。

書籍に書かれていた下記のサンプルコードを映し、動作を確認するまではできましたが、
実際どのように応用したらいいかがイメージできておりません。
このコードだけですと、引数に渡された値をlistenersに代入し、代入されたものをtriggerで実行するだけの処理という認識で合っているでしょうか？

また、実際に処理として使っていく場合は、
このサンプルコードのように(?)、

・監視
・登録
・削除
・実行

というように、処理を切り分け行ったらよいということなのでしょうか？

雑で申し訳ありませんが、ご回答いただけますと幸いです。

function Observer() {
    this.listeners = {};
}

Observer.prototype.on = function(event, func) {
    if(!this.listeners[event]) {
        this.listeners[event] = [];
    }
    this.listeners[event].push(func);
}

Observer.prototype.off = function(event, func) {
    var ref = this.listeners[event], len = ref.length;

    for(var i = 0; i < len; i++) {
        var listener = ref[i];
        if(listener === func) {
            ref.splice(i,1);
        }
    }
}

Observer.prototype.trigger = function(event) {
    console.log(event);
    var ref = this.listeners[event];
    len = ref.length;

    for(var i = 0; i < len; i++) {
        var listener = ref[i];
        if(typeof listener === "function") {
            listener();
        }
    }
}

var observer = new Observer();
var greet = function () {
    console.log("Good morning");
};
observer.on("morning", greet);
observer.trigger("morning");

var sayEvening = function () {
    console.log("Good evening");
}
observer.on("evening", sayEvening);
observer.trigger("evening");

Answer 1

JavaScriptにおけるObserverパターンのユースケースについての質問という認識であっていますでしょうか？

JavaScriptではObserverパターンは頻出です、ただしそれがObserverという名前で明示的に呼ばれていないことが多いかもしれません。

例えばブラウザで動くアプリケーションを作る際に利用するjQueryは、DOM要素に対してクリックされた時に実行したい処理をonメソッドで登録します。
以下はjQueryのAPIドキュメントからの抜粋です:

$( "#dataTable tbody tr" ).on( "click", function() {
  console.log( $( this ).text() );
});

ここではid dataTableの子要素であるtbody trがクリックされた時にtbody trのテキストをコンソールに出力するよう設定しています。
ブラウザで動くアプリケーションのように対話型のアプリケーションを作りたい場合、Observerパターンがよく出てきます。

またサーバサイドJavaScriptのNode.jsでは処理をブロックしないように、I/O待ち等時間のかかる処理の結果をコールバックで受け取るスタイルで記述する必要があります。
いくつかあるスタイルの内でStreamと呼ばれるAPIはEventEmitter(Observerパターンを実装している)インタフェースを実装していて、やはりonメソッドで任意のイベントが発火した時の処理を登録するようになっています。
以下はNode.jsのAPIドキュメントからの抜粋です:

const readable = getReadableStreamSomehow();
readable.on('data', (chunk) => {
  console.log(`Received ${chunk.length} bytes of data.`);
});
readable.on('end', () => {
  console.log('There will be no more data.');
});

ここではReadableStreamを返却するgetReadableStreamSomehowを実行して、例えばファイル等を読み込むためのStreamを手に入れた後、Streamのonメソッドでデータが来た時、データを読み終わった時の処理を登録しています。

JavaScriptは元々シングルスレッドが基本なので、なるべく処理をブロックしないようプログラムを構築する必要があり、その解決手段の一つとしてObserverパターンが多く用いられているのだと思います。

Comments

[poooooo]

ありがとうございます。
よく見かけるjQueryのパターンもObserverパターンなのですね。
何度も使っているのに全く気づきませんでした。大変参考になりました。