1. jsでのオブジェクトの継承
jsには3つの継承メソッドがあります
1.jsプロトタイプ(プロトタイプ)は継承を実装します
次のようにコードをコピーします。
<SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>
<本文>
<script type="text/javascript">
関数 人(名前,年齢){
this.name=名前;
this.age=年齢;
}
person.prototype.sayHello=function(){
alert("プロトタイプを使用して名前を取得します: "+this.name);
}
var per=新しい人("馬暁銭",21);
per.sayHello(); //出力: プロトタイプを使用して名前を取得します: Ma Xiaoqian
関数 Student(){}
Student.prototype=新しい人物("ホン・ルトン",21);
var stu=新しい学生();
Student.prototype.grade=5;
Student.prototype.intr=function(){
アラート(この.グレード);
}
stu.sayHello();//出力: プロトタイプを使用して名前: Hon Rutong を取得します
stu.intr();//出力: 5
</script>
</body>
</html></SPAN></SPAN>
2. コンストラクターは継承を実装します
次のようにコードをコピーします。
<SPAN style="FONT-SIZE: 18px"><html>
<本文>
<script type="text/javascript">
関数 親(名前){
this.name=名前;
this.sayParent=function(){
alert("親:"+this.name);
}
}
function Child(名前,年齢){
this.tempMethod=親;
this.tempMethod(名前);
this.age=年齢;
this.sayChild=function(){
alert("子供:"+この.名前+"年齢:"+この.年齢);
}
}
varparent=new Parent("ジャン・ジェンチェン");
parent.sayParent(); //出力: "親: Jiang Jianchen"
var child=new Child("李明",24); //出力: "Child:李明age:24"
child.sayChild();
</script>
</body>
</html></SPAN>
3.call、継承の実装に適用
次のようにコードをコピーします。
<SPAN style="FONT-SIZE: 18px"><html>
<本文>
<script type="text/javascript">
関数 人(名前,年齢,愛){
this.name=名前;
this.age=年齢;
this.love=愛;
this.say=関数say(){
アラート("名前:"+名前);
}
}
//メソッドの呼び出し
関数 学生(名前, 年齢){
person.call(この人,名前,年齢);
}
//メソッドを適用する
関数 先生(名前,愛){
Person.apply(this,[名前,愛]);
//Person.apply(this,arguments); //前の文と同じ効果、arguments
}
//呼び出しと適用の類似点と相違点:
//1、最初のパラメータは同じで、現在のオブジェクトを参照します
//2、2 番目のパラメータが異なります。call は 1 つずつパラメータのリストです。apply は配列です (引数も使用できます)。
var per=new Person("五峰楼",25,"魏英平") //出力: "五峰楼"
per.say();
var stu=new students("Cao Yu",18);//出力: "Cao Yu"
stu.say();
var tea=new Teacher("Qin Jie",16);//出力: "Qin Jie"
お茶.say();
</script>
</body>
</html></SPAN>
2. callとapplyの使い方(詳しい紹介)
js の call と apply はどちらも継承を実装できます。唯一のパラメーターの違いは、func.call(func1,var1,var2,var3) に対応する apply 書き込みメソッドが func.apply(func1,[var1,var2,var3]) であることです。 。
JSマニュアルのcallの説明:
次のようにコードをコピーします。
<SPAN style="FONT-SIZE: 18px">メソッドの呼び出し
オブジェクトのメソッドを呼び出して、現在のオブジェクトを別のオブジェクトに置き換えます。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
パラメータ
このオブジェクト
オプション。現在のオブジェクトとして使用されるオブジェクト。
引数1、引数2、、、引数N
オプション。一連のメソッドパラメータが渡されます。
説明する
call メソッドを使用すると、別のオブジェクトに代わってメソッドを呼び出すことができます。 call メソッドは、関数のオブジェクト コンテキストを初期コンテキストから thisObj で指定された新しいオブジェクトに変更します。
thisObj パラメータが指定されていない場合は、グローバル オブジェクトが thisObj として使用されます。 </SPAN>
簡単に言うと、これら 2 つの関数の機能は、実際にはオブジェクトの内部ポインタを変更すること、つまり、オブジェクトの this が指すコンテンツを変更することです。これは、オブジェクト指向の js プログラミングで役立つ場合があります。 js におけるこれら 2 つの関数の重要な役割について説明するために、例として apply を取り上げてみましょう。のように:
次のようにコードをコピーします。
<SPAN style="FONT-SIZE: 18px"> function person(name,age){ //クラスを定義します
this.name=名前; //名前;
this.age=年齢; //年齢;
this.sayhello=function(){alert(this.name)};
}
function Print(){ //クラスの属性を表示する
this.funcName="印刷";
this.show=function(){
var msg=[];
for(この中のvarキー){
if(typeof(this[key])!="関数"){
msg.push([キー,":",この[キー]].join(""));
}
}
アラート(msg.join(" "));
};
}
function Student(名前,年齢,学年,学校){ //生徒クラス
Person.apply(this,arguments); // 呼び出しよりも優れた点
Print.apply(this,arguments);
this.grade=グレード; //
this.school=学校;
}
var p1=新しい人("Bu Kaihua",80);
p1.sayhello();
var s1=新入生("白雲飛",40,9,"岳麓学院");
s1.show();
s1.sayhello();
アラート(s1.funcName);</SPAN>
さらに、Function.apply() はプログラムのパフォーマンスを向上させる上で重要な役割を果たします。
Math.max() 関数から始めましょう。Math.max の後には任意の数のパラメータを指定でき、最後にすべてのパラメータの最大値を返します。
例えば
次のようにコードをコピーします。
<SPAN style="FONT-SIZE: 18px">alert(Math.max(5,8));
アラート(Math.max(5,7,9,3,1,6));
//しかし多くの場合、配列内の最大の要素を見つける必要があります。
var arr=[5,7,9,1];
//alert(Math.max(arr)); // これは機能しません。 NaN
// このように書きます
関数 getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
}
retを返します。
}
アラート(getMax(arr));
//適用に切り替えると、次のように書くことができます
関数 getMax2(arr){
Math.max.apply(null,arr) を返します。
}
アラート(getMax2(arr));
// 2 つのコードは同じ目的を達成しますが、getMax2 はエレガントで効率的で、はるかに簡潔です。
//もう 1 つの例は、配列のプッシュ メソッドです。
var arr1=[1,3,4];
var arr2=[3,4,5];
// arr2 を展開したい場合は、arr1 に 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<arrLen;i++){
arr1.push(arr2[i]);
}
//Apply の導入以来、物事は非常にシンプルになりました
Array.prototype.push.apply(arr1,arr2); // これで、arr1 が望ましい結果になります。</SPAN>