首頁  >  文章  >  web前端  >  js中繼承的幾種用法總結(apply,call,prototype)_javascript技巧

js中繼承的幾種用法總結(apply,call,prototype)_javascript技巧

WBOY
WBOY原創
2016-05-16 17:07:011188瀏覽

一,js中物件繼承

js中有三種繼承方式

1.js原型(prototype)實作繼承

複製程式碼 程式碼如下:


程式碼如下:



程式碼如下:



 
 
 
 
 

2.建構子實現繼承複製程式碼
程式碼如下:


 
 
 




3.call , apply實現繼承


複製代碼 程式碼如下:

 
 
 




二、call和apply的用法(詳細介紹)


js中call和apply都可以實現繼承,唯一的一點參數不同,func.call(func1,var1,var2,var3)對應的apply寫法為:func.apply(func1,[var1,var2,var3] )。
JS手冊中對call的解釋:

複製代碼


代碼如下:

代碼如下:call 方法  呼叫一個物件的一個方法,以另一個物件取代目前物件。 
    call([thisObj[,arg1[, arg2[,   [,.argN]]]]) 

參數可 
thisObj 

參數可 
。將被用作當前對象的對象。 

arg1, arg2,  , argN 
可選。將會被傳遞方法參數序列。 

說明 
call 方法可以用來取代另一個物件呼叫一個方法。 call 方法可將一個函數的物件上下文從初始的上下文變更為由 thisObj 指定的新物件。 

如果沒有提供 thisObj 參數,則 Global 物件被用作 thisObj。  


說簡單一點,這兩函數的作用其實就是更改物件的內部指針,也就是改變物件的this指向的內容。這在物件導向的js程式設計過程中有時是很有用的。以下以apply為例,說說這兩個函數在 js中的重要角色。如:


複製程式碼 程式碼如下:

function Person(name,age){   //定義一個類別  
       age;       //年齡  
       顯示類別的屬性  
        this.funcName=" Print"; 
        this.show=function(){ 
                            if(typeof(this[key])!="function "){ 
                    msg.push([key,":",this[key]].join(              } 
            alert(msg.join(" ") ); 
        }; 
    } 
    function Student(name,age,grade,school){ ), 學生類別all優越的地方  
        Print.apply(this,arguments); 
        this.grade=grade;      school=school;                 //學校  
    } 
    var p1=new Person("卜開化",80); 
    p1.sayhello(); 
    var s1=new Student("白雲飛",40,9,"岳麓學院"); 
>    s1.sayhello(); 
    alert(s1.funcName);
 


另外,Function.apply()在提升程式效能方面有著突出的作用:
另外,Function.apply()在提升程式效能方面有著突出的作用:
我們先從Math.max()函數說起,Math.max後面可以接任意個參數,最後回傳所有參數中的最大值。
例如




複製程式碼


程式碼如下:

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){ 
      ];i            ret=Math.max(ret,arr[i]); 
      🎜>
    alert(getMax(arr)); //9  

    //改用apply,可以這樣寫  
    function getMax2(arr){ 
    🎜>    alert(getMax2(arr)); //9  

    //兩段程式碼達到了同樣的目的,但是getMax2卻優雅,高效,簡潔得多。  

    //再例如陣列的push方法。
    var arr1=[1,3,4]; 
    var arr2=[3,4,5]; 
    //如果我們要把arr2展開,然後一個一個追加到arr1中去,最後要把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    } 

    //自從有了Apply,事情就變得如此簡單  

    Array.prototype.push.🎜>
    Array.prototype.push.o.想要的結果
 


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn