快捷導(dǎo)航

淺談js中的三種繼承方式及其優(yōu)缺點(diǎn)

更新時(shí)間：2016年08月10日 09:22:42 投稿：jingxian

下面小編就為大家?guī)?lái)一篇淺談js中的三種繼承方式及其優(yōu)缺點(diǎn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧

第一種，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

這種方式最為簡(jiǎn)單，只需要讓子類的prototype屬性值賦值為被繼承的一個(gè)實(shí)例就行了，之后就可以直接使用被繼承類的方法了。

prototype 屬性是啥意思呢？ prototype 即為原型，每一個(gè)對(duì)象 ( 由 function 定義出來(lái) ) 都有一個(gè)默認(rèn)的原型屬性，該屬性是個(gè)對(duì)象類型。

并且該默認(rèn)屬性用來(lái)實(shí)現(xiàn)鏈的向上攀查。意思就是說，如果某個(gè)對(duì)象的屬性不存在，那么將通過prototype屬性所屬對(duì)象來(lái)查找這個(gè)屬性。如果 prototype 查找不到呢？

js會(huì)自動(dòng)地找prototype的prototype屬性所屬對(duì)象來(lái)查找，這樣就通過prototype一直往上索引攀查，直到查找到了該屬性或者prototype最后為空 (“undefined”);

例如上例中的one.view()方法，js會(huì)先在one實(shí)例中查找是否有view()方法，因?yàn)闆]有，所以查找man.prototype屬性，而prototype的值為person的一個(gè)實(shí)例，

該實(shí)例有view()方法，于是調(diào)用成功。

第二種，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參數(shù)為空，即沒有參數(shù)傳遞，則通過 new Array() 、[] 來(lái)傳遞，null 無(wú)效。

第三種，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方式的實(shí)現(xiàn)機(jī)制卻要多一條 man.prototype = new person(); 為啥呢？
那是因?yàn)閏all方法只實(shí)現(xiàn)了方法的替換而沒有作對(duì)象屬性的復(fù)制操作。
google Map API 的繼承就是使用這種方式。

上面總結(jié)了三種繼承方式的實(shí)現(xiàn)。但是每種方法都有其優(yōu)缺點(diǎn)。

假如父類是這樣的：

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

子類應(yīng)該如何設(shè)計(jì)，使子類man在創(chuàng)建對(duì)象的同時(shí)傳遞參數(shù)到父類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方法也還是有缺點(diǎn)的，為什么？在js中，我們有個(gè)非常重要的運(yùn)算符就是”instanceof”，該運(yùn)算符用來(lái)比較某個(gè)對(duì)向是否為某種類型。

對(duì)于這個(gè)例子，one實(shí)例除了是man類型，也應(yīng)該是person類型，但是apply方式繼承之后，one卻不屬于person類型，即(one instanceof person)的值為false。

經(jīng)此種種，最好的繼承方式就是call+prototype方式了，之后你可以試一下(one instanceof BaseClass)的值是否為true。

第三種繼承方式也有缺陷：子類new對(duì)象時(shí)要傳一遍父類所需的參數(shù)，而且會(huì)重現(xiàn)父類中的屬性和方法，下面這種繼承方式才是完善的：

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中的三種繼承方式及其優(yōu)缺點(diǎn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: