再談Javascript原型繼承

ThinkSNS 發布于2019-08-21 10:21 / 2877人閱讀

摘要：原型繼承基本模式這種是最簡單實現原型繼承的方法，直接把父類的對象賦值給子類構造函數的原型，這樣子類的對象就可以訪問到父類以及父類構造函數的中的屬性。

真正意義上來說Javascript并不是一門面向對象的語言，沒有提供傳統的繼承方式，但是它提供了一種原型繼承的方式，利用自身提供的原型屬性來實現繼承。Javascript原型繼承是一個被說爛掉了的話題，但是自己對于這個問題一直沒有徹底理解，今天花了點時間又看了一遍《Javascript模式》中關于原型實現繼承的幾種方法，下面來一一說明下，在最后我根據自己的理解提出了一個關于繼承比較完整的實現，如果大家有不同意見，歡迎建議。

原型與原型鏈

說原型繼承之前還是要先說說原型和原型鏈，畢竟這是實現原型繼承的基礎。
在Javascript中，每個函數都有一個原型屬性prototype指向自身的原型，而由這個函數創建的對象也有一個__proto__屬性指向這個原型，而函數的原型是一個對象，所以這個對象也會有一個__proto__指向自己的原型，這樣逐層深入直到Object對象的原型，這樣就形成了原型鏈。下面這張圖很好的解釋了Javascript中的原型和原型鏈的關系。

每個函數都是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

這樣我們就只需要在子類構造函數中執行一次父類的構造函數，同時又可以繼承父類原型中的屬性，這也比較符合原型的初衷，就是把需要復用的內容放在原型中，我們也只是繼承了原型中可復用的內容。上面這種方式的原型圖如下：

臨時構造函數模式(圣杯模式)

上面借用構造函數模式最后改進的版本還是存在問題，它把父類的原型直接賦值給子類的原型，這就會造成一個問題，就是如果對子類的原型做了修改，那么這個修改同時也會影響到父類的原型，進而影響父類對象，這個肯定不是大家所希望看到的。為了解決這個問題就有了臨時構造函數模式。

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) ;
} ;
var F = function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;

var parent = new Parent("myParent") ;
var child = new Child("myChild") ;

console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

該方法的原型繼承圖如下：

很容易可以看出，通過在父類原型和子類原型之間加入一個臨時的構造函數F，切斷了子類原型和父類原型之間的聯系，這樣當子類原型做修改時就不會影響到父類原型。

我的方法

《Javascript模式》中到圣杯模式就結束了，可是不管上面哪一種方法都有一個不容易被發現的問題。大家可以看到我在"Parent"的prototype屬性中加入了一個obj對象字面量屬性，但是一直都沒有用。我們在圣杯模式的基礎上來看看下面這種情況：

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) ;
} ;
var F = function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;

var parent = new Parent("myParent") ;
var child = new Child("myChild") ;

console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2

在上面這種情況中，當我修改child對象obj.a的時候，同時父類的原型中的obj.a也會被修改，這就發生了和共享原型同樣的問題。出現這個情況是因為當訪問child.obj.a的時候，我們會沿著原型鏈一直找到父類的prototype中，然后找到了obj屬性，然后對obj.a進行修改。再看看下面這種情況：

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) ;
} ;
var F = function(){} ;
F.prototype = Parent.prototype ;
Child.prototype = new F() ;

var parent = new Parent("myParent") ;
var child = new Child("myChild") ;

console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = 2 ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //2

這里有一個關鍵的問題，當對象訪問原型中的屬性時，原型中的屬性對于對象來說是只讀的，也就是說child對象可以讀取obj對象，但是無法修改原型中obj對象引用，所以當child修改obj的時候并不會對原型中的obj產生影響，它只是在自身對象添加了一個obj屬性，覆蓋了父類原型中的obj屬性。而當child對象修改obj.a時，它先讀取了原型中obj的引用，這時候child.obj和Parent.prototype.obj是指向同一個對象的，所以child對obj.a的修改會影響到Parent.prototype.obj.a的值，進而影響父類的對象。AngularJS中關于$scope嵌套的繼承方式就是模范Javasript中的原型繼承來實現的。
根據上面的描述，只要子類對象中訪問到的原型跟父類原型是同一個對象，那么就會出現上面這種情況，所以我們可以對父類原型進行拷貝然后再賦值給子類原型，這樣當子類修改原型中的屬性時就只是修改父類原型的一個拷貝，并不會影響到父類原型。具體實現如下：

