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

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); //望ましい結果