Prototype

JavaScriptはプロトコルタイプに基づく言語です!

Prototypeとは?

JavaScriptでは、元のオブジェクトをコピーして新しいオブジェクトを作成します.
ここで、オリジナルオブジェクトとは何ですか?

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

Personという関数を定義すると、Personというオブジェクトが作成されます.
Personオブジェクトを作成すると、Personプロトタイプというオブジェクトが作成されます.
つまり、関数を作成するときは、プロトタイプオブジェクトを同時に作成する必要があります.
生成された関数にはprototypeというpropertyがあり、prototypeオブジェクトを指します.
プロトタイプオブジェクトのコンストラクション関数Propertyとは、オブジェクトの作成時に宣言される関数です.
各専門家は互いに参照し合います!

function User(){};

console.dir(User);
console.dir(User.prototype);

ユーザオブジェクトにプロトタイプpropertyがあり、ユーザのプロトタイプオブジェクトにコンストラクション関数propertyがあると判断できます.

console.log(User === User.prototype.constructor); //true

したがって,構築関数が生成時に宣言される関数が見られる.
では、今から新しいオブジェクトを作成しましょう.
新しいオブジェクトを作成したら、コンソールでproto propertyが存在するかどうかを確認できます.

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

const choi = new Person('정은', 24);
console.log(choi); // {__proto__: Object, name, age}

proto

このプロパティは、新しいオブジェクトを作成するときに確認できます.
では、どのような役割を果たしているのでしょうか.
生成された関数のプロトタイプオブジェクトを指し、プロトタイプオブジェクトに関連付けられていることがわかります.

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

const choi = new Person('정은', 24);
console.log(choi.__proto__); //Person의 prototype 객체를 확인할 수 있다. 

Personのプロトタイプオブジェクトであることが確認できます.

上図に示すように、プロトタイプの構造がわかります.
ここからPerson Prototypeが元のオブジェクトであることがわかります!
これによりJavaScriptのオブジェクトは元のオブジェクト(Person Prototype)に基づいてコピーされていることがわかります.また、元のオブジェクトに関連付けられていることも示します.この接続はプロトタイプリンクと呼ばれ、protoにはこのリンクが含まれています.

プロトタイプチェーン

JavaScriptで使用されるすべてのオブジェクトは、このようなプロトコル・タイプに基づいて定義され、作成されます.String、Arrayのような対象もこのようにして製造される.

写真参照(https://evan-moon.github.io/2019/10/23/js-prototype/)
このようなプロトタイプからなるオブジェクト間の関係をプロトタイプチェーンと呼ぶ.
プロトタイプフィルタを使用して、オブジェクト内のプロトタイプを検索できます.

function Person(name, age){
  this.name = name;
  this.age = age;
}
Person.prototype.say = function(){
	console.log('Hi!');
}
const choi = new Person('정은', 24);

console.log(choi.say()); //Hi!

choiオブジェクトにsayメソッドは存在しません.でもHi!プロトタイプフィルタが使用されているため、出力が表示されます.

choiオブジェクトにsayメソッドが存在しないことを確認する

Choiの__proto__によって元のオブジェクトに上昇します.

ソースオブジェクトがsayメソッド

を有するかどうかを検証する

を確認して使用します.

Object.prototypeに達するまで、元のオブジェクトに沿って上に移動します.

プロトタイプ継承の使用

JavaScriptではObjectです.createメソッドを使用して継承できます.Object.createはIE 8以下の方法をサポートしないので、この方法を使用して継承しなくてもよい.詳細はhttps://gist.github.com/evan-moon/a7e5a51e20d22016ea443a03480765b7...
Object.create()メソッドは、指定したプロトタイプオブジェクトとプロパティを持つ新しいオブジェクトを作成します.

Object.create(proto: Object, properties?: Object);

最初のパラメータとして作成するオブジェクトのソースオブジェクト.
2番目のパラメータとして作成するオブジェクトにオブジェクトタイプとして追加するプロパティを受け入れます.
Propertyを追加すると、オブジェクトは{number:1}オブジェクトだけではありません.definePropertiesメソッドを使用するように、データ記述子とアクセス記述子を指定する必要があります.

Object.create(Person.prototype, {
  number: {
    configurable: false,
    enumerable: true,
    value: 1
  }
});

(詳細はhttps://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties)
Object.createを使用して継承します.

function SuperClass(name){
  this.name = name;
}
SuperClass.prototype.say = function(){
  console.log(`Hi I am ${this.name}`);
}

親としてのSuperClass関数を作成し、sayメソッドをプロトタイプオブジェクトに宣言します.
SuperClassをSubClassに継承しましょう.

function SubClass(name){
  SuperClass.call(this, name);
}
SubClass.prototype = Object.create(SuperClass.prototype);
SubClass.prototype.constructor = SubClass;
SubClass.prototype.jump = function(){
  console.log(`${this.name} is jumping`);
}

SuperClass.call(this)
親コンストラクション関数のコンストラクション関数を呼び出しますが、実行コンテキストをサブコンストラクション関数に変更します.superキーワードに似ています.
SubClass.プロトタイプの変更
Object.createを使用してSuperClassを取得します.プロトタイプをソースオブジェクトとする新しいオブジェクトを作成します.サブコンストラクション関数のプロトタイプオブジェクトと親コンストラクション関数のプロトタイプオブジェクトとの間のプロトタイプチェーンを作成します.(親子関係)
SubClass.prototype.コンストラクション関数の変更
親コンストラクション関数のコンストラクション関数のプロトタイプオブジェクトがコピーされているため、現在のコンストラクション関数は親コンストラクション関数SuperClassである可能性があります.SubClassに変換するには、SubClassに変更する必要があります.

(写真https://evan-moon.github.io/2019/10/27/inheritance-with-prototype/参照)
参考資料
https://evan-moon.github.io/2019/10/23/js-prototype/
https://evan-moon.github.io/2019/10/27/inheritance-with-prototype/
https://ko.javascript.info/function-prototype