js 継承の概念
次の 2 つの継承メソッドが js でよく使用されます:
プロトタイプチェーン継承（オブジェクト間の継承）
クラス継承（コンストラクター間の継承）
js は Java のような真のオブジェクト指向言語ではないため、js はオブジェクトに基づいており、クラスの概念がありません。したがって、継承を実装したい場合は、js のプロトタイプ機構、または apply メソッドと call メソッド
を使用できます。
オブジェクト指向言語では、クラスを使用してカスタム オブジェクトを作成します。ただし、js 内のすべてはオブジェクトなので、カスタム オブジェクトを作成するにはどうすればよいでしょうか?これには、js プロトタイプを使用する必要があります:
プロトタイプは単純にテンプレートとして考えることができます。新しく作成されたカスタム オブジェクトはすべてこのテンプレート (プロトタイプ) のコピーです (実際にはコピーではなくリンクですが、このリンクは表示されません。新しいインスタンス化されたオブジェクトの内部には、目に見えない __Proto__ ポインターがあります。オブジェクト、プロトタイプ オブジェクトを指します)。
JS は、コンストラクターとプロトタイプを通じてクラスの機能をシミュレートできます。 さらに、js クラスの継承の実装もプロトタイプ チェーンに依存します。
プロトタイプの継承とクラスの継承
古典的な継承では、サブタイプのコンストラクター内でスーパータイプのコンストラクターを呼び出します。
厳密なクラス継承はあまり一般的ではなく、通常は組み合わせて使用されます:
関数 Super(){
This.colors=["赤","青"];
}
関数 Sub(){
Super.call(this);
}
プロトタイプの継承は、既存のオブジェクトを利用して新しいオブジェクトを作成し、サブクラスのプロトタイプを親クラスにポイントすることです。これは、親クラスのプロトタイプ チェーンに参加することと同等です
プロトタイプチェーンの継承
サブクラスが親クラスの属性 (メソッドを含む) を継承するには、まずコンストラクターを定義する必要があります。次に、親クラスの新しいインスタンスをコンストラクターのプロトタイプに割り当てます。コードは次のとおりです:
<スクリプト>
関数 Parent(){
This.name = 'マイク';
}
関数 Child(){
This.age = 12;
}
Child.prototype = new Parent();//子は親を継承し、プロトタイプを通じてチェーンを形成します
var test = new Child();
アラート(test.age);
alert(test.name);//継承された属性を取得します
//プロトタイプチェーンの継承を継続します
Function Brother(){ //ブラザー構築
This.weight = 60;
}
Brother.prototype = new Child();//プロトタイプチェーンの継承を継続します
var Brother = 新しい Brother();
alert(brother.name);//親と子を継承し、マイクをポップアップします
alert(brother.age);//ポップアップ 12
上記のプロトタイプ チェーンの継承にはリンクがありません。つまり、すべてのコンストラクターは Object から継承されます。オブジェクトの継承は自動的に行われ、手動で継承する必要はありません。では、それらの所属は何でしょうか?
プロトタイプとインスタンスの関係を決定します
プロトタイプとインスタンスの関係は 2 つの方法で決定できます。オペレーターのinstanceofメソッドとisPrototypeof()メソッド:
alert(オブジェクトの兄弟インスタンス)//true
alert(test instanceof Brother);//false、test は Brother のスーパークラスです
alert(child の兄弟インスタンス);//true
alert(親の兄弟インスタンス);//true
プロトタイプチェーンに出現するプロトタイプであれば、プロトタイプチェーンから派生したインスタンスのプロトタイプと言えるので、isPrototypeof()メソッドもtrueを返します
。
jsでは、継承した関数をスーパータイプ(親クラス、基底クラスでも可)、継承した関数をサブタイプ(サブクラス、派生クラス)と呼びます。プロトタイプ継承の使用には主に 2 つの問題があります:
まず、プロトタイプをリテラルにオーバーライドすると関係が壊れ、参照型のプロトタイプが使用され、サブタイプはスーパータイプにパラメーターを渡すことができなくなります。
疑似クラスは、参照の共有とスーパータイプのパラメーターを渡すことができないという問題を解決し、「借用コンストラクター」テクノロジーを使用できます。
コンストラクターの借用 (クラス継承)
<スクリプト>
関数 親(年齢){
This.name = ['マイク','ジャック','スミス'];
This.age = 年齢;
}
関数 Child(年齢){
Parent.call(this,age);
}
var test = new Child(21);
alert(test.age);//21
alert(test.name);//マイク、ジャック、スミス
Test.name.push('bill');
alert(test.name);//マイク、ジャック、スミス、ビル
コンストラクターを借用することで前述の 2 つの問題は解決されますが、プロトタイプがなければ再利用は不可能なので、コンストラクターを借用するにはプロトタイプ チェーンが必要です。このパターンは結合継承 と呼ばれます。
結合継承
<スクリプト>
関数 親(年齢){
This.name = ['マイク','ジャック','スミス'];
This.age = 年齢;
}
Parent.prototype.run = function () {
return this.name ' は両方です' this.age;
};
関数 子供(年齢){
Parent.call(this,age);//オブジェクトの偽装、パラメータをスーパータイプに渡します
}
Child.prototype = new Parent();//プロトタイプ チェーンの継承
var test = new Child(21);//new Parent(21)
と書くこともできます
alert(test.run());//マイク、ジャック、スミスは両方とも21
結合継承は、一般的に使用される継承方法です。その背後にある考え方は、プロトタイプ チェーンを使用してプロトタイプのプロパティとメソッドを継承し、コンストラクターを借用してインスタンスのプロパティを継承することです。このように、関数の再利用はプロトタイプでメソッドを定義することによって実現され、各インスタンスは独自の属性を持つことが保証されます。
call() の使用法: オブジェクトのメソッドを呼び出し、現在のオブジェクトを別のオブジェクトに置き換えます。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
プロトタイプの継承
この種の継承は、プロトタイプを使用して、カスタム型を作成せずに既存のオブジェクトに基づいて新しいオブジェクトを作成します。
<スクリプト>
関数 obj(o){
関数 F(){}
F.prototype = o;
return new F();
}
var box = {
名前: 'trigkit4',
arr : ['兄弟','姉妹','ババ']
};
var b1 = obj(box);
alert(b1.name);//trigkit4
b1.name = 'マイク';
アラート(b1.name);//マイク
alert(b1.arr);//兄弟、姉妹、ババ
b1.arr.push('親');
alert(b1.arr);//兄弟、姉妹、馬場、両親
var b2 = obj(box);
alert(b2.name);//trigkit4
alert(b2.arr);//兄弟、姉妹、馬場、両親
プロトタイプの継承では、最初に obj() 関数内に一時的なコンストラクターが作成され、次に受信オブジェクトをこのコンストラクターのプロトタイプとして使用し、最後にこの一時的な型の新しいインスタンスを返します。
寄生継承
この継承メソッドは、作成プロセスをカプセル化する目的でプロトタイプ ファクトリ パターンを組み合わせます。
<スクリプト>
関数 create(o){
var f= obj(o);
f.run = function () {
return this.arr;//同様に、参照も共有されます
};
return f;
}
結合継承に関する小さな問題
結合継承は js で最も一般的に使用される継承パターンですが、結合継承のスーパータイプは使用中に 2 回呼び出されます。1 回目はサブタイプの作成時で、もう 1 回目はサブタイプ コンストラクター内で呼び出されます。
<スクリプト>
関数の親(名前){
This.name = 名前;
This.arr = ['兄弟','姉妹','両親'];
}
Parent.prototype.run = function () {
return this.name;
};
関数 Child(名前,年齢){
Parent.call(this,age);//2 番目の呼び出し
This.age = 年齢;
}
Child.prototype = new Parent();//最初の呼び出し
上記のコードは前の組み合わせ継承であるため、寄生組み合わせ継承により 2 つの呼び出しの問題が解決されます。
寄生組み合わせ継承
コードをコピー コードは次のとおりです:
<スクリプト>
関数 obj(o){
関数 F(){}
F.prototype = o;
return new F();
}
関数 create(親,テスト){
var f = obj(parent.prototype);// オブジェクトを作成
f.constructor = test;//拡張オブジェクト
}
関数の親(名前){
This.name = 名前;
This.arr = ['兄弟','姉妹','両親'];
}
Parent.prototype.run = function () {
return this.name;
};
関数 Child(名前,年齢){
Parent.call(this,name);
This.age =age;
}
assignPrototype(Parent,Child);//継承はここを通じて行われます
var test = new Child('trigkit4',21);
Test.arr.push('nephew');
アラート(test.arr);//
alert(test.run());//メソッドのみが共有されます
var test2 = new Child('jack',22);
alert(test2.arr);//見積もりの問題の解決
電話して応募してください
グローバル関数 apply と call を使用すると、次のように関数内で this のポインタを変更できます。
//グローバル関数を定義します
関数 foo() {
console.log(this.fruit);
}
// グローバル変数を定義します
var Fruit = "リンゴ";
// オブジェクトをカスタマイズします
var パック = {
果物：「オレンジ」
};
// window.foo();
と同等
foo.apply(window); // "apple"、この時点では window
と同じです。
//現時点では foo にこれ === パック
foo.apply(pack); // "オレンジ"
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
