JavaScript のプロトタイプ、適用、および呼び出しメソッドの長所と短所の詳細な例-jsチュートリアル-php.cn

JavaScript のプロトタイプ、適用、および呼び出しメソッドの長所と短所の詳細な例

伊谢尔伦

リリース： 2017-07-20 15:52:29

オリジナル

1687 人が閲覧しました

プロトタイプメソッド:

プロトタイプ属性は何を意味しますか?プロトタイプはプロトタイプです。すべてのオブジェクト (関数によって定義) には、オブジェクトタイプであるデフォルトのプロトタイププロパティがあります。

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

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

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

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

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

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

ログイン後にコピー

これこのメソッドは最も単純です。サブクラスのプロトタイプ属性値を継承されたインスタンスに割り当てるだけで、継承されたクラスのメソッドを直接使用できます。

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

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

Apply メソッド:

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

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

var one = new man(); 

console.log(one.feature); //[&#39;beard&#39;,&#39;strong&#39;] 
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 は無効です。

call メソッド:

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

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

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

console.log(one.feature); //[&#39;beard&#39;,&#39;strong&#39;] 
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 + &#39;,&#39; + this.eye + &#39;,&#39; + this.skin; 
  } 
}

ログイン後にコピー

オブジェクトの作成時にサブクラスの人が親クラスの人にパラメータを渡すことができるように、サブクラスをどのように設計する必要がありますか? プロトタイプの継承メソッドは適用できません。 apply を使用する必要があります。または、call メソッドを使用する必要があります:

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

ログイン後にコピー

しかし、apply メソッドの使用には依然として欠点があります。なぜでしょうか? js には、オブジェクトが特定の型であるかどうかを比較するために使用される「instanceof」と呼ばれる非常に重要な演算子があります。

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

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

3 番目の継承メソッドにも欠陥があります。新しいオブジェクトをサブクラス化する場合、親クラスに必要なパラメータが渡される必要があり、親クラスのプロパティとメソッドが再作成されます。次の継承メソッドは完璧です。

りー

以上がJavaScript のプロトタイプ、適用、および呼び出しメソッドの長所と短所の詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。