JavaScript オブジェクト指向


JavaScriptのオブジェクト指向

 JavaScriptのオブジェクト指向は「プロトタイプベース」と言われます。他の言語では、クラスが存在しますが、JavaScriptではクラスがなくて、既存のオブジェクトを装飾することにより新たなオブジェクトを作成するスタイルです。

 JavaScriptではクラスが存在しませんが、その代わりになるのが関数で、関数にプロパティやメソッドを追加できます。このように作られた関数は、new演算子でインスタンス化できます。

プロパティ

 プロパティは関数内で this を使って定義します。つまり、this.名前 = 値 とするとそれがプロパティとなります。下の例は、「点」を表すクラス(関数)を定義しています。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

メソッド

 メソッドを定義するには、クラスの prototype プロパティの名前付きプロパティに関数を代入します。prototypeは継承元のFunctionオブジェクトから継承されたプロパティです。下の例は、プロパティの例にメソッド normを追加したものです。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.norm = function() {
  return Math.sqrt(this.x * this.x + this.y + this.y);
}


継承

 継承は新しく定義した関数で、継承元関数を呼出しプロパティを初期化します。追加プロパティやメソッドは依然と同じ方法で追加できます。もし、同じ名前のメソッドを追加すればオーバーライドになります。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.norm = function() {
  return Math.sqrt(this.x * this.x + this.y + this.y);
}

function Point2(x, y) {
  Point.call(this, x, y);
}

Point2.prototype = new Point();
Point2.prototype.constructor = Point2;
Point2.prototype.reverse = function() {
  this.x = -this.x;
  this.y = -this.y;
}


$(document).ready(function() {
  var p1 = new Point(5, 8);
  var s = "";
  s += (p1.x + " " + p1.y);
  s += " ";
  s += p1.norm();
  $("#result1").text(s);

  s = "";
  p2 = new Point2(1, 2);
  s += (p2.x + " " + p2.y);
  s += " ";
  p2.reverse();
  s += (p2.x + " " + p2.y);
  $("#result2").text(s);
});

CoffeeScriptを使う

 他の言語のオブジェクト指向に慣れているなら、CoffeeScriptを使ってクラスを定義する方法もあります。CoffeeScriptのソースはJavaScriptのソースに変換できるので、CoffeeScriptのclassキーワードを使って、簡単にクラスを定義できます。

 CoffeeScriptでソースを書いたら、次のようにしてJavaScriptに変換できます。変換されたJavaScriptソースはこの例で言うと、test.jsとして同じフォルダに保存されます。

coffee -c test.coffee

これはCoffeeScriptのclassを使ったソースの例です。

class Point
  x: 0
  y: 0
  constructor: (x, y) ->
    @x = x
    @y = y
  norm: () ->
    Math.sqrt(@x * @x + @y * @y)


p = new Point(1, 2)
console.log(p.x)
console.log(p.y)
console.log(p.norm())

上のCoffeeScriptは次のようにJavaScriptに変換されます。

// Generated by CoffeeScript 1.7.1
(function() {
  var Point, p;

  Point = (function() {
    Point.prototype.x = 0;

    Point.prototype.y = 0;

    function Point(x, y) {
      this.x = x;
      this.y = y;
    }

    Point.prototype.norm = function() {
      return Math.sqrt(this.x * this.x + this.y * this.y);
    };

    return Point;

  })();

  p = new Point(1, 2);

  console.log(p.x);

  console.log(p.y);

  console.log(p.norm());

}).call(this);

 

このページの先頭へ戻る