萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> 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 &n
copyright © 萬盛學電腦網 all rights reserved