快捷導(dǎo)航

淺談Javascript實(shí)現(xiàn)繼承的方法

更新時(shí)間：2015年07月06日 09:22:26 投稿：hebedich

本文給大家簡(jiǎn)單介紹了下如何在javascript中實(shí)現(xiàn)繼承的幾種方法，十分的實(shí)用，有需要的小伙伴可以參考下。

S1:js中一切皆對(duì)象，想想如果要實(shí)現(xiàn)對(duì)父對(duì)象屬性和方法的繼承，最初我們會(huì)怎樣子來實(shí)現(xiàn)呢，考慮到原型的概念，最初我是這樣來實(shí)現(xiàn)繼承的

function Parent(){
   this.name='123';
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
console.log('Name :'+son.getName()+';Age: '+son.getAge());
 
 
VM1777:16 Name :123;Age: 20

從上面可以看到實(shí)現(xiàn)對(duì)Parent的繼承主要是覆寫了Son的prototype,這樣便把Parent的屬性和方法過給了Son的原型，這樣子在通過new Son()構(gòu)造出來的對(duì)象均會(huì)繼承來自原型【即父對(duì)象Parent】的屬性和方法，這樣就達(dá)到了繼承效果；但這樣會(huì)帶來一個(gè)副作用，就是當(dāng)父對(duì)象中包含引用類型的屬性時(shí)，子對(duì)象對(duì)引用類型數(shù)據(jù)的修改，會(huì)影響到所有的子對(duì)象，顯然這不是我們需要的效果:

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple", "pear"]

S2:目前想到要解決這個(gè)問題就是使每個(gè)子對(duì)象都擁有一份父對(duì)象屬性的復(fù)制品，這樣修改屬性時(shí)只是修改了子對(duì)象下的屬性，而不會(huì)影響到其他的子對(duì)象屬性。這一目標(biāo)的實(shí)現(xiàn)參照前人的對(duì)象冒充的方式來實(shí)現(xiàn)

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   Parent.call(this);
   this.age=20;
}
Son.prototype=new Parent();
Son.prototype.getAge=function(){
   return this.age;
}
var son=new Son();
var son1=new Son();
console.log(son.fruits);//["apple"]
console.log(son1.fruits);//["apple"]
son.fruits.push('pear');
console.log(son.fruits);//["apple", "pear"]
console.log(son1.fruits);//["apple"]

上面我在Son函數(shù)里加了Parent.call(this)實(shí)現(xiàn)在new Son()的時(shí)候?qū)his[即new 出來的Son對(duì)象]冒充成Parent函數(shù)里的上下文this來調(diào)用Parent()函數(shù),從而拿到了父對(duì)象的屬性和方法副本，所以在接下來修改父對(duì)象的屬性和方法時(shí)其實(shí)是修改的副本，故達(dá)到了不會(huì)影響全部子對(duì)象的效果。但是由于Son.prototype=new Parent()的使用，我們得到了兩份實(shí)例的屬性和方法，而再我們拿到了副本以后,只是需要父對(duì)象的原型就行了,從下面可以看出我們只需要原型中的getname();

S3:接下來就是要去掉一份實(shí)例的屬性和方法，這時(shí)候是constructor發(fā)揮作用的時(shí)候了，看下邊代碼，將Parent.prototype重新構(gòu)建成一個(gè)原生對(duì)象，來作為子對(duì)象的原型，再把constructor指向子構(gòu)造器

function Parent(){
   this.name='123';
   this.fruits=['apple'];
}
Parent.prototype.getName=function(){
   return this.name;
}
function Son(){
   Parent.call(this);
   this.age=20;
}
function Extend(Parent,Son){
   var proto = new Object(Parent.prototype);
   proto.constructor = Son;
   Son.prototype=proto;
}
Extend(Parent,Son);
Son.prototype.getAge=function(){
   return this.age;
}