JavaScript継承の説明は合意されましたが、遅れています。これ以上苦労せずに、ポイントに到達してください。
継承を理解したいので、JavaScriptオブジェクト指向についてすでに特定の理解があることを証明しています。何も理解していない場合は、オブジェクト指向JS、ファクトリーモード、コンストラクターモード、プロトタイプモード、ミックスモード、動的プロトタイプモードの基本的な説明を参照できます。
プロトタイプチェーン
JavaScriptに継承を実装する最も簡単な方法は、プロトタイプチェーンを使用し、子タイプのプロトタイプを親タイプのインスタンス、つまり「subtype.prototype = new Parent Type();」に指すことです。実装方法は次のとおりです。
//コンストラクター機能を作成しましたsupertype(){this.name = ['wuyuchang'、 'jack'、 'tim']; this.property = true;} //メソッドsupertype.prototype.getsuerpervalue = function(){return this.property;} //コンストラクターfunction subtype(){this.test = ['h1'、 'h2'、 'h3'、 'h4']; this.subproperty = false;} //継承を実装するための重要な手順、サブタイプのプロトタイプは、親タイプのサブタイプのインスタンスを指します。prototype= new superType(); //ここで子タイプにメソッドを追加します。それは継承が実装された後でなければなりません。そうしないと、ポインターは親タイプのインスタンスを指し、メソッドは空です。 subtype.prototype.getSubvalue = function(){return this.subproperty;}/*次の例は、テストコードの例*/var instance1 = new subtype(); instance1.name.push( 'wyc'); instance1.test.push( 'h5'); // trueAlert(instance1.getSubValue()); // falsealert(instance1.name); // Wuyuchang、Jack、Tim、Wycalert(instance1.test); // h1、h2、h3、h4、h5var instance2 = new subtype(); alert(instance2.name); // Wuyuchang、Jack、Tim、Wycalert(instance2.test); // H1、H2、H3、H4上記のコードは、プロトタイプチェーンを介して実装されている単純な継承であることがわかりますが、テストコードの例にはまだいくつかの問題があります。ブログ投稿「オブジェクト指向JS、ファクトリーモード、コンストラクターモード、コンストラクターモード、プロトタイプモード、ミックスモード、ダイナミックプロトタイプモード、ダイナミックプロトタイプモードの基本的説明」を読んだ後に読んだ後、プロトタイプチェーンコードのプロトタイプのプロトタイプのプロトタイプのプロトタイプのプロトタイプのプロトタイプの最初の問題は、親タイプのインスタンスであるということであることを知っている必要があることを知っている必要があると思います。価値はすべてのインスタンスで共有されます。 instance1.name.push( 'wyc');上記のコードは、この問題の存在を証明できます。プロトタイプチェーンの2番目の問題は、サブタイプのインスタンスを作成する場合、パラメーターをSuperTypeコンストラクターに渡すことができないことです。したがって、実際の開発では、プロトタイプチェーンだけを使用することはめったにありません。
コンストラクターを借ります
プロトタイプチェーンで2つの問題を解決するために、開発者は、プロトタイプチェーンの問題を解決するために、借入コンストラクターと呼ばれる手法を使用し始めました。このテクノロジーの実装アイデアも非常に簡単です。サブタイプのコンストラクター内の親タイプのコンストラクターを呼び出すだけです。関数は特定の環境でコードを実行するオブジェクトであることを忘れないでください。そのため、コンストラクターはApply()またはcall()メソッドを使用して実行できます。コードは次のとおりです。
// constructor function supertype(name){this.name = name; this.color = ['pink'、 'Yellow']; this.property = true; this.testfun = function(){alert( 'http://tools.vevb.com/'); }} //メソッドの追加supertype.prototype.getsuerpervalue = function(){return this.property;} // constructor function subtype(name){supertype.call(this、name); this.test = ['h1'、 'h2'、 'h3'、 'h4']; this.subproperty = false;} //ここでサブタイプにメソッドを追加します。必ず継承を実装してください。そうしないと、ポインターは親タイプのインスタンスを指定し、メソッドは空です。prototype.getSubvalue= function(){return this.subproperty;}/*次の例はテストコードです*/var instance1 = new subtype(['wuyuchang'、 'Jack'、 'Jack'、 'Jack'、 'Jack'、 'Jack'、 'wuyuchang'、 'wuyuchang'、 'nick']); instance1.name.push( 'hello'); instance1.test.push( 'h5'); instance1.color.push( 'blue'); instance1.testfun(); // http://tools.vevb.com/alert(instance1.name); // Wuyuchang、Jack、Nick、Hello // alert(instance1.getSuerpervalue()); //エラーアラート(instance1.test); // H1、H2、H3、H4、H5アラート(instance1.getSubvalue()); // false alert(instance1.color); //ピンク、イエロー、BlueVar Instance2 = new SubType( 'Wyc'); instance2.testfun(); // http://tools.vevb.com/alert(instance2.name); // wyc // alert(instance2.getsuerpervalue()); //エラーアラート(instance2.test); // H1、H2、H3、H4Alert(instance2.getSubvalue()); // falsealert(instance2.color); //ピンク、黄色上記のコード、上記のコードのサブタイプサブタイプのコンストラクターである上記のコードでは、属性の継承が親型を「supertype.call(this、name);」と呼ぶことで実現されることがわかります。サブタイプが作成されたときにパラメーターを親タイプに渡すこともできますが、新しい問題が発生しています。親タイプのコンストラクター:testfunのメソッドと、親タイプのプロトタイプのメソッド:getSupervalueを定義したことがわかります。ただし、サブタイプをインスタンス化した後、親タイプのプロトタイプで定義されているメソッドgetSupervueを呼び出すことはまだ不可能であり、親タイプのコンストラクターのメソッドのみを呼び出すことができます:testfun。これは、オブジェクトを作成する際にコンストラクターモードのみを使用することと同じであるため、関数に再利用性がありません。これらの問題を考慮に入れて、借用コンストラクターのテクニックはめったに使用されません。
コンビネーション継承(プロトタイプチェーン +借入コンストラクター)
名前が示すように、組み合わせ継承は、プロトタイプチェーンの使用と借入コンストラクターの使用を組み合わせることの利点で構成されるパターンです。実装も非常に簡単です。それは組み合わせであるため、もちろん、両当事者の利点、つまりプロトタイプチェーン継承方法を組み合わせて、コンストラクターが属性を継承します。特定のコードは次のように実装されます。
// constructor function supertype(name){this.name = name; this.color = ['pink'、 'Yellow']; this.property = true; this.testfun = function(){alert( 'http://tools.vevb.com/'); }} //メソッドの追加supertype.prototype.getsuerpervalue = function(){return this.property;} // constructor function subtype(name){supertype.call(this、name); this.test = ['h1'、 'h2'、 'h3'、 'h4']; this.subproperty = false;} subtype.prototype = new superType(); //ここでサブタイプにメソッドを追加します。継承が実装された後に行う必要があります。そうしないと、ポインターは親タイプのインスタンスを指定し、メソッドは空です。prototype.getSubvalue= function(){return this.subproperty;}/*次のものはテストコードです。 'nick']); instance1.name.push( 'hello'); instance1.test.push( 'h5'); instance1.color.push( 'blue'); instance1.testfun(); // http://tools.vevb.com/alert(instance1.name); // Wuyuchang、Jack、Nick、HelloAlert(instance1.getsuerpervalue()); // truealert(instance1.test); // H1、H2、H3、H4、H5アラート(instance1.getSubvalue()); // false alert(instance1.color); //ピンク、イエロー、BlueVar Instance2 = new SubType( 'Wyc'); instance2.testfun(); // http://tools.vevb.com/alert(instance2.name); // wyc alert(instance2.getsuerpervalue()); // truealert(instance2.test); // H1、H2、H3、H4Alert(instance2.getSubvalue()); // falsealert(instance2.color); //ピンク、黄色上記のコードは、supertype.call(this、name)を介して親タイプのプロパティを継承します。 subtype.prototype = new SuperType();を介して親タイプの方法を継承します。上記のコードは、プロトタイプチェーンとコンストラクターを借用することで発生する問題を便利に解決し、JavaScriptで最も一般的に使用されるインスタンス継承方法になりました。ただし、混合モードには欠点がないわけではありません。上記のコードでは、メソッドを継承するときに親タイプの属性が実際に継承されていることがわかります。ただし、この時点で参照タイプは共有されます。したがって、親タイプのコンストラクターは、サブタイプの後に子タイプのコンストラクターで呼び出されるため、親タイプの属性を継承して、プロトタイプの継承された属性を上書きします。コンストラクターを2回呼び出す必要はありませんが、それを解決する方法はありますか?この問題を解決するときは、まず次の2つのモードを見てください。
プロトタイプの継承
プロトタイプ継承の実装方法は、通常の継承の実装方法とは異なります。プロトタイプの継承は、厳格な意味でコンストラクターを使用するのではなく、代わりにプロトタイプを使用して既存のオブジェクトに基づいて新しいオブジェクトを作成するため、結果としてカスタムタイプを作成する必要はありません。特定のコードは次のとおりです。
関数オブジェクト(o){function f(){} f.prototype = o;新しいf();}を返しますコード例:
/*プロトタイプ継承*/functionオブジェクト(o){function f(){} f.prototype = o; return new f();} var person = {name: 'wuyuchang'、friends:['wyc'、 'nicholas'、 'tim']}別の人。name= 'greg'; anotherperson.friends.push( 'bob'); var anotherperson2 = object(person); anotherPerson2.name = 'jack'; anotherperson2.friends.push( 'rose'); alert(person.friends); // WYC、ニコラス、ティム、ボブ、ローズ寄生性継承
/*寄生性継承*/function createanother(original){var clone = object(original); clone.sayhi = function(){alert( 'hi'); } return clone;}使用例:
/*プロトタイプ継承*/functionオブジェクト(o){function f(){} f.prototype = o;新しいf();} /*寄生虫継承* /function createanother(original){var clone = object(original); clone.sayhi = function(){alert( 'hi'); } return clone;} var person = {name: 'wuyuchang'、友人:['wyc'、 'nicholas'、 'rose']}別の人。sayhi();寄生的な組み合わせ継承
先ほど、JavaScriptにおける継承の組み合わせパターン実装の欠点について言及しました。それでは、その欠点を解決しましょう。実装のアイデアは、コンストラクターの属性を継承することであり、プロトタイプチェーンの混合フォーム継承方法は、メソッドを継承するときに親タイプのコンストラクターをインスタンス化する必要はありません。コードは次のとおりです。
関数オブジェクト(o){function f(){} f.prototype = o;新しいf();}/*寄生虫の組み合わせ継承*/function enseritprototype(subtype、supertype){var prototype = object(supertype.prototype); prototype.constructor = subtype; subtype.prototype = prototype;}それを使用する場合、コードの行を置き換える必要があります。 EnsertRototype(SubType、SuperType)との組み合わせモードで。寄生的な組み合わせ継承の効率は、親型コンストラクターを一度だけ呼び出し、不必要または冗長性の作成を回避するという点で反映されています。同時に、プロトタイプチェーンは変化しない可能性があるため、instanceofとisprototypeof()も正常に使用できます。これは現在最も理想的な継承方法でもあり、現在このモデルに変換されています。 (Yuiもこのモードを使用しています。)
このブログ投稿では、「JavaScript Advanced Programming 3rd Edition」を参照しています。コードは書き直され、より具体的であり、誰もが理解しやすくするようにコメントします。 JS相続財産に関するユニークな洞察がある場合は、ケチをしないでください。あなたの参考のためにあなたの意見に返信してください!