Cat Paw Software

この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。
====== クラス ======

===== クラス構文 =====

ECMAScript 2015からクラス構文が導入された。

<code javascript>
'use strict';   // クラス構文の使用にはstrictモードが必須です

class Hoge {
  // コンストラクタ
  constructor(val) {
    this._value = val  
  }
 
  // メソッド
  print() {
    console.log(this._value);
  }
  
  // ゲッター
  get value() {
    return this._value;
  }
  
  // セッター
  set value(val) {
    this._value = val;
  } 
}

var hoge = new Hoge(1);

hoge.print();   // => 1 と出力

hoge.value = 2;

console.log(hoge.value)   // => 2 と出力
</code>

これは以前のprototypeによるクラス定義のシンタックスシュガーにすぎず、Hogeは関数オブジェクトとして定義されている。

<code>
typeof(Hoge);   // => function
</code>

ただし関数としての呼び出しには制限がかけられており、newを付けずに呼び出すとエラーになる。

<code>
Hoge();   // => TypeError: Class constructors cannot be invoked without 'new'
</code>

==== 継承 ====

<code>
class Fuga extends Hoge {
  // メソッド
  print2() {
    console.log(this._value * 2);
  }
}

var fuga = new Fuga(3);

fuga.print();    // => 3 と出力
fuga.print2();   // => 6 と出力
</code>


==== staticメソッド ====

<code>
class Piyo extends Hoge{
  // メソッド
  static piyo() {
    console.log('ピヨピヨ');
  }
}

Piyo.piyo();    // => ピヨピヨ と出力
</code>


===== prototypeによるクラス定義 =====

ここからはES5以前の話

==== コンストラクタ ====

関数はコンストラクタとして働く。コンストラクタとして使う関数は、慣例として大文字で名前を定義する。

<code javascript>
// クラス定義１
// コンストラクタ関数
function Greet() {
    // プロパティの定義
    this.message =  "hello";

    // メソッドの定義
    this.say = function() {
        return this.message;
    };
}

// インスタンスの生成
var greet = new Greet();

// メソッドの呼び出し
greet.say();

</code>

==== constructor プロパティ ====

生成されたインスタンスは constructor というプロパティを持っており、自分のコンストラクタにアクセスできる。

<code javascript>
function Greet() {
    // ...
}

var greet = new Greet();

greet.constructor;   // => Greet
</code>

==== プロトタイプ ====

コンストラクタは prototype というプロパティを持っている。

<code javascript>
function Greet() {
   // ...
}
Greet.prototype;               // => Greet { } 

var greet = new Greet();
greet.constructor.prototype;   // => Greet { }
</code>

new演算子で作成されたインスタンスは、自分のコンストラクタの prototype が持っているプロパティやメソッドに、あたかも自分のメソッドやプロパティであるかのようにアクセスできる。

よって prototype にプロパティやメソッドを定義してインスタンスで利用することができる。ただし全てのインスタンスで共有されてしまうため、メソッドのみ prototype に定義するのが一般的である。

<code javascript>
// クラス定義２
function Greet(message) {
　　// プロパティ定義
    this.message = message;
}

// メソッド定義
Greet.prototype.say = function() {
    return this.message
}   

var greet = new Greet("hello");

greet.say();   // => "hello"
</code>

prototypeを丸ごと上書きして置き換えることもできる。

<code javascript>
// クラス定義３
function Greet(message) {
　　// プロパティ定義
    this.message = message;
}

Greet.prototype = {
    say: function() {
        return this.message
    }   
};

var greet = new Greet("world");

greet.say();
</code>

==== __proto__ プロパティ ====

new演算子で作成されたインスタンスは、内部的に <html>__proto__</html> というプロパティを持っている。これはコンストラクタ関数の prototype と全くオブジェクトを参照している。

<code javascript>
var greet = new Greet();
greet.__proto__ === Greet.prototype;               // => true 
greet.__proto__ === greet.constructor.prototype;   // => true
</code>

これは隠しプロパティ扱いの場合もあるので、実際のプログラミングでは constructor.prototype を使うのがよい。

===== プロトタイプチェーン =====

インスタンスは、<html>__proto__</html>（以下プロトタイプと呼ぶ）が持っているメソッドやプロパティを、自分のメソッドやプロパティであるかのように呼び出すことができる。

あるインスタンスに対してメソッドAを呼び出したとき、もし、インスタンスがメソッドAを持っておらず、プロトタイプがメソッドAを持っていれば、プロトタイプのメソッドAが呼び出される。もしプロトタイプもメソッドAを持っていなければ、プロトタイプのプロトタイプがメソッドAを持っているか探す。

この仕組みをプロトタイプチェーンと呼ぶ。プロトタイプチェーンを使うと継承に似たことができる。

<code javascript>
function Greet() {
    this.message = "hello";
}
Greet.prototype.say = function() {
    return this.message
}

function NightGreet() {
    this.message = "good night";
}
NightGreet.prototype = new Greet();  // Greetを継承

function JpNightGreet() {
    this.message = "おやすみなさい";
}
NightGreet.prototype = new NightGreet();  // NightGreetを継承


// JpNightGreet型のインスタンス生成
var jpNightGreet = new JpNightGreet();

// Greet型の（プロトタイプのプロトタイプ）メソッドsayが呼び出される
jpNightGreet.say();
</code>

プロトタイプチェーンを最後までさかのぼると、最終的にはObjectになる。よってObjectのメソッドは全てのインスタンスから呼び出すことができる。（といってもvalueOfとtoString、toSourceぐらいしか無い）