javascript實現繼承方式簡單介紹

螞蟻小編發表於2017-03-27

作為一物件導向的語言,繼承自然是一大特徵之一,但是javascript的繼承和c#和java這種普通意義上的繼承又有所不同,下面就介紹一下javascript如何實現繼承,希望能夠給需要的朋友帶來幫助。

一.物件冒充方式:

1.物件冒充方式一:

要掌握物件冒充方式實現的繼承,一定要對this的作用有良好的掌握。

關於this的用法可以參閱javascript this一章節。函式既可以作為普通意義上的函式,也可以作為建構函式,作為構造含稅保護的時候,通常情況下建構函式內部都是由this的存在,可以通過這個this為物件新增屬性或者方法,看一段程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
function classA(webName,target){  
  this.webName=webName;
  this.target=target;
  this.func=function(){
    console.log(this.webName)
  }
}
var obj=new classA("螞蟻部落","分享互助");
obj.func();

上面的程式碼演示了建構函式的作用,可以例項化一個物件,類似於類(當前js沒有類這個概念)。我們可以將父建構函式在子建構函式內部使用,這樣的話就能夠實現子類繼承父類的效果。

程式碼例項:

[JavaScript] 純文字檢視 複製程式碼
function classA(webName){  this.webName=webName;
  this.func=function(){
    console.log(this.webName)
  }
}
 
function classB(name,age){
  this.antzone=classA;
  this.antzone(name)
  this.age=age;
  delete this.antzone;
}
var obj=new classB("螞蟻部落",2);
obj.func();

2.使用call來實現物件冒充:使用call()函式也開始可以實現繼承效果的,對上面的程式碼做一下修改:

[JavaScript] 純文字檢視 複製程式碼
function classA(webName){
  this.webName=webName;
  this.func=function(){
    console.log(this.webName)
  }
}
 
 
function classB(name,age){
  classA.call(this,name);
  this.age=age;
}
var obj=new classB("螞蟻部落",2);
obj.func();

上面的程式碼同樣實現了繼承效果,當然使用apply()函式也是可以的。

call()函式可以參閱js call()函式用法介紹一章節。

二.使用prototype原型實現繼承:

原型指向的物件都會被繼承帶建構函式的物件例項中去。

關於原型繼承方式,這裡就不多介紹了,具體可以參閱javascript prototype原型一章節。

相關文章