JavaScriptのクラス？コンストラクタ？？

Last updated at 2015-12-07Posted at 2013-04-10

JavaScriptのクラス？コンストラクタ？？

最初に、JavaScriptにはクラスはありません。
コンストラクタからインスタンスを生成します。

なんだかなぁ・・と言う人は、
とりあえず単語は置いておいてコードから理解してください。

コンストラクタの基本

コンストラクタ

function Dog(name, cry) {
  this.name = name;
  this.bark = function() {
    console.log(cry);
  };
}
var dog = new Dog('きなこ', 'わんわん');
console.log(dog.name); // きなこ
dog.bark(); // わんわん

もし「new」を忘れたら、関数呼び出しになってしまって一大事です。
これがわからない方はこちらの記事へ。
「JavaScript」の「this」は「４種類」？？

#newの挙動
もし「new」をつけた場合は何がおこっているのか。
実は暗黙のルールで二行加わっています。

コンストラクタ

function Dog(name, cry) {
  // var this = {};
  this.name = name;
  this.bark = function() {
    console.log(cry);
  };
  // return this;
}

このように「new」をつけた場合は上の挙動になります。

これを見たら理解は簡単ですね。
毎回新しい空オブジェクトを生成して、
それに初期プロパティを加えて「return」しています。

newをつけた場合の暗黙のルールとして…

んっ、なら明示的に書いた場合はどうなるの？？
ってことで別の書き方も身につけましょう。

#newなしパターンは??

function Dog(name, cry) {
  var self = {};
  self.name = name;
  self.bark = function() {
    console.log(cry);
  };
  return self;
}

この場合はさっきのthisの暗黙のルールは適用されなくなります。
なぜなら明示的にローカル変数「self」を「return」してるからです。

なので、「new」をつけてもつけなくても挙動は一緒になります・
暗黙のルールの「return this;」がないからです。

function Dog(name, cry) {
  return {
    name: name,
    bark: function() {
      console.log(cry);
    }
}

これはさっきのselfとまったく同じです。

これも単純に関数なのですが、
基本的には最初を大文字として
コンストラクタ呼び出しを期待するのがbetterです。

そしてもし「new」をつけ忘れたとしても大丈夫。
バグは発生せず、期待通りの動きをしてくれます。

#注意点

ここでメモリを気にする方は関数の生成についても考えたいですね☆
上記の欠点としてはプロトタイプへのリンクがきれてしまうことです。

はて、プロトタイプって？
[JavaScriptのプロトタイプ入門]
(http://qiita.com/items/809114f943208aaf55b3)

外部アカウント

技術情報のみつぶやくアカウント作成しました。JavaScriptは最新情報も追っていきます。
[Twitterはこちら]
(https://twitter.com/takeharumikami)
[Feedlyのフォローはこちら]
(http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fqiita.com%2Ftakeharu%2Ffeed)

JavaScriptのクラス？コンストラクタ？？

JavaScriptのクラス？コンストラクタ？？

コンストラクタの基本

外部アカウント

おすすめの記事