本篇文章主要介紹了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 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>