ホームページ  >  記事  >  ウェブフロントエンド  >  Javascript_javascript スキルで継承を実装する 3 つのメソッドとコード例

Javascript_javascript スキルで継承を実装する 3 つのメソッドとコード例

WBOY
WBOYオリジナル
2016-05-16 16:39:521025ブラウズ

継承はオブジェクト指向プログラミングを実装する際に非常に重要な手段です。過剰な継承を避け、継承の代わりに合成を使用するべきだとは言いますが、継承は常に避けられません。ここで説明したいのは、JavaScript の継承メカニズムです。

JavaScript には実際には継承の概念はありませんが、何らかの方法でそれを模倣することができます。この種の継承では、実際には、あるオブジェクトが別のオブジェクトにコピーされます。主にセキュリティ上の理由から、すべてのローカル クラスとホスト クラスを基本クラスとして継承できないことに注意する必要があります。

JavaScript には、大きく 3 つのタイプの継承があります: 1. オブジェクトの偽装、2. プロトタイプの継承、3. 2 つの混合。

1. オブジェクトのなりすまし

実際、オブジェクトの偽装は this キーワードと密接に関連しています (したがって、JavaScript の this キーワードを完全に理解することが非常に重要です:P)。コンストラクターはこれを使用してプロパティやメソッドに値を割り当てます。コンストラクターは通常の関数とみなすこともできるため、基本クラスのコンストラクターをサブクラスのコンストラクターにして、これをサブクラス関数内で呼び出すことができます。 、その後、サブクラスは親クラスの属性とメソッドを取得します。

原理は非常に単純ですが、どのように実装すればよいでしょうか?以下に実際の動作のコード例を示します。

オブジェクト偽装実装メソッド 1、新しいオブジェクトを作成する最も一般的に使用されるメソッド:

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

var classA = 関数(名前){
this.name = 名前;
this.alertName = function(){
アラート(this.name);
}
}

var classB = function(名前,年齢){
this.myConstructor = classA;
this.myConstructor(名前);
this.myConstructor を削除します;

this.age = 年齢;
this.alertAge = function(){
アラート(この年齢);
}
}

上記の方法が正しいかどうかを確認するために、以下のテストコードを書きます。

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

var objA = 新しいクラスA('DK');
objA.alertName();//DK

var objB = 新しいクラスB('DS',20);

objB.alertName();//DS
objB.alertAge();//20

これは、いわゆるオブジェクト偽装です。また、オブジェクト偽装を実装するには、実装方法は異なりますが、原理は同じです。

オブジェクト偽装実装メソッド 2、呼び出しメソッドを使用します:

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

var classA = 関数(名前){
this.name = 名前;
this.alertName = function(){
アラート(this.name);
}
}

var classB = function(名前,年齢){
classA.call(this,name);

this.age = 年齢;
this.alertAge = function(){
アラート(この年齢);
}
}

これはコードからもわかります。最初のメソッドでは、親クラスを指す新しい関数ポインターを作成し、その関数を呼び出してから、そのポインターを削除します。ここでは、同じ目的を達成するために、call メソッドを使用してこのオブジェクトの下で親クラスのコンストラクターを実行します。また、call メソッドの逆は apply メソッドです。

オブジェクト偽装実装メソッド 3 、apply メソッドを使用します:

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

var classA = 関数(名前){
this.name = 名前;
this.alertName = function(){
アラート(this.name);
}
}

var classB = function(名前,年齢){
classA.apply(this,new Array(name));

this.age = 年齢;
this.alertAge = function(){
アラート(この年齢);
}
}

実際、apply メソッドは、渡されるパラメーターがわずかに異なることを除いて、call メソッドと非常によく似ていることがわかります。

2. プロトタイプの継承

誰もがプロトタイプ オブジェクトについて知っておくべきです。したがって、親クラスのすべてのプロパティとメソッドをサブクラスのプロトタイプ オブジェクトに渡すと、プロトタイプ オブジェクトのすべてのプロパティとメソッドがクラスのすべてのインスタンスに渡されます。 、つまり、私たちの継承を実現することに相当します。

サブクラスが親クラスのすべての属性とメソッドを取得したい場合は、親クラスのインスタンスをサブクラスのプロトタイプ オブジェクトに直接支払います。その場合、サブクラスはすべてのオブジェクトとメソッドを取得することと同じになります。親クラス?

コードサンプルサービス:

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

var classA = function(){
this.name = 'DK';
this.alertName = function(){
アラート(this.name);
}
}

var classB = function(名前,年齢){
this.name = 名前;
this.age = 年齢;
}

classB.prototype = new classA();

classB.prototype.alertAge = function(){
アラート(この年齢);
}

ここでの親クラスのコンストラクターはパラメーターがないことを確認する必要があることに注意してください。なぜなら、たとえ構築パラメータがあっても、プロトタイプ継承を実装するときにそれらを =.=!

として渡すことはできないからです。

3. 混合継承

名前が示すように、混合継承は最初の 2 つの方法を組み合わせたものです。

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

var classA = 関数(名前){
this.name = 名前;
}

classA.prototype.alertName = function(){
アラート(this.name);
}

var classB = function(名前,年齢){
classA.call(this,name);
this.age = 年齢;
}

classB.prototype = new classA();

classB.prototype.alertAge = function(){
アラート(この年齢);
}

オブジェクトの偽装を使用して親クラスにパラメーターを渡し、プロトタイプの継承を使用してパブリック メソッドを継承します。

これら 3 つの継承方法について説明したので、次は問題について説明します。

オブジェクトの偽装とプロトタイプ継承がなぜ存在するのか疑問に思われるかもしれませんが、はい、最も重要なことはこの問題です。

1. 実際にテストしてみると、オブジェクト偽装による継承により、サブクラスは親クラスのプロトタイプチェーン上のメソッドにアクセスできないことがわかります。

2. プロトタイプ継承を使用すると、すべてのプロパティが共有プロパティになります。同じサブクラスの 2 つのインスタンスを実装すると、すべてのインスタンスがすべてのプロパティを共有することがわかります。

3. しかし、これは明らかに不適切です。したがって、ハイブリッド継承があり、サブクラスが親クラスのプロトタイプ チェーンのメソッドにアクセスできるようにしながら、プロパティをプライベートのままにすることができます。

オブジェクトが継承されたふりをしている場合、サブクラスは親クラスのプロトタイプ チェーン メソッドにアクセスできません。プロトタイプ チェーン継承サブクラスのすべてのインスタンスは、すべての親クラスの属性を共有します。ここでは例は書きません。

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