javascript WEB WEBフロントエンド開発

JavaScriptのコンストラクタとプロトタイプについて

投稿日:2017年12月6日 更新日:

概要

  • Javascriptにはクラスという概念はない
  • コンストラクタ定義+newによってインスタンスを生成する。
  • ES6以前ではclass構文が実装がされていなかったので、prototypeという機能を使ってclass構文を実装していた

 

コンストラクタについて

1.コンストラクタ定義を行い(作業①)、newを付ける事(作業②)の2つの作業で、コンストラクタ定義によるインスタンスを生成する。newをしない場合は、単なる関数の実行となる。

(newをした場合)

  • インスタンスを生成する
  • Func内のthisは、コンストラクタ呼出しパターンのthisを示し、Func1内で生成されたFunc1のインスタンス(後から説明する暗黙で生成されたthis)を示す。
  • newを付けた場合、内部的に以下の処理が行われている事と等価になる

newを付けた場合は、以下の通りの処理を暗黙的に実行。 
(1)毎回新しい空オブジェクトを生成する(var this = {})
(2)そのオブジェトに初期プロパティを加える。
(3)そのオブジェクトを「return」する。

 

(newしなかった場合)

  • Func("111", "222");は単に関数の実行となる。
  • 戻り値のない関数となるため、f2はundefiledとなる。
  • Func内のthisはグローバルオブジェクトと解釈され、nameとprintはグローバルとして扱われる。そのため、Func("111", "222");実行前に定義されたname変数とprint関数を上書きする。

 

2.コンストラクタ定義をせず(newを付けずに)、インスタンス化する方法

  • Funcは関数として動作させて、関数内で生成したインスタンスを戻り値として戻す。
  • 例え、new付けても同じ動きとなる。

(例1)明示的にローカル変数「self」を「return」してるので、thisの暗黙のルールは適用されない。

(例2){・・・}インスタンス化して、そのまま返す。

 

 

prototypeプロパティ

  • 新規に関数を生成するとprototypeプロパティが自動で作成される
  • prototypeプロパティは自分の親への参照を行う方法

(プロトタイプ例)

(類似する記述方法)

  • 上記よりプロトタイプの記述方法が良い。
  • 上記だと、newの実行で暗黙の var this = {}が生成されて、毎回毎回、関数の生成が実行されて効率が悪い。

 

 

クロージャ

  • JavaScriptは関数ごとにスコープが作られる。
  • クロージャとは「自分を囲むスコープにある変数を参照できる関数」の事で、内側の関数が外側の関数の変数を参照できる機能。
  • private変数(インスタンス変数)のように扱える。インスタンスにインスタンス変数を持たせる(保持させる)ことができ、その変数をメソッド処理で参照可能とする。

内側の関数innerFuncが外側の関数Funcの変数を参照できている。

 

 

参考にさせて頂いたページ

JavaScriptのプロトタイプからオブジェクト指向を学ぶ

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

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

 

 

 

スポンサーリンク

スポンサーリンク

-javascript, WEB, WEBフロントエンド開発

執筆者:

関連記事

Cordovaのメモ書き

  devicereadyイベント   Cordovaのアプリが実行される時、Cordovaが提供しているネイティブ機能をHTML5側からすぐに呼び出せることが出来ない。 Cordovaフレ ...

Apache2のモジュール設定

Apache2のモジュール設定について Apache2はデフォルトでGCIモジュール(CGID)が無効になっている。 Apache2のモジュールの有効化/無効化の設定は、a2enmodコマンド(有効化 ...

Angular2のクロスドメインアクセスの問題対応

Angular2のクロスドメインの対応を備忘録としてまとめました。私がAngular2のSPAを開発する時、フロントエンド側がangular-cliで、バックエンド(WEB-API)側がPHP+IIS ...

TypeScriptを使った超簡単なWEBフロントエンドの開発環境を構築する

当セクションではTypeScript、Lite-Serverのパッケージを使った超簡単なWEBフロントエンドの開発環境の構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用しま ...

JavaScriptのTips

valメソッド、htmlメソッド、textメソッド .html(): 引数をHTMLとして書き換え。タグが有効になる。 .text(): 引数を文字列として書き換え。タグはエスケープされて無効になる。 ...