JavaScriptのクラス継承機構の原理解析_jsオブジェクト指向

JavaScript の現在の継承メソッドは、「extend」キーワードではなく、コンストラクター関数とプロトタイプ属性によって実装されます。まず、動物クラスを作成します

js コード

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

var Animal = function (){ //これはコンストラクター関数です

this .name = 'pipi';
this .age = 10; this .height = 0; ;
}
//動物のインスタンスを作成します
var a1 = new Animal ();

コンストラクターと他の通常の関数の違いは次のとおりです。は、コンストラクター内の this キーワードです。 2. コンストラクターの呼び出しには、 new キーワードが使用されます。 new オペレーターを介してコンストラクター Animal を呼び出した後、システムは、

コードをコピー に相当するオブジェクトを返します。コードは次のとおりです。以下のように:

var a1 = { name:'pipi' ,age:10,height:0 }
//or
var a1 = new Object(); a1. name='pipi';
a1.age = 10;


これは、js オブジェクトを生成する方法と同じです。
js でクラスを定義する方法がわかりました。次に、cat を記述する方法を示します。

コードをコピー コード var cat = function (){

this .play = function (){

alert('cat play')
}
}
cat .prototype = new Animal ();
//プロトタイプ属性はオブジェクトを指します
var c1 = new cat();


この時点で、cat は動物オブジェクト、クラス cat のインスタンス オブジェクト c1 には、属性 name、年齢、身長、およびメソッド play があります。
では、プロトタイプはどのような役割を果たしているのでしょうか?

プロトタイプはポインターのようなもので、オブジェクトを指します。このオブジェクトはサブクラス オブジェクトのプロトタイプと呼ばれます。 cat オブジェクトが作成されると、cat コンストラクターはプロトタイプ属性を持っているため、cat インスタンスは間接的にプロトタイプ オブジェクトを指します (各オブジェクトがそのコンストラクターを指すコンストラクター属性を持つため、間接的であると言われます)。
次に、「オブジェクト c1 の name 属性を変更すると、そのプロトタイプの name 属性値も変更されますか?」という質問になります。答えはノーです。
次の詳細な分析:
1. name 属性にアクセスします。まず、c1.name の属性に初めてアクセスすると、予想どおりの値「pipi」が得られます。しかし、その計算過程を知らない人もいるかもしれません。
計算プロセスは次のとおりです: ステップ 1: c1 オブジェクトに name 属性があるかどうかを確認し、見つからない場合は、見つからないため 2 番目のステップに進みます。 cat のコンストラクターで定義されます。ステップ 2: 最初のステップで見つからなかった場合、プロトタイプ オブジェクトが指すオブジェクトに間接的にアクセスし、プロトタイプ オブジェクトで name 属性が見つかった場合は、見つかった属性値を返します。それでも見つからない場合は、name 属性が見つかるかプロトタイプ オブジェクトがなくなるまで、プロトタイプ オブジェクトのプロトタイプ オブジェクトを再帰的に検索します (その祖父を見つけます)。最後にname属性が見つからなかった場合はunknownが返されます。
2. name 属性を設定します。c1 オブジェクトの name 属性を設定し、c1.name= 'new name'; を呼び出すと、このプロセスは非常に簡単になります。まず、オブジェクトにこの属性が既に存在するかどうかを確認し、存在しない場合は、新しい属性をオブジェクトに追加し、現在の値を設定します。プロトタイプのプロパティは、値の設定プロセス中にはアクセスされないことに注意してください。
理解を深めるために、初めて読み込むとき、自身のオブジェクトには name 属性がないため、プロトタイプ オブジェクトの name 属性の値をもう一度見てみましょう。返されます。 2 番目のステップは、name の値を書き込むことです。独自のオブジェクトに name 属性があることが見つからない場合は、独自のオブジェクトに新しい name 属性を作成し、値を割り当てます。 3 番目のステップでは、name 属性を再度読み取ります。name 属性は 2 番目のステップで作成されているため、2 番目のステップで設定された値が返されます。プロトタイプ オブジェクトの値は、これら 3 つの手順では変更されないことに注意してください。
これは、JavaScript オブジェクトが継承を実装する方法の詳細な分析です。実際、他のオブジェクト指向言語とは異なり、JavaScript の継承メカニズムは型の継承ではなく、オブジェクトのプロトタイプ継承です。
ははは、ぜひ読んでください。何か間違っていることがあれば、ぜひ議論してください。