js中继承的几种用法总结(apply,call,prototype)
一，js中對象繼承
js中有三種繼承方式
1.js原型（prototype）實現繼承
<SPAN style="<SPAN style="FONT-SIZE: 18px"><html> ?
<body>?
<script type="text/javascript">?
??? function Person(name,age){?
??????? this.name=name;?
??????? this.age=age;?
??? }?
??? Person.prototype.sayHello=function(){?
??????? alert("使用原型得到Name："+this.name);?
??? }?
??? var per=new Person("馬小倩",21);?
??? per.sayHello(); //輸出：使用原型得到Name:馬小倩?
?????
??? function Student(){}?
??? Student.prototype=new Person("洪如彤",21);?
??? var stu=new Student();?
??? Student.prototype.grade=5;?
??? Student.prototype.intr=function(){?
??????? alert(this.grade);?
??? }?
??? stu.sayHello();//輸出：使用原型得到Name:洪如彤?
??? stu.intr();//輸出：5?
</script>?
</body>?
</html></SPAN></SPAN>?
2.構造函數實現繼承
<SPAN style="FONT-SIZE: 18px"><html>?
<body>?
<script type="text/javascript">?
??? function? Parent(name){?
??????? this.name=name;?
??????? this.sayParent=function(){?
??????????? alert("Parent:"+this.name);?
??????? }?
??? }?
??? function? Child(name,age){?
??????? this.tempMethod=Parent;?
??????? this.tempMethod(name);?
??????? this.age=age;?
??????? this.sayChild=function(){?
??????????? alert("Child:"+this.name+"age:"+this.age);?
??????? }?
??? }?
??? var parent=new Parent("江劍臣");?
??? parent.sayParent(); //輸出：“Parent:江劍臣”?
??? var child=new Child("李鳴",24); //輸出：“Child:李鳴 age:24”?
??? child.sayChild();?
</script>?
</body>?
</html></SPAN>
3.call , apply實現繼承
什么情況下用apply,什么情況下用call ?
在給對象參數的情況下,如果參數的形式是數組的時候,比如apply示例里面傳遞了參數arguments,這個參數是數組類型,并且在調用的時候參數的列表是對應一致的就可以采用?apply?,?如果我的一個對象的參數列表是這樣的(age,name),而另外一個對象的參數列表是(name,age,grade),這樣就可以用call來實現了,也就是直接指定參數列表對應值的位置(***.call(this,age,name,grade)); ?
?代碼如下:<SPAN style="FONT-SIZE: 18px"><html>?
<body>?
<script type="text/javascript">?
??? function? Person(name,age,love){?
??????? this.name=name;?
??????? this.age=age;?
??????? this.love=love;?
??????? this.say=function say(){?
??????????? alert("姓名："+name);?
??????? }?
??? }?
??? //call方式?
??? function student(name,age){?
??????? Person.call(this,name,age);?
??? }?
??? //apply方式?
??? function teacher(name,love){?
??????? Person.apply(this,[name,love]);?
??????? //Person.apply(this,arguments); //跟上句一樣的效果，arguments?
??? }?
??? //call與aplly的異同：?
??? //1,第一個參數this都一樣,指當前對象?
??? //2,第二個參數不一樣：call的是一個個的參數列表；apply的是一個數組（arguments也可以）?
??? var per=new Person("武鳳樓",25,"魏熒屏"); //輸出：“武鳳樓”?
??? per.say();?
??? var stu=new student("曹玉",18);//輸出：“曹玉”?
??? stu.say();?
??? var tea=new teacher("秦杰",16);//輸出：“秦杰”?
??? tea.say();?
</script>?
</body>?
</html></SPAN>?
調用一個對象的一個方法，以另一個對象替換當前對象。?
??? call([thisObj[,arg1[, arg2[,?? [,.argN]]]]])?
參數?
thisObj?
可選項。將被用作當前對象的對象。?
arg1, arg2,? , argN?
可選項。將被傳遞方法參數序列。?
說明?
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。?
如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。</SPAN>?
說簡單一點，這兩函數的作用其實就是更改對象的內部指針，即改變對象的this指向的內容。這在面向對象的js編程過程中有時是很有用的。下面以apply為例，說說這兩個函數在 js中的重要作用。如：
<SPAN style="FONT-SIZE: 18px"> function Person(name,age){?? //定義一個類??
??????? this.name=name;???? //名字??
??????? this.age=age;?????? //年齡??
??????? this.sayhello=function(){alert(this.name)};?
??? }?
??? function Print(){??????????? //顯示類的屬性??
??????? this.funcName="Print";?
??????? this.show=function(){?
??????????? var msg=[];?
??????????? for(var key in this){?
??????????????? if(typeof(this[key])!="function"){?
??????????????????? msg.push([key,":",this[key]].join(""));?
??????????????? }?
??????????? }?
??????????? alert(msg.join(" "));?
??????? };?
??? }?
??? function Student(name,age,grade,school){??? //學生類??
??????? Person.apply(this,arguments);//比call優越的地方??
??????? Print.apply(this,arguments);?
??????? this.grade=grade;??????????????? //年級??
??????? this.school=school;???????????????? //學校??
??? }?
??? var p1=new Person("卜開化",80);?
??? p1.sayhello();?
??? var s1=new Student("白云飛",40,9,"岳麓書院");?
??? s1.show();?
??? s1.sayhello();?
??? alert(s1.funcName);</SPAN>?
另外，Function.apply()在提升程序性能方面有著突出的作用：
我們先從Math.max()函數說起，Math.max后面可以接任意個參數，最后返回所有參數中的最大值。
比如
<SPAN style="FONT-SIZE: 18px">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]);?
??????? }?
??????? return ret;?
??? }?
??? alert(getMax(arr)); //9??
??? //換用apply，可以這樣寫??
??? function getMax2(arr){?
??????? return Math.max.apply(null,arr);?
??? }?
??? alert(getMax2(arr)); //9??
??? //兩段代碼達到了同樣的目的，但是getMax2卻優雅，高效，簡潔得多。??
??? //再比如數組的push方法。??
??? var arr1=[1,3,4];?
??? var arr2=[3,4,5];?
??? //如果我們要把 arr2展開，然后一個一個追加到arr1中去，最后讓arr1=[1,3,4,3,4,5]??
??? //arr1.push(arr2)顯然是不行的。 因為這樣做會得到[1,3,4,[3,4,5]]??
??? //我們只能用一個循環去一個一個的push(當然也可以用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>?
轉載于:https://www.cnblogs.com/riddly/p/4214233.html
總結
以上是生活随笔為你收集整理的js中继承的几种用法总结(apply,call,prototype)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python html parse
- 下一篇： HT for Web 3D游戏设计设计-