首頁 > web前端 > js教程 > javascript原型繼承基本模式用法及改良方式實例詳解

javascript原型繼承基本模式用法及改良方式實例詳解

伊谢尔伦
發布: 2017-07-27 10:49:58
原創
1255 人瀏覽過

在Javascript中,每個函數都有一個原型屬性prototype指向自身的原型,而由這個函數創建的對像也有一個__proto__屬性指向這個原型,而函數的原型是一個對象,所以這個對像也會有一個__proto__指向自己的原型,這樣逐層深入直到Object物件的原型,這樣就形成了原型鏈。

每個函數都是Function函數建立的對象,所以每個函數也有一個__proto__屬性指向Function函數的原型。這裡要指出的是,真正形成原型鏈的是每個物件的__proto__屬性,而不是函數的prototype屬性,這是很重要的。

基本模式:

var Parent = function(){
    this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(){
    this.name = 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent() ;
var child = new Child() ;
console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child
登入後複製

這種是最簡單實作原型繼承的方法,直接把父類別的物件賦值給子類別建構子的原型,這樣子類別的物件就可以訪問到父類別以及父類別建構子的prototype中的屬性。這種方法的優點很明顯,實現十分簡單,不需要任何特殊的操作;同時缺點也很明顯,如果子類需要做跟父類構造函數中相同的初始化動作,那麼就得在子類構造函數中再重複一次父類別中的動作:

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild
登入後複製

上面這種情況還只是需要初始化name屬性,如果初始化工作不斷增加,這種方式是很不方便的。因此就有了下面一種改進的方式:借用建構子

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild
登入後複製

上面這個方法在子類別建構子中透過apply呼叫父類別的建構子來進行相同的初始化工作,這樣不管父類別中做了多少初始化工作,子類別也可以執行同樣的初始化工作。但是上面這種實作還存在一個問題,父類別建構函式被執行了兩次,一次是在子類別建構函式中,一次在賦值子類別原型時,這是很多餘的,所以我們還需要做一個改進:

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild
登入後複製

這樣我們就只需要在子類別建構函式中執行一次父類別的建構函數,同時又可以繼承父類別原型中的屬性,這也比較符合原型的初衷,就是把需要重複使用的內容放在原型中。


以上是javascript原型繼承基本模式用法及改良方式實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板