JavaScriptの継承機構の実装(続き)_jsオブジェクト指向

1. オブジェクトの偽装
原則: コンストラクターは、this キーワードを使用して、すべてのプロパティとメソッドに値を割り当てます (つまり、クラス宣言のコンストラクター メソッドを使用します)。
コンストラクターは単なる関数なので、ClassA のコンストラクターを ClassB のメソッドにして呼び出すことができます。 ClassB は、ClassA のコンストラクターで定義されたプロパティとメソッドを受け取ります。
例:
クラス A とクラス B は次のように定義されています:

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

function ClassA(sColor){
this.color=sColor;
this.sayColor=function(){
alert(this.color);
}

function ClassB(sColor){
}

キーワード this は、コンストラクターによって現在作成されているオブジェクトを参照します。
しかし、このメソッドでは、this はそれが属するオブジェクトを指します。この原則では、ClassA を構築行番号としてではなく、通常の関数として使用して継承メカニズムを確立します。
継承メカニズムは、次のようにコンストラクター ClassB を使用して実装できます。

コードをコピーします コードは次のとおりです。 🎜>

function ClassB(sColor){

this.newMethod=ClassA;
delete this.newMethod>}


このコード In, (ただし、ここでは「put」する必要があると思います) ClassA にはメソッド newMethod が割り当てられます (関数名はそれへの単なるポインターであることに注意してください)。次に、このメソッドを呼び出して、ClassB のコンストラクターのパラメーター sColor を渡します。コードの最後の行は ClassA への参照を削除し、今後呼び出すことができないようにします。
すべての新しいプロパティと新しいメソッドは、新しいメソッドのコード行を削除した後に定義する必要があります。それ以外の場合、スーパー クラスの関連するプロパティとメソッドがオーバーライドされる可能性があります:

コードをコピーします

コードは次のとおりです: function ClassB(sColor,sName){ this.newMethod=classA;

this.newMethod(sColor);

this. name=sName;
this.sayName=function(){
alert(this.name);
}


次の例を実行します。 >



コードをコピー

コードは次のとおりです。

var objA=new ClassA("red"); var objB=new ClassB( "blue","Nicholas"); objA.sayColor();//「赤」を出力 objB.sayColor();//「青」を出力 objB.sayName(); // 出力 "Nicholas"

たとえば、ClassX と ClassY の 2 つのクラスがあり、ClassZ がこれら 2 つのクラスを継承したい場合、次のコードを使用できます。




コードをコピー

コードは次のとおりです。

function ClassZ(){ this .newMethod=ClassX; this.newMethod(); this.newMethod(); ;

}

ここ 欠点は、ClassX と ClassY に同じ名前のプロパティまたはメソッドがある場合、後ろから継承するため ClassY の優先順位が高くなります。この小さな問題とは別に、オブジェクトの偽装を使用して複数の継承メカニズムを実装するのは簡単です。
この継承メソッドの人気により、ECMAScript の 3 番目のバージョンでは、Function オブジェクトに call() と apply() という 2 つの新しいメソッドが追加されました。

2. call() メソッド

call() メソッドは、古典的なオブジェクト偽装メソッドに最もよく似ています。その最初のパラメータは this のオブジェクトとして機能します。他のすべてのパラメーターは関数自体に直接渡されます。例:

コードをコピー

コードは次のとおりです。

function SayColor(sPrefix,sSuffix) ){

alert(sPrefix this.color sSuffix) var obj=new Object(); obj.color="red";は赤です、本当にとてもいい色です。" sayColor.call(obj,"その色は ","、とてもいい色です。")
この例では関数sayColor()がオブジェクトの外に定義されており、キーワードthisはどのオブジェクトにも属していなくても参照可能です。オブジェクトの obj の color プロパティは「red」と同じです。 call() メソッドを呼び出すとき、最初のパラメータは obj で、sayColor() 関数の this キーワードに
を割り当てる必要がある値が obj であることを示します。 2 番目と 3 番目のパラメータは文字列です。これらは、sayColor() 関数のパラメータのプレフィックスとサフィックスを照合し、最終的に「色は赤です。本当に素晴らしい色です。」というメッセージを生成します。
このメソッドを継承メカニズムのオブジェクト偽装メソッドで使用するには、次のようにします。プレフィックスを置き換えます 割り当て、呼び出し、および削除の 3 行のコードを置き換えるだけです:

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

function ClassB(sColor,sName){
//this.newMethod=classA;
//this.newMethod(sColor); >Class.call(this ,sColor);

this.sayName=function(){
alert(this.name); >}


ここでは、ClassA のキーワード this を新しく作成した ClassB オブジェクトと等しくしたいので、これが最初のパラメーターになります。 2 番目のパラメーター sColor は、両方のクラスの唯一のパラメーターです。

3.apply() メソッド

apply() メソッドには、this として使用されるオブジェクトと、関数に渡されるパラメーターと配列の 2 つのパラメーターがあります。例:


コードをコピー

コードは次のとおりです。 function SayColor(sPrefix,sSuffix) ){ alert(sPrefix this.color sSuffix) var obj=new Object();

//出力"色は赤です、本当にとてもいい色です。"
sayColor.apply(obj,new Array("色は ","、とてもいい色です。")); 🎜>この例 apply() メソッドが呼び出される点を除いて、前の例と同じです。 apply() メソッドを呼び出すとき、最初のパラメータは依然として obj です。これは、sayColor() のこのキーワードの値を obj として指定する必要があることを意味します。 2 番目のパラメーターは、sayColor() のパラメーターのプレフィックスとサフィックスに一致する 2 つの文字列で構成される配列です。生成されるメッセージは依然として
「色は赤です。確かに素晴らしい色です。
このメソッドは、新しいメソッドの割り当て、呼び出し、削除を行うためのコードの最初の 3 行を置き換えるのにも使用されます:




コードをコピー

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


function ClassB(sColor,sName){

//this.newMethod =classA; //this.newMethod(sColor); ClassA.apply(this,new Array(sColor)); this.name =sName; this.sayName=function(){ alert(this.name)}

}

;最初のパラメータは依然として this です。 2 番目のパラメーターは、値 color を 1 つだけ持つ配列です。 ClassB の引数オブ​​ジェクト全体を apply() メソッドに 2 番目のパラメーターとして渡すことができます。




コードをコピー


コードは次のとおりです。


function ClassB(sColor,sName){

//this.newMethod=classA;
//this.newMethod(sColor); this.newMethod を削除します。

ClassA.apply(this,arguments); this.sayName=function(){ alert(this.name); } ; }

もちろん、パラメーター オブジェクトは、スーパークラス内のパラメーターの順序がサブクラス内のパラメーターの順序とまったく同じである場合にのみ渡されます。そうでない場合は、パラメータを正しい順序で指定した別の配列を作成する必要があります。さらに、call() メソッドを使用することもできます。