JavaScriptプロトタイプチェーンの追加方法と発生する問題点の分析例

プロトタイプ チェーン継承の基本的な考え方は、プロトタイプ オブジェクトが別の型のインスタンスを指すようにすることです

function SuperType() { 
 this.property = true 
} 
SuperType.prototype.getSuperValue = function () { 
 return this.property 
} 
function SubType() { 
 this.subproperty = false 
} 
SubType.prototype = new SuperType() 
SubType.prototype.getSubValue = function () { 
 return this.subproperty 
} 
var instance = new SubType() 
console.log(instance.getSuperValue()) // true

このコードでは、SuperType と SubType という 2 つの型が定義されており、それぞれの型には属性とメソッドが継承されます。 SuperType と継承 これは、SuperType のインスタンスを作成し、そのインスタンスを SubType.prototype に割り当てることで実現されます。

実装の本質は、プロトタイプ オブジェクトを書き換えて新しい型のインスタンスに置き換えることです。その後、SuperType のインスタンスに存在するすべてのプロパティとメソッドが SubType.prototype にも存在します。

インスタンスを作成するとき、インスタンス オブジェクトには、それを作成したプロトタイプを指す内部ポインターが存在することがわかっています。ここでは、コード SubType.prototype = new SuperType() によって、新しい SuperType も作成されます。 SubType.prototype SubType.prototype を SuperType に関連付ける内部ポインター。

つまり、インスタンスは SubType のプロトタイプを指し、SubType のプロトタイプは SuperType のプロトタイプを指します。そして、インスタンスが getSuperValue() メソッドを呼び出すと、このチェーンに沿って検索を続けます。

メソッドの追加

SubType プロトタイプにメソッドを追加するとき、親クラスも同じ名前を持つ場合、SubType は再作成の目的を達成するためにこのメソッドをオーバーライドします。 ただし、このメソッドは依然として親クラスに存在します。

リテラルの形式では追加できないことに注意してください。上で述べたように、インスタンスによる継承は本質的に書き換えであるため、リテラル形式を再度使用すると、それは別の書き換えになりますが、今回の書き換えはそれとは何の関係もありません。親クラスと関連付けられるため、プロトタイプ チェーンが切り詰められます。

function SuperType() { 
 this.property = true 
} 
SuperType.prototype.getSuperValue = function () { 
 return this.property 
} 
function SubType() { 
 this.subproperty = false 
} 
SubType.prototype = new SuperType() 
SubType.prototype = { 
 getSubValue:function () { 
 return this.subproperty 
 } 
} 
var instance = new SubType() 
console.log(instance.getSuperValue()) // error

問題

単純にプロトタイプチェーン継承を使用すると、主な問題は参照型の値を含むプロトタイプに起因します。

function SuperType() { 
 this.colors = ['red', 'blue', 'green'] 
} 
function SubType() { 
} 
SubType.prototype = new SuperType() 
var instance1 = new SubType() 
var instance2 = new SubType() 
instance1.colors.push('black') 
console.log(instance1.colors) // ["red", "blue", "green", "black"] 
console.log(instance2.colors) // ["red", "blue", "green", "black"]

SuperType コンストラクターは、プロトタイプ チェーンを通じて SubType が継承されると、この属性は、SubType.prototype.colors が特別に作成されたのと同じように、SubType.prototype に表示されるため、SubType のすべてのインスタンスが発生します。この属性は共有されるため、instance1 が色の参照型の値を変更すると、instance2 にも反映されます。

以上がJavaScriptプロトタイプチェーンの追加方法と発生する問題点の分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。