JavaScriptのクラスの基礎

JavaScriptのクラスの構成

• 関数
• this
• new演算子

最小限上記の3つが理解できてればOK

関数

• function
• var function

JavaScriptの関数には関数宣言と関数式の2つがある。説明は以下の記事がわかりやすい。

関数宣言だと、関数ごと巻き上げられるのでどこからでも呼び出せるため、関数式で先頭で変数にセットした方がいい。

関数宣言と関数式の違い
http://qiita.com/orangemittoo/items/ba82462610f0b72915f6

関数の場合の変数の巻き上げ問題について
http://qiita.com/cocottejs/items/143f70e806c61ffafe28

this

他の言語では、thisは通常インスタンス自身を表すが、JavaScriptのthisはその関数が呼びだされた際にその関数を格納していたオブジェクトのことを指す。

var sayHelloShared = function() {
  console.log('Hello' + this.name);
};

var human = {
  sayHello: sayHelloShared,
  name: 'masaru',
};

human.sayHello();

Hello masaruと表示される

• callを使うと、関数を呼び出すオブジェクトを指定できる

sayHelloShared.call(human);

new演算子

• 他の言語がクラスのインスタンス化を行うnewとは違い、JavaScriptは任意の関数と一緒に呼び出す(JavaScriptにはクラス機構が無い)
• newと一緒に関数を呼び出すとまず新しい空のオブジェクト(つまり{})が生成される
• 次に関数が呼び出される。その際には関数内のthisは生成されたオブジェクトを指す

var Person = function(name, age) {
  this.name = name;
  this.age = age;
};

var masaru = new Person('masaru', 7);

console.log(masaru.name);

• つまり、JavaScriptはnew演算子を使うことで関数をコンストラクタとして利用することが出来、クラスを実現できる
• masaru.constructorというプロパティで生成時に利用した関数への参照を保持している

その他

ES6からは標準でクラス機構が用意されており、他言語と同じように、Class クラス名の書き方が出来る