淺談JavaScript 繼承機制的實現

物件假冒的方法實作:

[javascript]
function Human() { //定義Human類別  
    this.species = "Human";
function Sex(sex) {     //定義Sex類  
    this.sex = sex; 
} = name; 
    this.newMethod1 = Human;    //物件冒充,指向Human物件  
    this.newMethod1();         

    this.newMethod2 = Sex;      //物件冒充,指向Sex物件  
    this.newMethod2(sex);       //調用方法,實現繼承 
} 
var chin1 = new Chinese("小明","Male"); 
function Human() {  //定義Human類別
 this.species = "Human" ;
}
function Sex(sex) {  //定義Sex類
 this.sex = sex;
}
function Chinese(name,sex) {
this.name = name;
 this.newMethod1 = Human;   //物件冒充,指向Human物件
 this.newMethod1();   //呼叫方法,實作繼承
 delete this.newMethod1; ////呼叫方法,實現繼承
 delete this.newMethod1; /////////////////錯誤呼叫
 
 this.newMethod2 = Sex;   //物件冒充,指向Sex物件
 this.newMethod2(sex);  //呼叫方法,實現繼承
 delete this.newMethod2;  //呼叫方法,實現繼承
 delete this.newMethod2; //////////////////已實現繼承錯誤」
}
var chin1 = new Chinese("小明","Male");

 

物件冒充的方法很簡單易懂,原理就是利用方法的呼叫,在函數內實現屬性的定義.

,物件冒充還能實現多繼承.但也有不好地方.

如下:

[javascript]

因為是透過呼叫函數來"繼承"的,如果多繼承時,父類別出現同名屬性時,會被優先順序高的替代.

例如上面的程式碼中,Sex類別會取代Human類別的同名屬性.

 

也可以透過call()和apply()方法來實現繼承,

其實原理和物件冒充一樣.

[javascript]

function Human(){       //定義Human類別  

     
this.sex = sex; 
} 
function Chinese(name,sex){ 
    this.name = name; 
    Human.call(this)； call()方法  
    Sex.apply(this,[sex]);  //apply()方法  
} 
var chin1 = newapply()方法  
} 
var chin1 = newapply()研究" ,"Male"); 
function Human(){   //定義Human類別
 this.species = "Human";
}
function Sex(sex) {  //定義Sex類
 this.sex = ex. function Chinese(name,sex){
 this.name = name;
 Human.call(this);   //call()方法
 Sex.apply( this,[sex]); //apply()方法
}
var chin1 = new Chinese("小明","Male");
這裡是call()和apply()方法的介紹:http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp


其實物件冒充最大的問題就是,無法透過子類別找到繼承的父類別.

其實物件冒充最大的問題就是,無法透過子類別找到繼承的父類別.

所以這並非真正意義的繼承.

[javascript]
chin1 instanceof Chinese;   //true  
chin1 instanceof Human;   /false  
chin1 instanceof Sex;       //false 
chin1 instanceof Chinese;  //false
chin1 instanceof Sex;  //false

當繼承的父類中有定義對應的方法時,每次定義的對像都會重新生成一個對應的方法,這樣十分浪費內存,而且不便於管理.

[javascript]
function Human(){ //定義Human類別  
    this.species = "Human"; 
    this.fun = function() {}; 
} 
function Sex(sex) {  
function Chinese(name,sex){ 
    this.name = name; 
    Human.call(this);   //call()方法  
   chin1 = new Chinese("小明","Male"); 
var chin2 = new Chinese("小紅","Female"); 
chin1.fun === chin2.fun; //false 
function Human() {   //定義Human類別
 this.species = "Human";
 this.fun = function() {};
}
function Sex(sex) {  //定義Sex類
.this.sex = function Chinese(name,sex){
 this.name = name;
 Human.call(this);   //call()方法
 Sex.apply(this,[sex]); //apply()方法
}
var chin1 = new Chinese("小明","Male");
var chin2 = new Chinese("小紅","Female");
chin1.fun === chin2.fun; //false

 

因此,下面要討論的是原型繼承(prototype).

[javascript]

function Human(){       //定義Human類別  

    this.species = "Human"; = name; 

} 
Chinese.prototype = new Human(); //原型物件指向Human類別  
Chinese.prototype.constructor = Chinese; //constructor屬性時指向它的建構函式  
var chin1 = new Chinese("Achin. "); 
chin1 instanceof Chinese; //true  
chin1 instanceof Human; //true 
function Human(){   //定義Human類別
 this.species = "Human"; .name = name;
}
Chinese.prototype = new Human(); //原型物件指向Human類別
Chinese.prototype.constructor = Chinese; //constructor屬性時指向它的建構子
var chin1 = new Chinese( "小明");
chin1 instanceof Chinese; //true
chin1 instanceof Human; //true
這樣就實現了真正意義上的繼承.

相比對象冒充的方法,這樣的寫法不夠直觀.

但同時也解決了重複產生函數的問題.

 


最後,把原型繼承實現簡單的封裝:

[javascript]

Object.prototype.extendTo = function(parent) { 

(this. ); 

    this.prototype.constructor = this; 

    this.uber = parent.prototype; 

} 

 

 
    this.fun = function( ) { 

        return 0; 

    }; 
} 
 
function Chinese(name){ ¤繼承.  
 
var chin1 = new Chinese( "小明"); 
Ob​​ject.prototype.extendTo = function(parent) {
 this.prototype = new parent();
 this.prototype.constructor = this;
 this.uber = parent.prototype; Human(){   //定義Human類別
 this.species = "Human";
 this.fun = function() {
  return 0;
 };
}
🜎function Chinesename){Yunctionname. ;
}

Chinese.extendTo(Human); //實作繼承.

var chin1 = new Chinese("小明");