JavaScriptのコンストラクタについて

Published: 2016年3月9日 by tomsato

概要

JavaScriptのコンストラクタについて調べる

JavaScript勉強シリーズ

コンストラクタについて

コンストラクタとはオブジェクト生成のために使う関数です

コンストラクタ呼び出し時には「new」を使ってインスタンスオブジェクトを生成します
通常の関数とコンストラクタの違いは呼び出し方による違いだけなので
どんな関数でも「new」で呼び出せばそれはコンストラクタになります

コンストラクタの例

// コンストラクタ
function TestClass(x) {
  this.x = x;
}

// コンストラクタの呼び出し
var obj = new TestClass(3);
print(obj.x); // 3

慣習的にコンストラクタ名は(TestClassのように)大文字で始めます

コンストラクタ呼び出し時の挙動について

newを使ってコンストラクタ呼び出しが行われた場合の挙動については以下の処理が行われます

  1. 空のオブジェクトが作成される
  2. newで指定した関数(コンストラクタ)が呼ばれる
  3. 2呼ばれたコンストラクタのthisは1で作成した空のオブジェクトを参照する
  4. コンストラクタを実行
  5. コンストラクタの戻り値としてオブジェクトの参照が返る

コードで表現すると
最初にthisを宣言して返り値にthisを指定しているのと同じ動きになる

function TestClass(x) {
  // var this = {};

  this.x = x;

  // return this;
}

明示的にreturnを記述した場合の挙動について

コンストラクタはreturn thisがあるかのような動作をしますが
コンストラクタ内に実際にreturnがあると以下のような動作になります

returnで何を返すか コンストラクタを呼んだ際の評価値
return (オブジェクト) オブジェクト
return (基本型) this

なので以下のような挙動を起こします

// returnでオブジェクトを記述すると
// objにはそのオブジェクトが入る
function TestClass1() {
  this.x = 5;
  return {x:3, y:2}
}
var obj1 = new TestClass1();
print(obj1.x, obj1.y); // 3 2 (5ではないことに注意)
print(typeof obj1);   //object

// returnに基本型を記述すると
// objにはthis参照が入る
function TestClass2() {
  this.x = 1;
  return 5;
}
var obj2 = new TestClass2();
print(obj2);        // [object Object] (5ではないことに注意)
print(obj2.x);      // 1
print(typeof obj2); // オブジェクト

参考

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

社内ツールなどの超小規模なAPIをGolangで実装する際にフレームワークを使うべきかを、実際にnet/httpを使った実装とフレームワークを使った実装を比較することでどれだけ優位性があるかを見ていきたいと思います。今回はフレームワークにはシンプルで使いやすそうなEchoを使うことにします。

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

カテゴリ一覧

タグ一覧