快捷導(dǎo)航

js繼承實(shí)現(xiàn)方法詳解

更新時(shí)間：2016年12月16日 12:19:40 作者：鬼畜十三

這篇文章主要介紹了js繼承實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了javascript繼承的實(shí)現(xiàn)方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了js繼承實(shí)現(xiàn)方法。分享給大家供大家參考，具體如下：

var animal=function(name){ //構(gòu)造函數(shù)
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){ //prototype主要作用:給類增加一個(gè)新的屬性或函數(shù)
  alert(this.name+"正在叫！");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍！");
};
var dog=new animal("小黑");  //實(shí)例化
dog.sayhello();
dog.shout();
dog.game();

一、原型繼承

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){
  alert(this.name+"正在叫！");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍！");
};
var Dog=function(name){
  this.name=name;
  this.shout=function(){   //重寫父類的函數(shù)
  alert(this.name+"汪汪叫！");
  }
}
Dog.prototype=Cat.prototype=new animal();
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();
var cat=new Cat("小白");
cat.sayhello();
cat.shout();
cat.game();

animal是父類(或超類)，要繼承于誰(shuí)，誰(shuí)就是父類(超類)

改進(jìn)：專門寫個(gè)函數(shù)，用來(lái)實(shí)現(xiàn)繼承

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
Function.prototype.extends=function(superclass){      //extends是保留關(guān)鍵字，不能拿出來(lái)單獨(dú)使用，如var extends=function(){}，而這里可以使用是因?yàn)樗鰹楹瘮?shù)的屬性添加上去
  this.prototype=new superclass();
};
animal.prototype.shout=function(){
  alert(this.name+"正在叫！");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍！");
};
var Dog=function(name){
  this.name=name;
  this.shout=function(){
  alert(this.name+"汪汪叫！");
  }
}
Dog.extends(animal);
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();
var dog=new Dog("小白");
dog.sayhello();
dog.shout();
dog.game();

二、call,apply繼承(不完全繼承)

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){
  alert(this.name+"正在叫！");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍！");
};
var Dog=function(name){
  animal.call(this,name);
}
var dog=new Dog("小黑");
dog.sayhello();
dog.shout();
dog.game();

輸出：hi我是小黑

TypeError: dog.shout is not a function

通過(guò)call(apply)的方式，只能改變其this指向，通過(guò)prototype添加進(jìn)去的方法，他是無(wú)法直接繼承的

總結(jié)：call，apply這種方式的繼承適用于沒(méi)有prototype的類或者不需要繼承prototype所添加屬性或函數(shù)的類，因?yàn)閏all和apply函數(shù)只是實(shí)現(xiàn)了方法的替換，而沒(méi)有對(duì)對(duì)象的屬性和函數(shù)進(jìn)行復(fù)制操作

原型繼承，則可以繼承所有的屬性和函數(shù)

繼承的屬性，只有刪除原有屬性，才會(huì)輸出繼承的屬性

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: