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

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

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

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

var animal=function(name){ //構造函數(shù)
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
animal.prototype.shout=function(){ //prototype主要作用:給類增加一個新的屬性或函數(shù)
  alert(this.name+"正在叫！");
};
animal.prototype.game=function(){
  alert(this.name+"正在玩耍！");
};
var dog=new animal("小黑");  //實例化
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是父類(或超類)，要繼承于誰，誰就是父類(超類)

改進：專門寫個函數(shù)，用來實現(xiàn)繼承

var animal=function(name){
  this.name=name;
  this.sayhello=function(){
  alert("hi我是"+this.name);
  };
}
Function.prototype.extends=function(superclass){      //extends是保留關鍵字，不能拿出來單獨使用，如var extends=function(){}，而這里可以使用是因為他做為函數(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

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

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

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

繼承的屬性，只有刪除原有屬性，才會輸出繼承的屬性

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: