jsにおける継承の使い方まとめ（適用、呼び出し、プロトタイプ）

jsにおける継承の使い方まとめ（適用、呼び出し、プロトタイプ）_javascriptスキル

WBOY

リリース： 2016-05-16 17:07:01

オリジナル

1169 人が閲覧しました

1. js でのオブジェクトの継承

js には 3 つの継承メソッドがあります

1.js プロトタイプ実装の継承

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

  
 /javascript"> 
 function person(name,age){ 
 this.name=name; 
 this.age=age; 
 } 
 person.prototype.sayHello=function() { 
alert("プロトタイプを使用して名前を取得します: " this.name); 
 var per=new Person("Ma Xiaoqian",21); 
 per.sayHello(); /output : プロトタイプを使用して名前を取得します: Ma Xiaoqian 

 
 function Student(){} 
 Student.prototype=new Person("Hong Rutong",21); new Student(); 
 Student.prototype.grade=5; 
 アラート(this.grade); 
 stu.sayHello( );//出力: プロトタイプを使用して名前を取得します: Hon Rutong 
 stu.intr();//出力: 5 
 
  


2. コンストラクター実装の継承



 

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

="text/javascript"> 関数親(名前){ this.name=name; this.sayParent=function(){ アラート("親:" this.name) ; } }

}

関数 Child(name,age){
this.tempMethod(name); age;
this.sayChild=function( ; >parent.sayParent(); //出力: "親:Jiang Jianchen"
var child=new Child("Li Ming",24); //出力: "Child:Li Minage:24"
child .sayChild()

🎜>
3.呼び出し、継承を適用します

コードをコピー

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

 
 🎜>

 js では call と apply の両方を継承できます。唯一のパラメーターの違いは、func.call(func1,var1,var2,var3) に対応する apply が次のように記述されることです。 func.apply(func1,[var1,var2, var3])。 

JS マニュアルの呼び出しの説明: 

コードをコピー

コードは次のとおりです: < ;SPAN style="FONT-SIZE: 18px">call メソッド オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

パラメータ
thisObj

オプション。現在のオブジェクトとして使用されるオブジェクト。 arg1、arg2、、、argN オプション。一連のメソッドパラメータが渡されます。説明 call メソッドを使用すると、別のオブジェクトの代わりにメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクトコンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。

thisObj パラメーターが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。  


簡単に言えば、これら 2 つの関数の機能は、実際にはオブジェクトの内部ポインタを変更すること、つまり、オブジェクトの this が指すコンテンツを変更することです。 。これは、オブジェクト指向の js プログラミングで役立つ場合があります。 apply を例にして、js におけるこれら 2 つの関数の重要な役割について説明しましょう。例: 




 コードをコピー 


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


 function person(name,age){ //クラスを定義します 
 this.name=name; // これに名前を付けます。 age=age; //年齢 
 this.sayhello=function(){alert(this.name)}; 
 } 
 function Print(){ // クラス属性を表示 
 this.funcName = "印刷"; 
 this.show=function(){ 
 var msg=[]; 
 for(var key){ 
 if(typeof(this[key])!= " function"){ 
 g.join(" ")); 
 }; 
 } 
 function Student(name, age,grade,school){ //学生クラス 
 person.apply (this,arguments);//Place 
 Print.apply(this,arguments); //成績 
 this.school=school; > } 
 var p1=new person( "Bu Kaihua",80); 
 p1.sayhello(); 
 var s1=new Student("Bai Yunfei",40,9,"Yuelu Academy") ); 
 s1.show(); 
 s1.funcName); 


 () はプログラムのパフォーマンスを向上させる上で重要な役割を果たします。
Math.max() 関数から始めましょう。Math.max の後には任意の数のパラメータを指定でき、最後にすべてのパラメータの最大値を返します。 
例




コードをコピーします


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

alert(Math.max(5,8)) //8 
alert(Math.max(5,7,9, 3,1,6)); //9 

 //しかし、多くの場合、配列内の最大の要素を見つける必要があります。 

 var arr=[5,7,9,1]; 
 //alert(Math.max(arr)); // これは不可能です。 NaN 

 //次のように記述します 
 function getMax(arr){ 
 var arrLen=arr.length 
 for(var i=0,ret=arr[0];i< arrLen;i ){ 
 ret=Math.max(ret,arr[i]); 
 アラート(getMax(arr)); //9 

 //適用に切り替えると、次のように記述できます。 
 function getMax2(arr){ 
 return Math.max.apply(null,arr) 
 } 

 alter(getMax2(arr); )); //9 

 //2 つのコードは同じ目的を達成しますが、getMax2 はエレガントで効率的で、より簡潔です。 

 //別の例は、配列のプッシュ メソッドです。 
 var arr1=[1,3,4]; 
 var arr2=[3,4,5]; 
 // arr2 を 1 つずつ追加し、最後にarr1=[1,3,4,3,4,5] 
 //arr1.push(arr2) は明らかに機能しません。 これを実行すると [1,3,4,[3,4,5]] が取得されるためです。 

 //ループを使用して 1 つずつプッシュすることしかできません (もちろん、arr1.concat( を使用することもできます) arr2) ですが、 concat メソッドは arr1 自体を変更しません) 

 var arrLen=arr2.length; 
 for(var i=0;i arr1.push( arr2[i ]); 
 } 

 //Apply 以降、物事は非常にシンプルになりました 

 Array.prototype.push.apply(arr1,arr2); //望ましい結果 