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); // オブジェクト

参考

Share

最近の投稿

NetlifyのSplit TestingとFunctionsについて使い方をまとめる Split TestingはGitHubのブランチをベースにしたA/Bテストを行うための機能のことで、FunctionsはNetlifyでAWS Lambdaを使うことができる

NetlifyとはHTMLなどの静的コンテンツのみで構成されたWebサイトを閲覧できる形で配信するWebサービス GitHubやBitbucket、GitLabなどと連携して使うことができて、リポジトリにプッシュすることで自動でCI/CDを行うことができる、無料枠が豊富で独自ドメインを設定可能

WordPressからJekyll(GitHub Pages)に移行した手順をまとめる。 お金的な事情や使いやすさなどの理由で無料のJekyll+GitHub Pagesに移行した。JekyllとはMarkdown等から静的ページを生成する静的サイトジェネレータ

Scala開発のためにScalaらしさをまとめる 言語設計者の設計思想を元にScalaらしさについてまとめる オブジェクト指向と関数型の融合について

StorybookとはUI開発環境を提供するツール React、React Native、Angular、Vueなどをサポートしている ユーザーは独立した開発環境でコンポーネントを個別に作成して挙動の確認をテストできたり、コンポーネントを一覧にしてカタログ化できるので他の人に紹介する時に使えたりする

カテゴリ一覧

タグ一覧