オブジェクト指向での開発

Tag:

「プロトタイプを定義する方法」と「クラスを定義する方法(ES6)」について取り上げます。

プロトタイプを定義

ES5ではプロトタイプを定義して、オブジェクトを作っていきます。

function Animal(options) {
  this.name = options.name;
  this.old = options.old;
}

// prototypeを利用することでメモリ節約
Animal.prototype = {
  showName: function () {
    console.log(this.name);
  },
  showOld: function () {
    console.log(this.old);
  }
}

var a = new Animal({name: 'ジョン', old: 22});
a.showName();  // ジョン
a.showOld();   // 22

プライベートプロパティ、プライベートメソッドを利用したいのであれば以下のようにします。

function Animal() {
  // プライベートプロパティ
  var _name;
  var _old;
  
  // プライベートメソッド
  var _checkOld = function(old) {
    return (old > 0);
  }
  
  // パブリックメソッド(プライベート変数にアクセス)
  this.setName = function(name) {
    _name = name;
  }
  this.getName = function() {
    return _name;
  }
  
  this.setOld = function(old) {
    if(_checkOld(old)) {
      _old = old;
    }
  }
  this.getOld = function() {
    return _old;
  }
}

// パブリックメソッド(プライベート変数にアクセスしない)
Animal.prototype = {
  showName: function() {
    console.log(this.getName());
  },
  showOld: function() {
    console.log(this.getOld());
  }
}

var a = new Animal();
a.setName('ジョン');
a.setOld(22);

a.showName();  // ジョン
a.showOld();   // 22

クラスを定義

ES6ではclassが導入されました。

// animal.js
class Animal {
  constructor(options) {
    this.name = options.name;
    this.old = options.old;
  }

  showName() {
    console.log(this.name);
  }
  
  showOld() {
    console.log(this.old);
  }
}
export default Animal;
import Animal from './animal.js';
var a = new Animal({name: 'ジョン', old: 22});
a.showName();  // ジョン
a.showOld();   // 22

継承

クラスは継承させることもできます。

class Animal {
  constructor(options) {
    this.name = options.name;
    this.old = options.old;
  }

  showName() {
    console.log(this.name);
  }
  
  showOld() {
    console.log(this.old);
  }
}

class Dog extends Animal {
  constructor(options) {
    super(options);
  }
  
  bark() {
    console.log('わんわん');
  }
}

var a = new Dog({name: 'ジョン', old: 22});
a.showName();  // ジョン
a.showOld();   // 22
a.bark();      // わんわん

スポンサーリンク