プロトタイプ

📚 Reference

呉勝煥、https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67
PoiemaWeb, https://poiemaweb.com/js-prototype
注意:これは個人がサイトで復習しやすいように再編成された文章です.
詳細については、リファレンスサイトにアクセスしてください.

緒論

JavaScriptは、Java、C++などのオブジェクトベースのオブジェクト向けプログラミング言語とは異なり、オブジェクトベースのオブジェクト向けプログラミング言語である(class).prototypeに基づく言語は、インスタンスの作成および継承概念の実装のために、オブジェクトの作成前のclassを定義する.JavaScriptは、classを必要とせずにオブジェクトを作成し、classオブジェクトによって継承概念を実現します.
ES 6はprototype構文を追加したが、これはプロトコルタイプに基づいて実装されていることを意味し、JavaScriptがクラスベースに変更されたことを意味しない.

原型はどうやって使いますか?

JavaScriptでは、class演算子とコンストラクション関数の組み合わせで複数のオブジェクトを簡単に作成できます.ここで、コンストラクション関数は通常の関数と同じですが、オブジェクトを作成する大文字で始まる関数です.

function Person() {
  this.eyes = 2;
  this.nose = 1;
};

const Tomas = new Person();
const James = new Person();

console.log(Tomas.eyes); // 2
console.log(Tomas.nose); // 1
console.log(James.eyes); // 2
console.log(James.nose); // 1

ここで問題が発生しました.newとTomasにはJamesとeyesがあり、メモリごとに4つのnoseとeyesが割り当てられています.100個のオブジェクトを作成すると、200個の変数が割り当てられます.この問題は、プロトコル・タイプを使用して解決されます.

function Person() {};

Person.prototype.eyes = 2;
Person.prototype.nose = 1;

const Tomas = new Person();
const James = new Person();

console.log(Tomas.eyes); // 2
console.log(Tomas.nose); // 1
console.log(James.eyes); // 2
console.log(James.nose); // 1

簡単に言えば、noesという空のオブジェクトをメモリに割り当て、共通の使用のためにデータをオブジェクトに格納します.次に、Person.prototypeコンストラクタによって生成されたオブジェクトは、メモリ内のPerson()オブジェクトを参照し、データを使用する.

プロトタイプ運動原理

関数の作成

関数を作成すると、JavaScriptは関数だけでなくPrototypeオブジェクトも作成します.
Prototype Object
複数のオブジェクトが共有するデータを含むオブジェクト

上図では、生成関数のPerson.prototypeおよびプロトタイプオブジェクトのprototypeおよびconstructorに注意してください.

__proto__作成時に一緒に作成されたPrototypeオブジェクトを参照します.このオブジェクトには関数オブジェクトのみが含まれます.

prototypePrototypeオブジェクトのみを持つPropertyとして、自分で作成した関数オブジェクトを参照します.

constructorコンストラクション関数を作成するPrototypeオブジェクトを参照します.このオブジェクトは、すべてのオブジェクト(関数を含む)が持つPropertyです.関数オブジェクトは__proto__を指します.
上図では、関数オブジェクトは実際にFunction.prototypeを含んでいるが、説明中は不要であるため省略する.

関数およびプロトタイプオブジェクトは、__proto__およびprototypeによって相互参照される.

オブジェクトの作成

constructor演算子とコンストラクション関数の組み合わせを使用してオブジェクトを作成します.作成されたオブジェクトは、new属性で関数を作成したプロトタイプオブジェクトを参照し、プロトタイプオブジェクトのデータを使用できます.__proto__演算子とコンストラクション関数の組み合わせを使用して別のオブジェクトを作成しても、上記の原理を使用して独自の関数を作成するプロトタイプオブジェクトを参照し、データを共有します.

プロトタイプチェーン

生成されたPerson Prototypeオブジェクト(newコンストラクタなど)にも、その親コンストラクタが作成されます.これはネイティブオブジェクトのPerson()コンストラクション関数であり、Person PrototypeオブジェクトのObject()属性は__proto__コンストラクション関数のObject Prototypeオブジェクトを参照します.オブジェクトプロトタイプオブジェクトは最上位レベルにあるため、Object()プロパティは__proto__を指します.null属性によって親プロトタイプオブジェクトに関連付けられたシェイプをプロトタイプチェーンと呼びます.