最初に質問を詳細に研究しましょう。 JavaScriptオブジェクトの継承とは何ですか?
たとえば、「動物」オブジェクトのコンストラクターがあります。
function animal(){this.type = 'animal'; }「猫」オブジェクトのコンストラクターもあります。
function cat(name、color){this.name = name; this.color = color; }猫も動物に属していることを知っています。この猫のオブジェクトが動物オブジェクトの特性を継承したい場合、どうすればよいですか?
コンストラクター結合
コンストラクターのバインディングを使用することが最も簡単な方法です。コールを使用するか、適用して親オブジェクトを独自のオブジェクトにバインドします。
function cat(name、color){animal.apply(this、arguments); this.name = name; this.color = color; } var cat1 = new cat( "haha"、 'red'); console.log(cat1.type); //動物ただし、この方法は比較的まれです。
継承をコピーします
親オブジェクトのすべてのプロパティとメソッドが子オブジェクトにコピーされている場合、継承も達成できます。
関数拡張(子、親){var p = parent.prototype; var c = child.prototype; for(var i in p){c [i] = p [i]; } c.uber = p; //ブリッジ関数}使い方:
拡張(猫、動物); var cat1 = new cat( "haha"、 "red");アラート(cat1.type); // 動物
プロトタイプ継承(プロトタイプ)
上記の直接的な結合と比較して、プロトタイプ継承の方法がより一般的です。プロトタイプを自分で簡単に要約しました。
各関数には、オブジェクトへの参照であるプロトタイプ属性があります。新しいキーワードを使用して新しいインスタンスを作成するとき、このインスタンスオブジェクトは、プロトタイプオブジェクトから属性とメソッドを継承します。
つまり、「CAT」コンストラクターのプロトタイプ属性が「動物」インスタンスを指している場合、「CAT」オブジェクトインスタンスが作成されると、「動物」オブジェクトのプロパティと方法が継承されます。
継承の例
cat.prototype = new Animal(); cat.prototype.constructor = cat; var cat1 = new cat( "haha"、 "red"); console.log(cat1.constructor == cat); // true Console.log(cat1.type); //動物
1。コードの最初の行で、CAT機能のプロトタイプオブジェクトを動物オブジェクトのインスタンス(動物の型属性を含む)のインスタンスに指します。
2。コードの2行目はどういう意味ですか?
1)最初に、このコードの行を追加しない場合は、実行してください
cat.prototype = new Animal();
console.log(cat.prototype.constructor == animal); //真実
言い換えれば、実際には、各プロトタイプオブジェクトには、コンストラクター機能を指すコンストラクター属性があります。
2)次のコードを見てみましょう
cat.prototype = new Animal(); var cat1 = new cat( "haha"、 'red'); console.log(cat1.constructor == animal); //真実
上記から、インスタンスCAT1のコンストラクターが動物であることがわかります。そのため、明らかに間違っています。 。 。 CAT1は新しいCAT()によって明らかに生成されるため、手動で修正する必要があります。 cat.prototypeオブジェクトのコンストラクター値はcatに変更されます。
3)したがって、これは私たちが注意を払うべきポイントでもあります。プロトタイプオブジェクトを置き換える場合、プロトタイプオブジェクトのコンストラクター属性を手動で修正する必要があります。
o.prototype = {};
o.prototype.constructor = o;
プロトタイプを直接継承します
動物オブジェクトでは、変更されていない特性はAnimal.prototypeで直接記述できます。次に、cat.prototypeに動物.prototypeを指し示します。これは、継承を実現します。
次に、最初に動物オブジェクトを書き直しましょう。
function animal(){} animal.prototype.type = 'animal';次に、継承を実装します。
cat.prototype = animal.prototype; cat.prototype.constructor = cat; var cat1 = new cat( "haha"、 "red"); console.log(cat1.type); //動物
以前の方法と比較して、この方法はより効率的であるように見えます(動物インスタンスは作成されていません)、スペースを節約します。しかし、これは正しいですか?答えは間違っています。読み続けましょう。
cat.prototype = animal.prototype;
このコードの行により、cat.prototypeとanimal.prototypeは同じオブジェクトを指すことができます。したがって、cat.prototypeの特定の特性が変更された場合、動物.prototypeに反映されます。これは明らかに私たちが見たいものではありません。
たとえば、実行します。
console.log(animal.prototype.constructor == animal)// false
それは間違っていることが判明しました、なぜですか? cat.prototype.constructor = cat;このラインは、動物のコンストラクタープロパティも変更します。プロトタイプ。
空のオブジェクトを仲介者として使用します
var f = function(){}; f.prototype = animal.prototype; cat.prototype = new f(); cat.prototype.constructor = cat;上記の2つの方法を組み合わせると、Fは空のオブジェクトであるため、メモリをほとんど占有しません。現時点でCATのプロトタイプオブジェクトを変更しても、動物のプロトタイプオブジェクトには影響しません。
console.log(animal.prototype.constructor == animal); // 真実
次に、上記の方法をカプセル化します。
function endoct(child、parent){var f = function(){}; f.prototype = parent.prototype; child.prototype = new f(); child.prototype.constructor = child; child.uber = parent.prototype; }それを使用する場合、この方法は次のとおりです。
拡張(猫、動物); var cat1 = new cat( "haha"、 "red"); console.log(cat1.type); // 動物
child.uber = parent.prototype;このコード行はブリッジ関数であり、子オブジェクトのuber属性が親オブジェクトのプロトタイプ属性を直接指すことができます。これは、独自のオブジェクトにuberと呼ばれるチャネルを開くことに相当し、子オブジェクトのインスタンスが親オブジェクトのすべてのプロパティとメソッドを使用できるようにします。
上記は、JavaScriptオブジェクトを継承することについての私の理解です。多かれ少なかれあなたを助けることができることを願っています。読んでくれてありがとう。