JavaScriptでのクラス

投稿日時: 投稿者:

JavaScriptはプロトタイプベースのオブジェクト指向言語です。クラス宣言をするための文法はありませんが、同等のことを実現できます。

初期値をセットしてオブジェクトを作成する関数をコンストラクタとみなすことができます。new演算子を使ってコンストラクタを呼び出すと、新しいオブジェクトを作成できます。

function UserInfo(name) {
  this.name = name;
}
var user_info = new UserInfo('user001');

メソッドはプロパティへ関数オブジェクトを代入して用意します。

function UserInfo(name) {
  this.name = name;
  this.say = function(message) {
    alert(message);
  }
}
var user_info = new UserInfo('user001');
user_info.say('Hello');

prototypeへメソッドを追加することもできます。prototypeはオブジェクト生成の元となったプロトタイプオブジェクトになりますから、これにメソッドを追加すると、このプロトタイプオブジェクトを参照するすべてのオブジェクトにメソッドが追加されます。

function UserInfo(name) {
  this.name = name;
}
UserInfo.prototype.say2 = function(message) {
  alert(message);
}
var user_info = new UserInfo('user001');
user_info.say2('Hello');

プロトタイプの挙動についてはわかりにくいかもしれません。ここまで見た方法を網羅するサンプルを動かしてみると、違いが分かるはずです。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>setInterval sample 1</title>
</head>
<body>
  <div id="target1" style="position:absolute;"></div><br />
<script>
var text = '';
function UserInfo(name) {
  this.name = name;
}
var user_info = new UserInfo('user000');

function UserInfo1(name) {
  this.name = name;
  this.say = function(message) {
    return name + ':(1):' + message;
  }
}
var user_info1 = new UserInfo1('user001');
var user_info1a = new UserInfo1('user001a');
text = user_info1.say('Hello');
text = text + '<br />' + user_info1a.say('Hello');
// プロパティは置き換えることができる
user_info1a.say = function(message) {
    return this.name + ':(1a):' + message;
}
text = text + '<br />' + user_info1.say('Hi');
text = text + '<br />' + user_info1a.say('Hi');

function UserInfo2(name) {
  this.name = name;
}
UserInfo2.prototype.say = function(message) {
  return this.name + ':(2):' + message;
}
var user_info2 = new UserInfo2('user002');
var user_info2a = new UserInfo2('user002a');
text = text + '<br />' + user_info2.say('Hello');
text = text + '<br />' + user_info2a.say('Hello');

// prototypeのプロパティを置き換えるとuser_info2へも影響
UserInfo2.prototype.say = function(message) {
  return this.name + ':(2a):' + message;
}
text = text + '<br />' + user_info2.say('Hi');
text = text + '<br />' + user_info2a.say('Hi');

document.getElementById('target1').innerHTML = text;
</script>
</body>
</html>

結果は次のようになります。

user001:(1):Hello
user001a:(1):Hello
user001:(1):Hi
user001a:(1a):Hi
user002:(2):Hello
user002a:(2):Hello
user002:(2a):Hi
user002a:(2a):Hi

JavaScriptについては、下記の書籍の参考になるでしょう。

プログラミング言語一般については、下記が参考になるでしょう。

同じカテゴリの記事: General