クラス継承をプロトタイプで実現👩‍👦

👉取得タイプのJavaScriptでのクラス継承の実装

->プロトタイプフィルタの使用
->フィルタ条件

1.継承するコンストラクション関数(サブクラス)のプロトタイプを接続し、継承するコンストラクション関数(クラス)のプロトタイプ(メソッド)を参照します。

:親関数の使用を許可するプロトタイプメソッド인스턴스.__proto__ = 상위생성자함수.prototype 하위생성자함수.prototype = 상위생성자함수.prototype*プロトタイプメソッドとインスタンスメソッド
:プロトタイプメソッドは、(参照)サブコンストラクション関数を継承できるメソッドです.インスタンスメソッドは、コンストラクション関数によって直接作成された特定のインスタンスによって定義されるメソッドです.したがって、このインスタンスでのみ使用でき、参照および継承できません.ここで継承する方法はすべてプロトタイプメソッドです.

2.継承するコンストラクション関数(サブクラス)のプロトタイプに継承するコンストラクション関数(親)のインスタンスを付与しない

:継承を実現するために、サブクラスのフレームワークとして通常オブジェクトを使用します.通常オブジェクトであるため、内部Propertyの環境を削除できます.継承するコンストラクション関数の内部propertyを削除すると、メソッドの実行時に必要なpropertyがないため、__proto__で親コンストラクション関数を参照できます.親コンストラクション関数の内部に同じ名前のpropertyが存在する場合、このpropertyはサブコンストラクション関数で使用されます.
このセクションでは,クラス継承を実現する方法は3つからなる.
1)親インスタンスのプロパティの削除
2)衛生聖子関数のプロトタイプを属性とする新しいオブジェクトを作成し,サブクラスに関連付ける:Object.create()
3)衛生聖子関数のプロトタイプを空関数に接続し,サブクラスに接続する

3.継承されたコンストラクション関数(サブクラス)のコンストラクション関数が、継承されたコンストラクション関数(親)ではなく、自分のコンストラクション関数を指すようにする

subClass.prototype.constructor = subClass

Object.create(proto[, properties])

protoを持つ新しいオブジェクトを作成します.
propertiesはオプションで、追加および上書きできます.
=>指定したプロトタイプと属性を持つ新しいオブジェクトの作成

👉例としてチェックします(新しいオブジェクトに関連付けられたメソッドが使用されます)

継承されたインスタンスをクラスで表し、継承されたコンストラクション関数によって作成されたインスタンスの構造を理解します.

class Dog {
    constructor(size){
        this.size = size
    }
    introuduce(){
        return `This is ${this.size}size of dog`
    }
}

class myDog extends Dog{
    constructor(size, kind){
        super(size, kind)
        this.kind=kind;
    }
    introuduce2(){
        return `this dog is kind of ${this.kind}`
    }
}

const bbobbi = new myDog('빅','래브라도')
bbobbi.introuduce()    //"This is 빅size of dog"
bbobbi.introuduce2() //"this dog is kind of 래브라도"

インスタンスの内部には、kind, sizeという名前のpropertyが見られ、instance.__proto__は継承されたDogを参照する.
また、instance.__proto__.constructorとは、自身のmyDogがサブ関数を生成することを意味する.メソッドは独自のメソッドintrouduce2を持ち,instance.__proto__.__proto__に乗ると継承された構造関数から参照されるintrouduceメソッドが見られる.
上記の構造を持つクラス継承をプロトタイプで実現してみましょう.

step1. 衛生聖子関数に衛生聖子関数を参照させる(順序に注意)

この場合、上部/下部衛生フォノン関数間の接続は、下部衛生フォノン関数法の定義よりも重要であることに注意されたい.myDog.prototype=Dog.prototypeがコードより先に定義され、myDog.prototype.introduce2に接続されている場合、myDog.prototype自体をDog.prototypeと再定義し、従来の方法を上書きし、introduce2方法をまったく存在しない値にする.
まず接続し、mydogのメソッドを追加します.
(上書き:継承親メソッドに新しいメソッドを追加します(メソッド名が異なる場合)
または再定義(メソッド名が同じ場合)

function Dog(size){
  this.size = size;
}

Dog.prototype.introduce = function(){
   return `This is ${this.size} size of dog`
}

//*상속받을 프로퍼티 size를 미리 갖고요~
function myDog(size, kind){
  this.kind=kind;
}

myDog.prototype=Dog.prototype  //<- *순서주의!

myDog.prototype.introduce2 = function(){
  return `this dog is kind of  `+this.kind +` and`+this.introduce()+'!!!💖'
}

const wangja = new myDog('middle', 'jindo')
wangja.introduce()    //"This is undefined size of dog"
wangja.introduce2()   //"this dog is kind of jindo and This is undefined size of dog!!!💖"

サブコンストラクタmyDogが親コンストラクタDogを参照するpropertyを決定できます.
あらすじ、あらすじ2の方法はすべて持っています!
上記の注意事項のように逆の順序を宣言すると、親コンストラクション関数に上書きされ、以下に示すinconduction 2が見つかりません.

step2. 方法を分離するために,常衛生性サブ関数の属性を持つ新しい構造関数を作成し,それを接続した。

myDog.prototype=Dog.prototypeではなく、次の内容を記述します.
プロトタイプ接続ではなくオブジェクトを接続!

myDog.prototype = Object.create(Dog.prototype)  
  //<- *Dog의 프로토타입을 속성으로 갖는 새로운 객체를 연결해주었다.

等級形態に少し近づいた.
innode 2を持つmyDogのPropertiesとしてDogを参照してください.
参考紹介方法はinstance.__proto__.__proto__で確認できます.
次に未定義の問題を解決します.

step3. ここに接続

mydogではこれまだsizeを認識していません.
親関数Dogのthis.sizeをmydogに伝える

function myDog(size, kind){
  Dog.call(this, size); //call은 바로 실행되어 this.size=size가 된다.
  this.kind=kind;
}

step4. コンストラクション関数の決定

myDog.prototype.constructor = myDog最終コード

function Dog(size){
  this.size = size;
}

Dog.prototype.introduce = function(){
   return `This is ${this.size} size of dog`
}

//*상속받을 프로퍼티 size를 미리 갖고요~
function myDog(size, kind){
  Dog.call(this, size);
  this.kind=kind;
}

myDog.prototype = Object.create(Dog.prototype)  

myDog.prototype.introduce2 = function(){
  return `this dog is kind of  `+this.kind +` and`+this.introduce()+'!!!💖'
}

myDog.prototype.constructor = myDog

const wangja = new myDog('middle', 'jindo')
wangja.introduce()    //"This is middle size of dog"
wangja.introduce2()   //"this dog is kind of  jindo andThis is middle size of dog!!!💖"

これにより、クラスと同じ構成の継承が実現されます.
Object.createインプリメンテーションを使用して、property(myDog.prototype=Dogに接続されたDog propertyを削除)を削除し、空の関数を親propertyに接続して書き込みます.
以前勉強した内容でも、理解に時間がかかりました.
ずっと繰り返していれば、簡単にできるでしょう!?

👉まとめ(要約)

Prototypeでクラスを継承する方法
メソッドフィルタを使用して、コンテキストジェネレータ関数間のメソッドを参照する必要があります.
オブジェクトが表示されます.createを使用して、親コンストラクション関数のプロパティを持つ新しいオブジェクトを作成し、子コンストラクション関数に接続し、親コンストラクション関数の輪郭を認識できるように親コンストラクション関数に接続します.
最後に、エフェクタコンストラクタを独自に定義することで、継承を実現できます.