var deepClone = function(source,target){
    source = source || {} ;
    target = target || {};
    var toStr = Object.prototype.toString ,
        arrStr = "[object array]" ;
    for(var i in source){
        if(source.hasOwnProperty(i)){
            var item = source[i] ;
            if(typeof item === "object"){
                target[i] = (toStr.apply(item).toLowerCase() === arrStr) ? [] : {} ;
                deepClone(item,target[i]) ;    
            }else{
                target[i] = item;
            }
        }
    }
    return target ;
} ;
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 = deepClone(Parent.prototype) ;

var child = new Child("child") ;
var parent = new Parent("parent") ;

console.log(child.obj.a) ; //1
console.log(parent.obj.a) ; //1
child.obj.a = "2" ;
console.log(child.obj.a) ; //2
console.log(parent.obj.a) ; //1

綜合上面所有的考慮，Javascript繼承的具體實現如下，這里只考慮了Child和Parent都是函數的情況下：

var deepClone = function(source,target){
    source = source || {} ;
    target = target || {};
    var toStr = Object.prototype.toString ,
        arrStr = "[object array]" ;
    for(var i in source){
        if(source.hasOwnProperty(i)){
            var item = source[i] ;
            if(typeof item === "object"){
                target[i] = (toStr.apply(item).toLowerCase() === arrStr) ? [] : {} ;
                deepClone(item,target[i]) ;    
            }else{
                target[i] = item;
            }
        }
    }
    return target ;
} ;

var extend = function(Parent,Child){
    Child = Child || function(){} ;
    if(Parent === undefined)
        return Child ;
    //借用父類構造函數
    Child = function(){
        Parent.apply(this,argument) ;
    } ;
    //通過深拷貝繼承父類原型    
    Child.prototype = deepClone(Parent.prototype) ;
    //重置constructor屬性
    Child.prototype.constructor = Child ;
} ;

總結

說了這么多，其實Javascript中實現繼承是十分靈活多樣的，并沒有一種最好的方法，需要根據不同的需求實現不同方式的繼承，最重要的是要理解Javascript中實現繼承的原理，也就是原型和原型鏈的問題，只要理解了這些，自己實現繼承就可以游刃有余。

最后，安利下我的個人博客，歡迎訪問: http://bin-playground.top

GPU云服務器云服務器原型繼承原型鏈繼承 js原型鏈的繼承 javascript原型

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85377.html

再談JavaScript面向對象思想及繼承

摘要：面向對象中有三大特征，封裝，繼承，多態。這不僅無法做到數據共享，也是極大的資源浪費，那么引入對象實例對象的屬性指向其構造函數，這樣看起來實例對象好像繼承了對象一樣。實例對象的原型指向其構造函數的對象構造器的指向。前言為什么說是再談呢，網上講解這個的博客的很多，我開始學習也是看過，敲過就沒了，自以為理解了就結束了，書到用時方恨少啊。實際開發中一用就打磕巴，于是在重新學習了之后分享出來...

svtter 2019-08-21 17:19 評論0 收藏0
JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環大法了~ 《小分享》JavaScript中數組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
理清javascript中的面向對象（一）——原型繼承

摘要：有一函數若是用來生成對象，則稱為構造函數名。屬性指定了使用該構造函數生成的對象實例繼承了哪個對象實例。因此，只要利用，就能在構造函數中，為未來利用此構造函數生成的對象實例，添加成員屬性和成員方法了。與其它編程語言不一樣的是，javascript的面向對象并非依賴于抽象的類，而是通過原型鏈，將一個個具體的對象實例進行連接，位于原型鏈下游的對象實例可以讀取/使用位于上游的對象實例的屬性/...

beita 2019-08-19 17:23 評論0 收藏0
你真的弄明白 new 了嗎

摘要：如果構造函數有返回值呢一般情況下構造函數沒有返回值，但是我們依舊可以得到該對象的實例如果構造函數有返回值，憑直覺來說情況應該會不一樣。歡迎光臨小弟博客我的博客原文你真的弄明白了嗎參考再談面向對象編程的實例化與繼承請停止使用關鍵字好久沒有寫點東西了，總覺得自己應該寫點牛逼的，卻又不知道如何下筆。既然如此，還是回歸最基本的吧，今天就來說一說這個new。關于javascript的new關鍵...

tolerious 2019-08-21 10:31 評論0 收藏0
淺談JavaScript面向對象

摘要：不必在構造函數中定義對象實例的信息。其次，按照一切事物皆對象的這餓極本的面向對象的法則來說，類本身并不是一個對象，然而原型方式的構造函數和原型本身也是個對象。第二個問題就是在創建子類型的實例時，不能向超類型的構造函數中傳遞參數。前言對象(Object)應該算是js中最為重要的部分，也是js中非常難懂晦澀的一部分。更是面試以及框架設計中各出沒。寫這篇文章，主要參考與JavaScrip...

cyixlq 2019-08-21 17:15 評論0 收藏0