Help us understand the problem. What is going on with this article?

個人的なJavaScriptのクラス定義テンプレ

More than 5 years have passed since last update.

いや、JavaScriptにクラスなんぞ存在しないので、あくまでクラスじゃなくてクラスもどきなんですが、最近はこんな書き方で書いてます。CoffeeScriptとかTypeScriptが生成するコードを真似たつもり。

ちゃんとnew使えるし、継承もmixinもあるよ!

特に何も継承していないクラス

/**
 * Klass
 * 
 * @constructor
 */
var Klass = new function(){
  var self = function Klass() {
    //コンストラクタの処理をここに書く
  };

  //メソッド定義。
  self.prototype = {
    constructor: self

    ,method: function method() {
    }

    //,method2: function method2() { }
    //...
  };

  return self;
};

//使い方
var k = new Klass();
k.method();
console.log(k instanceof Klass); //true
console.log(k.constructor.name); //"Klass"

ポイント

  • Klassmethodを置き換えて使います
  • selfは何度も出てきちゃうので何か他の変数名でもよい
  • new function(){ ... } は即時関数 (function(){ ... })() の別記法です。個人的趣味。
  • constructorをわざわざ代入しているのは、constructor.nameの上書きを防止するため。
  • constructor.nameはデバッグ時に結構使われるので…
  • prototypeをあまり何度も書きたくないのでオブジェクトの代入方式を採用
  • selfを4回も書かないとだけど泣かない
  • privateなんてありません。命名規則とかで頑張る
  • ナビ子記法を意識して関数名は省略しない
  • 前カンマ方式でつけ忘れ防止

クラスの継承

さて、継承をしたいならもう少し複雑になります。継承を補助してくれる関数を定義しておかないとやってられません。

/**
 * Object.createの拡張関数
 */
function extend(o) {
  var f = extend.f, i, len, n, prop;
  f.prototype = o;
  n = new f;
  for (i=1, len=arguments.length; i<len; ++i) {
    for (prop in arguments[i]) {
      n[prop] = arguments[i][prop];
    }
  }
  return n;
}
extend.f = function(){};

これがあれば、継承はこんな感じ。KlassクラスがParentクラスを継承しているイメージです。

var Klass = new function(){
  var self = function Klass() {
    //親クラスのコンストラクタを呼ぶ
    Parent.apply(this, arguments);
    //コンストラクタをここに書く
  };

  var uber = Parent.prototype;

  self.prototype = extend(uber, {
    constructor: self

    ,method: function method() {
      //親クラスのmethodを呼びたい場合
      uber.method.apply(this, arguments);
    }

    //,method2: function method2() { }
    //...
  });

  return self;
};
  • 親クラスのコンストラクタは明示的に呼ぶ必要あり
  • Parent.apply(...)ではなくuber.constructor.apply(...)と書いてもOK。しかし長い…
  • Parent.prototypeとか何度も打ちたくないのでuberというエイリアスを作る
  • 本当はsuperにしたいところだけど予約語なのでuberで妥協

ミックスイン

JavaScriptに多重継承はないのだけれど、これはメソッド群をコピーする形でナンチャッテ多重継承を実現します。

関数をまとめただけのオブジェクトを作れば、ミックスインできます。

/**
 * @mixin
 */
var SomeMixin = {
  hoge: function(){
  }
  ,fuga: function(){
  }
};
/**
 * Klass
 * Parentを継承して、SomeMixinをミックスインする形式
 *
 */
var Klass = new function() {
  var self = function Klass() {
    //親クラスのコンストラクタを呼ぶ
    Parent.apply(this,arguments);
    //コンストラクタの処理を書く
  };

  var uber = Parent.prototype;

  //親クラス, mixin1, mixin2, ... 自前のメソッド定義の順
  self.prototype = extend(uber, SomeMixin, {
    constructor: self

    ,method: function method() {
    }

    //,method2: function method2() { }
    //...
  });

  return self;
};
  • ミックスインは何個でもOK
  • 後に書いた方が勝つので、クラス独自定義を最後に書く

適当な例

/**
 * Animal
 *
 * @constructor
 */
var Animal = new function() {
  var self = function Animal(name) {
    this.name = name;
  };

  self.prototype = {
    constructor: self

    ,breathe: function breathe() {
      console.log(this.name + "「すーはー」");
    }

    ,eat: function eat() {
      console.log(this.name + "「もぐもぐ」");
    }
  };

  return self;
};

/**
 * Humanクラス
 *
 * @extends Animal
 */
var Human = new function() {
  var self = function Human(name) {
    Animal.call(this, name);
  };

  var uber = Animal.prototype;

  self.prototype = extend(uber, {
    constructor: self

    /**
     * Humanクラスならごはん食べる前後に挨拶する
     */
    ,eat: function eat() {
      console.log(this.name + "「いただきます」");
      uber.eat.call();
      console.log(this.name + "「ごちそうさまでした」");
    }

    /**
     * ヒトは考える
     */
    ,think: function think() {
      console.log(this.name + "「うーん」");
    }
  });

  return self;
};

/**
 * WingMixin
 *
 * @mixin
 */
var WingMixin = {
  fly: function fly() {
    console.log(this.name + "「ぱたぱた」");
  }
};

/**
 * Animalを継承してWingをミックスインしてこうもりクラス
 *
 * @constructor
 * @extends Animal
 */
var Bat = new function() {
  var self = function Bat(name) {
    Animal.call(this, name);
  };

  var uber = Animal.prototype;

  self.prototype = extend(uber, WingMixin);

  return self;
};
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away