下面小編就為大家帶來一篇淺談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登入後複製
#
以上是js中的三種繼承方式與優缺點的詳細內容。更多資訊請關注PHP中文網其他相關文章！
