萬盛學電腦網 >> 腳本專題 >> javascript >> js中繼承的幾種用法總結
js中繼承的幾種用法總結
本篇文章主要介紹了js中繼承的幾種用法總結(apply,call,prototype) 需要的朋友可以過來參考下，希望對大家有所幫助
一，js中對象繼承 js中有三種繼承方式 1.js原型（prototype）實現繼承 代碼如下: <SPAN style="BACKGROUND-COLOR: #ffffff"><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實現繼承 代碼如下: <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和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 方法 調用一個對象的一個方法，以另一個對象替換當前對象。 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 &njavascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved