1. 程式人生 > >js的三種繼承方式及其優缺點

js的三種繼承方式及其優缺點

第一種,prototype的方式:

//父類  
function person(){  
    this.hair = 'black';  
    this.eye = 'black';  
    this.skin = 'yellow';  
    this.view = function(){  
        return this.hair + ',' + this.eye + ',' + this.skin;  
    }  
}  

//子類  
function man(){  
    this.feature = ['beard','strong'];  
}  

man.prototype = new person();  
var one = new man();  

console.log(one.feature); //['beard','strong']  
console.log(one.hair); //black  
console.log(one.eye); //black  
console.log(one.skin); //yellow  
console.log(one.view()); //black,black,yellow  

這種方式最為簡單,只需要讓子類的prototype屬性值賦值為被繼承的一個例項就行了,之後就可以直接使用被繼承類的方法了。
prototype 屬性是啥意思呢? prototype 即為原型,每一個物件 ( 由 function 定義出來 ) 都有一個預設的原型屬性,該屬性是個物件型別。
並且該預設屬性用來實現鏈的向上攀查。意思就是說,如果某個物件的屬性不存在,那麼將通過prototype屬性所屬物件來查詢這個屬性。如果 prototype 查詢不到呢?
js會自動地找prototype的prototype屬性所屬物件來查詢,這樣就通過prototype一直往上索引攀查,直到查詢到了該屬性或者prototype最後為空 (“undefined”);

例如上例中的one.view()方法,js會先在one例項中查詢是否有view()方法,因為沒有,所以查詢man.prototype屬性,而prototype的值為person的一個例項,
該例項有view()方法,於是呼叫成功。

第二種,apply的方式:

//父類  
function person(){  
    this.hair = 'black';  
    this.eye = 'black';  
    this.skin = 'yellow';  
    this.view = function(){  
        return this.hair + ',' + this.eye + ',' + this.skin;  
    }  
}  

//子類  
function man(){  
    // person.apply(this,new Array());  
    person.apply(this,[]);  
    this.feature = ['beard','strong'];  
}  

var one = new man();  

console.log(one.feature); //['beard','strong']  
console.log(one.hair); //black  
console.log(one.eye); //black  
console.log(one.skin); //yellow  
console.log(one.view()); //black,black,yellow  

注意:如果apply引數為空,即沒有引數傳遞,則通過 new Array() 、[] 來傳遞,null 無效。

第三種,call+prototype的方式:

//父類  
function person(){  
    this.hair = 'black';  
    this.eye = 'black';  
    this.skin = 'yellow';  
    this.view = function(){  
        return this.hair + ',' + this.eye + ',' + this.skin;  
    }  
}  

//子類  
function man(){  
    // person.apply(this,new Array());  
    person.call(this,[]);  
    this.feature = ['beard','strong'];  
}  

man.prototype = new person();  
var one = new man();  

console.log(one.feature); //['beard','strong']  
console.log(one.hair); //black  
console.log(one.eye); //black  
console.log(one.skin); //yellow  
console.log(one.view()); //black,black,yellow  

call方式的實現機制卻要多一條 man.prototype = new person(); 為啥呢?
那是因為call方法只實現了方法的替換而沒有作物件屬性的複製操作。
google Map API 的繼承就是使用這種方式。

上面總結了三種繼承方式的實現。但是每種方法都有其優缺點。

假如父類是這樣的:

//父類  
function person(hair,eye,skin){  
    this.hair = hair;  
    this.eye = eye;  
    this.skin = skin;  
    this.view = function(){  
        return this.hair + ',' + this.eye + ',' + this.skin;  
    }  
}  

子類應該如何設計,使子類man在建立物件的同時傳遞引數到父類person,prototype的繼承方式就不適用了,
必須採用apply或者call的方式了:

//apply方式  
//子類  
function man(hair,eye,skin){  
    person.apply(this,[hair,eye,skin]);  
    this.feature = ['beard','strong'];  
}  
//call方式  
//子類  
function man(hair,eye,skin){  
    person.call(this,hair,eye,skin);  
    this.feature = ['beard','strong'];  
}  

但是用apply方法也還是有缺點的,為什麼?在js中,我們有個非常重要的運算子就是”instanceof”,該運算子用來比較某個對向是否為某種型別。
對於這個例子,one例項除了是man型別,也應該是person型別,但是apply方式繼承之後,one卻不屬於person型別,即(one instanceof person)的值為false。
經此種種,最好的繼承方式就是call+prototype方式了,之後你可以試一下(one instanceof BaseClass)的值是否為true。
第三種繼承方式也有缺陷:子類new物件時要傳一遍父類所需的引數,而且會重現父類中的屬性和方法,下面這種繼承方式才是完善的:

function Person(name){      
    this.name = name;  
}  

Person.prototype.getName = function() {  
    return this.name;  
}  

function Chinese(name, nation) {  
    Person.call(this, name);  
    this.nation = nation;  
}  

//繼承方法  
function inherit(subClass, superClass) {  
    function F() {}  
    F.prototype = superClass.prototype;  
    subClass.prototype = new F();  
    subClass.prototype.constructor = subClass.constructor;  
}  

inherit(Chinese, Person);  

Chinese.prototype.getNation = function() {  
    return this.nation;  
};  

var p = new Person('shijun');  
var c = new Chinese("liyatang", "China");  

console.log(p); // Person {name: "shijun", getName: function}  
console.log(c); // Chinese {name: "liyatang", nation: "China", constructor: function, getNation: function, getName: function}  


console.log(p.constructor); // function Person(name){}  
console.log(c.constructor); // function Chinese(){}  

console.log(c instanceof Chinese); // true  
console.log(c instanceof Person); // true