未分類

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でクロージャ入門。関数はすべてクロージャ?

 

 

 

スポンサーリンク

スポンサーリンク

-未分類

執筆者:

関連記事

ES6のクラス定義について

  概要 JavaScript はプロトタイプベースの言語であり、クラスベースの言語とは異なりクラスというものが存在しませんでした。 プロトタイプを使ってクラスと同等なことを実現するというこ ...

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

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

Macについて

  シングルクォートやダブルクォートが勝手に変換される対応 (問題点) Macのテキストエディット(標準搭載のテキストエディタ)で、シングルクォート(’)やダブルクォート(”)などを入力した ...