モーダルを閉じる工作HardwareHub ロゴ画像

工作HardwareHubは、ロボット工作や電子工作に関する情報やモノが行き交うコミュニティサイトです。さらに詳しく

利用規約プライバシーポリシー に同意したうえでログインしてください。

工作HardwareHub ロゴ画像 (Laptop端末利用時)
工作HardwareHub ロゴ画像 (Mobile端末利用時)

JavaScript 簡単なクラス定義

モーダルを閉じる

ステッカーを選択してください

モーダルを閉じる

お支払い内容をご確認ください

購入商品
」ステッカーの表示権
メッセージ
料金
(税込)
決済方法
GooglePayマーク
決済プラットフォーム
確認事項

利用規約をご確認のうえお支払いください

※カード情報はGoogleアカウント内に保存されます。本サイトやStripeには保存されません

※記事の執筆者は購入者のユーザー名を知ることができます

※購入後のキャンセルはできません

作成日作成日
2013/07/30
最終更新最終更新
2017/06/06
記事区分記事区分
一般公開

目次

    PythonとJavaScriptがメイン。サーバーレスとマイクロサービスが好き。

    0
    ステッカーを贈るとは?

    JavaScriptではコンストラクタをfunctionで定義したりprototypeにメソッドを登録したりとやや癖のある方法ではありますが、下記のようにクラスを定義できます。

    sample.js

    function MyClass(prop) { // コンストラクタ
        this.prop = prop;
    }
    // var MyClass = function(prop){ // としても同じです
    //   this.prop = prop;
    // };
    
    MyClass.CONST = 128; // クラス定数
    
    MyClass.classMethod = function(x) { // クラスメソッド
        return x*x;
    };
    
    MyClass.prototype.method = function(x) { // メソッド
        return x+x;
    };
    // MyClass.prototype = { // メソッド数が多い場合は以下の記法が役立ちます
    //   method: function(x) {
    //     return x+x;
    //   },
    //   method2: function(x) {
    //     return x+x;
    //   }
    // };
    
    // インスタンス
    var obj = new MyClass(1.0);
    console.log(obj.prop);
    console.log(obj.method(512));
    
    // クラス
    console.log(MyClass.CONST);
    console.log(MyClass.classMethod(12));
    

    実行例

    $ node sample.js 
    1
    1024
    128
    144
    

    非効率なメソッド定義

    一見自然に見えますが、インスタンスメソッドを下記のようにコンストラクタに含めて定義するとインスタンス毎にメソッドのためにメモリが確保され、動作はしますが非効率です。

    sample.js

    function MyClass(prop) { // コンストラクタ
        this.prop = prop;
        this.method = function(x) { // メソッド
            return x+x;
        }
    }
    
    // インスタンス
    var obj = new MyClass(1.0);
    console.log(obj.prop);
    console.log(obj.method(512));
    

    実行例

    $ node sample.js 
    1
    1024
    

    最初のsample.jsのように、prototypeという参照で、特殊な共有オブジェクトに関数定義を保存することで上記問題を回避できます。

    プライベートメンバ

    クロージャを利用してプライベートメンバを実現できます。prototypeで関数定義を共有しないことがポイントです。

    sample.js

    function MyClass(prop) {
        this.getProp = function() {return prop;}
    }
    
    var obj1 = new MyClass(1);
    var obj2 = new MyClass(2);
    console.log(obj1.getProp());
    console.log(obj2.getProp());
    

    実行例

    $ node sample.js 
    1
    2
    

    名前空間

    空のオブジェクトは名前空間として利用できます。

    var NameSpaceA = function(){};
    var NameSpaceB = function(){};
    
    NameSpaceA.MyClass = function(prop){
      this.prop = prop;
    };
    
    NameSpaceB.MyClass = function(prop){
      this.prop = prop;
    };
    
    NameSpaceA.MyClass.prototype.method = function(){
      return '[NameSpaceA::MyClass] ' + this.prop;
    };
    
    NameSpaceB.MyClass.prototype.method = function(){
      return '[NameSpaceB::MyClass] ' + this.prop;
    };
    
    var objA = new NameSpaceA.MyClass('a');
    var objB = new NameSpaceB.MyClass('b');
    
    console.log(objA.method()); //=> [NameSpaceA::MyClass] a
    console.log(objB.method()); //=> [NameSpaceB::MyClass] b
    
    0
    詳細設定を開く/閉じる
    アカウント プロフィール画像 (本文下)

    PythonとJavaScriptがメイン。サーバーレスとマイクロサービスが好き。

    記事の執筆者にステッカーを贈る

    有益な情報に対するお礼として、またはコメント欄における質問への返答に対するお礼として、 記事の読者は、執筆者に有料のステッカーを贈ることができます。

    さらに詳しく →
    ステッカーを贈る コンセプト画像

    Feedbacks

    Feedbacks コンセプト画像

      ログインするとコメントを投稿できます。

      関連記事