首頁  >  文章  >  web前端  >  js中的三種繼承方式與優缺點

js中的三種繼承方式與優缺點

怪我咯
怪我咯原創
2017-06-29 11:03:051227瀏覽

下面小編就為大家帶來一篇淺談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中文網其他相關文章!

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