jsにおける3つの継承方法とそのメリット・デメリット

以下のエディターでは、js の 3 つの 継承 メソッドとその長所と短所について簡単に説明します。編集者はそれが非常に良いと思うので、参考として共有します。最初の方法はプロトタイプの方法です:

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  this.feature = ['beard','strong']; 
} 

man.prototype = new person(); 
var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

この方法は最も簡単です。の場合、サブクラスのプロトタイプ属性値を継承インスタンスに割り当てるだけで、継承クラスのメソッドを直接使用できます。 プロトタイプ属性とは何を意味しますか?プロトタイプはプロトタイプです。すべてのオブジェクト (関数によって定義) には、オブジェクト タイプであるデフォルトのプロトタイプ プロパティがあります。

そして、このデフォルト属性は、チェーンの上方検索を実現するために使用されます。これは、オブジェクトの属性が存在しない場合、その属性はプロトタイプ属性が属するオブジェクトを通じて検索されることを意味します。プロトタイプが見つからない場合はどうすればよいですか?

js は、プロトタイプのプロトタイプ属性が属するオブジェクトを自動的に検索します。そのため、属性が見つかるか、プロトタイプが最終的に空 (「未定義」) になるまで、プロトタイプ

index

を調べます。たとえば、上記の例では、1 つのインスタンスの one.view() メソッドについて、js は最初に 1 つのインスタンスに view() メソッドがあるかどうかを確認します。存在しないため、man.prototype 属性を探します。そして、prototypeの値はpersonのインスタンスです

このインスタンスにはview()メソッドがあるので、呼び出しは成功します。

2 番目の適用方法:

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  // person.apply(this,new Array()); 
  person.apply(this,[]); 
  this.feature = ['beard','strong']; 
} 

var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

注: apply パラメーターが空の場合、つまりパラメーターが渡されない場合、new Array()、[] を介して渡され、null は無効です。 3 番目のメソッド、call+prototype:

//父类 
function person(){ 
  this.hair = 'black'; 
  this.eye = 'black'; 
  this.skin = 'yellow'; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
} 

//子类 
function man(){ 
  // person.apply(this,new Array()); 
  person.call(this,[]); 
  this.feature = ['beard','strong']; 
} 

man.prototype = new person(); 
var one = new man(); 

console.log(one.feature); //['beard','strong'] 
console.log(one.hair); //black 
console.log(one.eye); //black 
console.log(one.skin); //yellow 
console.log(one.view()); //black,black,yellow

call メソッドの実装メカニズムには、もう 1 つ man.prototype = new person(); が必要です。 これは、呼び出しメソッドがメソッドの置換のみを実装し、オブジェクトの属性をコピーしないためです。 Google Map APIの継承はこのメソッドを使用します。

3 つの継承メソッドの実装は上記にまとめられています。しかし、それぞれの方法には長所と短所があります。

親クラスが次のような場合:

//父类 
function person(hair,eye,skin){ 
  this.hair = hair; 
  this.eye = eye; 
  this.skin = skin; 
  this.view = function(){ 
    return this.hair + ',' + this.eye + ',' + this.skin; 
  } 
}

サブクラスの人がオブジェクトの作成中に親クラスの人にパラメータを渡すことができるようにするには、プロトタイプの継承メソッドは適用できません

apply を使用する必要があります。 または、call メソッドを使用する必要があります:

//apply方式 
//子类 
function man(hair,eye,skin){ 
  person.apply(this,[hair,eye,skin]); 
  this.feature = ['beard','strong']; 
} 
//call方式 
//子类 
function man(hair,eye,skin){ 
  person.call(this,hair,eye,skin); 
  this.feature = ['beard','strong']; 
}

しかし、apply メソッドの使用にはまだ欠点があります。なぜでしょうか。 js には、「instanceof」という非常に重要な

演算子 があり、この演算子はオブジェクトが特定の型であるかどうかを比較するために使用されます。

この例では、man 型に加えて、one インスタンスも person 型である必要がありますが、apply メソッドで継承した後、one は person 型、つまり ( の値) に属しません。人の 1 つのインスタンス) は false です。

結局のところ、最良の継承メソッドは call+prototype メソッドです。その後、(BaseClass の 1 つのインスタンス) の値が true であるかどうかを試してみます。

3 番目の継承メソッドにも欠陥があります。新しいオブジェクトをサブクラス化する場合、親クラスに必要なパラメーターが渡される必要があり、親クラスの

プロパティとメソッド

が再作成されます。次の継承メソッドは完璧です。 :

りー

以上がjsにおける3つの継承方法とそのメリット・デメリットの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。