Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
809
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Organization

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

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」は「4種類」??

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のプロトタイプ入門

外部アカウント

技術情報のみつぶやくアカウント作成しました。JavaScriptは最新情報も追っていきます。
Twitterはこちら
Feedlyのフォローはこちら

おすすめの記事

入門者がつまづく、thisの挙動を4種類に分けて簡単に学ぶならこれ。Apply, callの挙動までわかる。
JavaScriptの「this」は「4種類」?」

JavaScriptでは関数はすべてクロージャ。
そもそもクロージャって?JavaScriptでクロージャ入門

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
809
Help us understand the problem. What are the problem?