3步 實現Javascript繼承

如果你是Javascript大牛,此文章對你無意義.

 

@author YHC

首先在Javascript中是沒有繼承extend這個關鍵字的,那麼在Java,C#,….等等面向對象語言中,在繼承時可通過關鍵字實現,他們的運行原理也許有所不同,但是他們都有一個共同點就是

在調用子類的構造函數時,都隱示調用瞭父類的構造方法,那麼在js中我們也可以通過代碼 實現.分為3步:

1.在子類構造函數中調用父類構造函數.

2.修改子類prototype(原型鏈)屬性為父類的實例.

3.重置子類的prototype的constructor屬性為子類.

代碼:

[javascript]
/**
      Person類
     */ 
    function Person(name){ 
        //賦值name屬性  
        this.name=name; 
        /**
         獲得Person類的name屬性
        */ 
        this.getName=function(){ 
            return this.name; 
        }; 
    } 
     
    ////創建Person類實例  
    var pp=new Person('Master'); 
    //輸出name屬性值  
    alert(pp.getName()); //結果:Master  
     
    /**
    Student類
    **/ 
    function Student(name,score){ 
       //調用父類構造方法,並傳遞name參數  
       Person.call(this,name); 
       //賦值Score屬性  
       this.score=score; 
       /**
                    獲得score屬性值
       */ 
       this.getScore=function(){ 
        return score;    
       }; 
    } 
     
    //將Student的原型鏈指向Person對象  
    Student.prototype=new Person(); 
    //重置constructor屬性為Student類,由於設置瞭Student類的prototype為Person時  
    //擦除瞭constructor屬性  
    Student.prototype.constructor=Student; 
     
    //實例化Student類  
    var s=new Student('Master',100); 
    //輸出學生name和score屬性值  
    alert(s.getName()+':'+s.getScore());//結果:Master:100 

/**
      Person類
     */
    function Person(name){
     //賦值name屬性
     this.name=name;
     /**
      獲得Person類的name屬性
     */
     this.getName=function(){
      return this.name;
     };
    }
   
    ////創建Person類實例
    var pp=new Person('Master');
    //輸出name屬性值
    alert(pp.getName()); //結果:Master
   
    /**
    Student類
    **/
    function Student(name,score){
       //調用父類構造方法,並傳遞name參數
       Person.call(this,name);
       //賦值Score屬性
       this.score=score;
       /**
                    獲得score屬性值
       */
       this.getScore=function(){
     return score;  
       };
    }
   
    //將Student的原型鏈指向Person對象
    Student.prototype=new Person();
    //重置constructor屬性為Student類,由於設置瞭Student類的prototype為Person時
    //擦除瞭constructor屬性
    Student.prototype.constructor=Student;
   
    //實例化Student類
    var s=new Student('Master',100);
    //輸出學生name和score屬性值
    alert(s.getName()+':'+s.getScore());//結果:Master:100

 

在Javascript中每一個對象都有一個prototype屬性,這個屬性要麼是null要麼是指向一個對象.在Student s對象訪問s.getName()屬性時如果這個方法或者成員在本對象中為查找到

那麼JavaScript會逐一上訪每一個原型對象,直到找到該成員為止,或者一個查找到Object.prototype對象.如果是這樣那麼繼承另一個類我們就隻需要將子類的prototype屬性指向父類的示例就OK瞭,

那麼為什麼我們還需要重置子類Student.prototype.constructor屬性?因為我們在設置Student.prototype這個屬性為父類實例的時候這個屬性被擦除瞭,所以需要重置.

 

 

發佈留言