みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

Javascriptで他のクラスのメソッドを叩きたい

function ClassA() {
    function say() {
        // ここでClassBのsayメソッドを実行したい
    }

    this.say = say;
}

function ClassB() {
    function say() {
        alert("B");
    }

    this.say = say;
}

こんなことってありませんか?

一番シンプルに考えるのであれば ClassA のスコープ内で ClassB を new してあげればOKです。

function ClassA() {
    var classB = new ClassB();

    function say() {
        classB.say();
    }

    this.say = say;
}

function ClassB() {
    function say() {
        alert("B");
    }

    this.say = say;
}

一見これで解決しそうですが、これだとClassAはClassBのインターフェイスを知っていないといけません。
これぐらいシンプルな例であれば問題ないのですが、これをつづけていくとクラスの依存関係がえらいことになりどんどん複雑になってしまいます。
そんなときに役に立つ解決方法のひとつがEventDispatcherです。


EventDispatcherをつかう

前回つくった EventDispatcher をつかえば、

function ClassA() {
    function say() {
        this.fireEvent("handleCallSay");
    }

    this.say = say;
}

function ClassB() {
    function say() {
        alert("B");
    }

    this.say = say;
}

var classA = new ClassA(),
    classB = new ClassB();

    classA.addEventListener("handleCallSay", classB, classB.say);

    classA.say(); // classBのsayメソッドが実行される

という感じで、クラス同士がお互いのインターフェイスを知っている必要がなくなります。
(実行箇所はクラスAのsayメソッドで発火するイベント名を知っている必要があります)

非常に便利です。