フリーランス 技術調査ブログ

フリーランス/エンジニア Ruby Python Nodejs Vuejs React Dockerなどの調査技術調査の備忘録

JavaScriptのプロトタイプとプロトタイプチェーンについて

はじめに

  • TypeScriptを勉強しているとプロトタイプやプロトタイプチェーンのキーワードが出てくるので、調査してみる。

JavaScriptのプロトタイプ

  • 必要なメモリ量を節約できる
  • プロトタイプは、他のオブジェクトがプロパティを継承する内部オブジェクトである
  • その主な目的は、オブジェクトの複数のインスタンスが共通のプロパティを共有できるようにすること。
  • オブジェクトリテラルを使用して、またはnew Object()で作成されたオブジェクトは、Object.prototypeと呼ばれるプロトタイプを継承する。
  • new String()で作成されたオブジェクトは、String.prototypeを継承する。
  • プロトタイプはプロトタイプを持つことができる。
  • Object.prototypeはプロトタイプチェーンの最上位にある。
  • すべてのJavaScriptオブジェクト(Date、Array、RegExp、Functionなど)は、Object.prototypeから継承される。
  • プロトタイププロパティを使用すると、プロパティとメソッドをオブジェクトに追加できる。  オブジェクトのプロトタイプを保持する値は、内部プロトタイプリンクと呼ばれることもある。  また、歴史的にprotoとも呼ばれていました。

プロトタイププロパティの宣言

object.prototype.name = value;
 or 
object._proto_.name = value;

サンプルコード

function employee(name, dept){
  this.name = name
  this.dept = dept
}

employee.prototype.salary = 100
const employeeA = new employee("Yamada", "Dev")
console.log(employeeA.salary)

JavaScriptのプロトタイプチェーン

  • JavaScriptオブジェクトプロトタイプ
  • JavaScriptは、プロトタイプに基づくオブジェクトベースの言語である
  • すべてのJavaScriptオブジェクトにはプロトタイプがある。プロトタイプもオブジェクトである。
  • すべてのJavaScriptオブジェクトは、プロトタイプからプロパティを継承する。
  • コンストラクター関数を使用してオブジェクトのセットを定義および作成します。
  • プロパティを個別のオブジェクトまたはオブジェクトのセット全体に動的に追加または削除できます。
  • プロトタイプチェーンに従ってプロパティを継承します。

サンプルコード

function student(name, age , marks) { this.name = name; this.age =age; this.marks=marks; }

var javaStud = new student("Smith", 25 , 65 ); 
var embedStud = new student("Mac", 24, 62); 

console.log(javaStud.marks + embedStud.marks);

プロトタイプチェーンによる継承

  • JavaScriptでは、継承はプロトタイプベースでありクラスではない。 代わりに、オブジェクトは別のオブジェクトを継承する。
  • 主な目的は、オブジェクトの複数のインスタンスが共通のプロパティを共有できるようになる。
  • プロトタイプオブジェクトを使用して定義されたオブジェクトプロパティは、それを参照するすべてのインスタンスによって継承される。
  • プロトタイププロパティにプロパティとメソッドを追加すると、コンストラクタ関数によって作成されたすべてのオブジェクトにメソッドまたはプロパティが自動的に追加される。

結論