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フロントエンド開発

執筆者:

関連記事

Chromeを使ったAngular-cliのオンラインデバッグの方法について

当セクションでは、angular-cliの開発において、ブレイクポイントを設定するオンラインデバッグの方法について説明したいと思います。ChromeのデベロッパーツールによってTypescriptのソ ...

TypeScriptとSystemJSを使ったWEBフロントエンド開発

当セクションでは前回の『SystemJSを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、モジュール管理ツールとしてのSystemJSの機能を把握したいと思います。以前に紹介し ...

lite-serverを使った開発サーバの構築

Lite-Serverのパッケージを使った開発サーバの構築方法を説明したいと思います。開発用のタスクはnpm-scriptsを使用します。 記載した実行環境は以下の通りです。Node.jsのインストー ...

JavaScriptのスコープとモジュールについて

仕様と問題点 JavaScriptにはアクセス修飾子はない。 JavaScriptのスコープは、「グローバルスコープ」と「関数スコープ(ローカルスコープ)」のみ。JavaScriptではスコープ(変数 ...

(webpack2)webpack-dev-serverを使ったWEBフロントエンド開発

当セクションでは前回の『Webpackを使ったWEBフロントエンド開発』をもとに具体的なプロジェクトを作成して、webpackの機能を把握したいと思います。使用するパッケージはwebpack2になりま ...