ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScript_javascript スキルにおけるプロトタイプの継承に関するいくつかの考え

JavaScript_javascript スキルにおけるプロトタイプの継承に関するいくつかの考え

WBOY
WBOYオリジナル
2016-05-16 17:51:44796ブラウズ

まず、従来の継承コードの一部を見てみましょう:

コードをコピー コードは次のとおりです:

//定義スーパークラス
function Father(){
this.name = "Father";
}
Father.prototype.theSuperValue = ["NO1","NO2"]; 🎜>//定義サブクラス
function Child(){
}
//継承を実装
Child.prototype = new Father();
//共有配列
Child を変更する.prototype.theSuperValue.push("Modify");
//サブクラスインスタンスを作成します
var theChild = new Child(); //["NO1" ,"NO2", "変更"]
//親クラスのインスタンスを作成します
var theFather = new Father();
console.log(theFather.theSuperValue); //["NO1"," NO2","Modify" ]


上記のコードで、「赤い」コードに注目します。サブクラス Child のプロトタイプ オブジェクトは、親クラス Father (new Father( )) ここでは、Father() オブジェクトの新しい TheSuperValue 属性を呼び出します。新しい Father() オブジェクトにはそのような属性がないため (name 属性のみ)、プロトタイプ オブジェクト (Father) までのプロトタイプ チェーンに沿って検索されます。 .prototype)を見つけると、それは配列であることがわかり、このとき、この配列に「modification」という文字列を追加します。

その後、新しい Child インスタンス オブジェクト theChild を作成しました。theChild が SuperValue 属性を呼び出すと、最初はそれ自体にこの属性がないため、そのプロトタイプ オブジェクト (新しい Father) に移動してそれを見つけます。残念ながら、ここにはそのようなものはありません。では、 new Father() のプロトタイプに行き、それを見つけます。この配列は Father.prototype で見つかり、["NO1", "NO2" であることがわかりました。 、 "修正する"]。

次に、Father インスタンス オブジェクト theFather を作成しました。上記のように、Father.prototype にこの参照型配列 ["NO1", "NO2", "Modify"] が見つかりました。 (もちろん、配列はすべて参照型です!)

上記の説明を通じて、プロトタイプ チェーンの概念をすでに理解している友人は、実際、私も同様のことを考えます。例:


//スーパークラスを定義します
function Father() {
this.name = "Father";
Father.prototype.theSuperValue = ["NO1", "NO2"]
// サブクラスを定義します
function Child() {
}
//継承を実装します
Child.prototype = new Father();
//共有配列を変更します
Child.prototype.theSuperValue = ["コードをカバーする"]
//サブクラスのインスタンスを作成します
var theChild = new Child();
console.log(theChild.theSuperValue);
//親クラスのインスタンスを作成します
var theFather = new Father() ;
console.log(theFather.theSuperValue);



上記のコードとの違いを見てみましょう。前のコードは特別な紫色で表示されています。小さな違いですが、結果は「大きな」変更になっています。以下のスクリーンショットを参照してください:

なぜこれが大きな変化だと言えるのかというと、「パブリック属性の再利用」から「パブリック属性を上書きして独自の固有属性を作成する」に移行したからです。ここで説明するために配列を使用しています。実際、2 番目のケースは Function でよく使用され、サブクラスのメソッドを使用して親クラスのメソッドをオーバーライドします。

2 番目のコードで注意する必要があるのは、紫色のコードの前にある「=」記号 (代入演算子) です。 Child.prototype オブジェクトと new Father() オブジェクトでこの代入演算子を呼び出すと、このオブジェクトに新しい属性が「作成」され、以下の Child インスタンスで SuperValue が呼び出されるとき、もちろん新しい属性値が返されます。 [「コードをカバーしています」]。


しかし、新しい親クラスのインスタンス theFather オブジェクトを作成し、そのオブジェクトの SuperValue プロパティを呼び出すと、そのオブジェクトにはそのようなプロパティがないことがわかります。これはなぜでしょうか。ここで説明したのは、Father クラスではなく、Father オブジェクト new Father(); であるため、Fater() コンストラクターを通じて作成された新しいオブジェクト theFather には、新しく作成された属性は含まれていません。プロトタイプ チェーンを遡ると、最初に定義した配列である Father.prototype にそれが見つかりました。

上記の 2 つの例を通して、JS のプロトタイプによって提供される継承関数を使用するとき、特にサブオブジェクトを使用してプロトタイプのメソッドとオブジェクトを操作するときは、「=」記号の割り当てと参照呼び出しが 2 つあることに注意してください。まったく異なる結果をもたらすため、異なる操作を実行します。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。