js中继承的几种用法总结(apply,call,prototype)
一，js中對(duì)象繼承
js中有三種繼承方式
1.js原型（prototype）實(shí)現(xiàn)繼承
<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.構(gòu)造函數(shù)實(shí)現(xiàn)繼承
<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實(shí)現(xiàn)繼承
什么情況下用apply,什么情況下用call ?
在給對(duì)象參數(shù)的情況下,如果參數(shù)的形式是數(shù)組的時(shí)候,比如apply示例里面?zhèn)鬟f了參數(shù)arguments,這個(gè)參數(shù)是數(shù)組類型,并且在調(diào)用的時(shí)候參數(shù)的列表是對(duì)應(yīng)一致的就可以采用?apply?,?如果我的一個(gè)對(duì)象的參數(shù)列表是這樣的(age,name),而另外一個(gè)對(duì)象的參數(shù)列表是(name,age,grade),這樣就可以用call來(lái)實(shí)現(xiàn)了,也就是直接指定參數(shù)列表對(duì)應(yīng)值的位置(***.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,第一個(gè)參數(shù)this都一樣,指當(dāng)前對(duì)象?
??? //2,第二個(gè)參數(shù)不一樣：call的是一個(gè)個(gè)的參數(shù)列表；apply的是一個(gè)數(shù)組（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>?
調(diào)用一個(gè)對(duì)象的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。?
??? call([thisObj[,arg1[, arg2[,?? [,.argN]]]]])?
參數(shù)?
thisObj?
可選項(xiàng)。將被用作當(dāng)前對(duì)象的對(duì)象。?
arg1, arg2,? , argN?
可選項(xiàng)。將被傳遞方法參數(shù)序列。?
說(shuō)明?
call 方法可以用來(lái)代替另一個(gè)對(duì)象調(diào)用一個(gè)方法。call 方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。?
如果沒(méi)有提供 thisObj 參數(shù)，那么 Global 對(duì)象被用作 thisObj。</SPAN>?
說(shuō)簡(jiǎn)單一點(diǎn)，這兩函數(shù)的作用其實(shí)就是更改對(duì)象的內(nèi)部指針，即改變對(duì)象的this指向的內(nèi)容。這在面向?qū)ο蟮膉s編程過(guò)程中有時(shí)是很有用的。下面以apply為例，說(shuō)說(shuō)這兩個(gè)函數(shù)在 js中的重要作用。如：
<SPAN style="FONT-SIZE: 18px"> function Person(name,age){?? //定義一個(gè)類??
??????? 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){??? //學(xué)生類??
??????? Person.apply(this,arguments);//比call優(yōu)越的地方??
??????? Print.apply(this,arguments);?
??????? this.grade=grade;??????????????? //年級(jí)??
??????? this.school=school;???????????????? //學(xué)校??
??? }?
??? var p1=new Person("卜開(kāi)化",80);?
??? p1.sayhello();?
??? var s1=new Student("白云飛",40,9,"岳麓書(shū)院");?
??? s1.show();?
??? s1.sayhello();?
??? alert(s1.funcName);</SPAN>?
另外，Function.apply()在提升程序性能方面有著突出的作用：
我們先從Math.max()函數(shù)說(shuō)起，Math.max后面可以接任意個(gè)參數(shù)，最后返回所有參數(shù)中的最大值。
比如
<SPAN style="FONT-SIZE: 18px">alert(Math.max(5,8));?? //8??
??? alert(Math.max(5,7,9,3,1,6));?? //9??
??? //但是在很多情況下，我們需要找出數(shù)組中最大的元素。??
??? var arr=[5,7,9,1];?
??? //alert(Math.max(arr));??? // 這樣卻是不行的。NaN??
??? //要這樣寫(xiě)??
??? 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，可以這樣寫(xiě)??
??? function getMax2(arr){?
??????? return Math.max.apply(null,arr);?
??? }?
??? alert(getMax2(arr)); //9??
??? //兩段代碼達(dá)到了同樣的目的，但是getMax2卻優(yōu)雅，高效，簡(jiǎn)潔得多。??
??? //再比如數(shù)組的push方法。??
??? var arr1=[1,3,4];?
??? var arr2=[3,4,5];?
??? //如果我們要把 arr2展開(kāi)，然后一個(gè)一個(gè)追加到arr1中去，最后讓arr1=[1,3,4,3,4,5]??
??? //arr1.push(arr2)顯然是不行的。 因?yàn)檫@樣做會(huì)得到[1,3,4,[3,4,5]]??
??? //我們只能用一個(gè)循環(huán)去一個(gè)一個(gè)的push(當(dāng)然也可以用arr1.concat(arr2)，但是concat方法并不改變arr1本身)??
??? var arrLen=arr2.length;?
??? for(var i=0;i<arrLen;i++){?
??????? arr1.push(arr2[i]);?
??? }?
??? //自從有了Apply,事情就變得如此簡(jiǎn)單??
??? Array.prototype.push.apply(arr1,arr2); //現(xiàn)在arr1就是想要的結(jié)果</SPAN>?
轉(zhuǎn)載于:https://www.cnblogs.com/riddly/p/4214233.html
總結(jié)
以上是生活随笔為你收集整理的js中继承的几种用法总结(apply,call,prototype)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python html parse
- 下一篇： HT for Web 3D游戏设计设计-