0
0

More than 5 years have passed since last update.

ExtCore使うとJavascriptで簡単に継承をサポートしたクラスが定義できる

Posted at

結構古いライブラリなんですが、ExtCore( https://staging-japan.sencha.com/products/extcore )というライブラリがあります。有名なSencha Touchの会社が公開しているライブラリです。このライブラリを使うと、Javascriptで簡単に継承をサポートしたクラスが定義できます。

    ClassA = Ext.extend( Ext.util.Observable , { //Ext.util.Observableクラスを基底クラスとしてClassAを宣言する。
        constructor: function(){
            //クラスがnewされた時に呼ばれる。

            ClassA.superclass.constructor.call( this );
            //親クラスのconstructorを呼ぶ。
        },

        alert : function( message ){
            alert( message );
        },

        showAlert : function(){
            this.alert( "Class A" );
        }
    });

    ClassB = Ext.extend( ClassA ,{
        constructor: function(){
            ClassB.superclass.constructor.call( this );//Class Aのコンストラクタを実行
        },

        showAlert: function(){//overrideする。
            this.alert("Class B"); //Class Aのalertが呼ばれる。
        }
    });

    Ext.onReady( function(){
        var classAButtonElement = Ext.get( "classA" );
        classAButtonElement.on( "click" , function(){
            var classA = new ClassA();
            classA.showAlert();
        } );

        var classBButtonElement = Ext.get( "classB" );
        classBButtonElement.on( "click" , function(){
            var classB = new ClassB();
            classB.showAlert();
        } );
    });

サンプルコードは、Class Aボタンが押された場合は、ClassAを、Class Bボタンが押された場合は、ClassBをインスタンス化して、showAlertメソッドを実行します。
Class BのshowAlertメソッドでは、this.alertを実行しています。この時、継承元のClassAのthis.alertが実行されます。

残念ながらprivateは実現できていないですが、しっかりとクラスが定義できますので大規模開発などで使用できます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0