首頁  >  文章  >  web前端  >  javascript如何實作繼承?總結js實作繼承的幾種方法

javascript如何實作繼承?總結js實作繼承的幾種方法

零下一度
零下一度原創
2017-05-08 10:28:201722瀏覽

顧先前學到的知識,大體上可以分為兩類:

  1. 基於建構器工作的模式。

  2. 基於物件的工作模式。

  3. 是否使用原型

  4. 是否執行屬性拷貝。

  5. 兩者都有(執行原型屬性拷貝)

下面我們把之前的知識都來回顧一下:

1.原型鏈法(仿傳統):

child.prototype = new Parent();

所屬模式:基於建構函數的模式,使用原型鏈模式。

技術註解:預設繼承機制,我們可以將方法與屬性集中可重複使用的部分遷移到原型鏈中,而將不可重用的那部分屬性與方法設定成自身的屬性。

2.僅從原型繼承法:

Child.prototype = Parent.prototype

所屬模式:基於建構函數的工作模式,原型拷貝模式(不存在原型鏈,所有物件共享一個原型)。

技術註解:由於此模式在建置繼承關係上不需要新建物件實例,所以在效率上會有較好的表現。

     原型鏈上的查詢#也比較快,因為這裡根本不存在鏈。

       缺點在於,子物件的修改會影響父對象,因為子物件只是父對象的一個引用

3.臨時建構器法:

function extend(Child, parent){    var F = fucntion(){};
    F.prototype = Parent.prtotype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;  
}

所屬模式:基於建構子的工作模式,使用原型鏈模式。

技術註解:此模式不同於1號模式,她只繼承父物件的原型屬性,而對父物件的自身屬性(也就是被加入父級建構子中this的屬性)則不予繼承。

       另外,此模式也提供了存取父物件的方式。 (即透過usber屬性)。

4.原型屬拷貝法:

function extend2(Child, Parent){    var p = Parent.prototype;    var c = Child.prototype;    for(var i  in p){
        c[i] = p[i];
    }
    c.uber = p;
}

所屬模式:基於建構器工作模式,屬性拷貝模式,使用原型模式

技術註解:將父物件原型中的內容全部轉換為子物件的原型屬性。

       無需為繼承單獨建立物件實例。

       原型鏈本身也更短。

5.全屬性拷貝法:

function extendCopy(p){    var c = {};    for(var i in p){
        c[i] = p[i];
    }
    c.uber  = p;    return c;
}

所屬模式:基於物件的工作模式,屬性拷貝模式。

技術註解:非常簡單,沒有使用原型屬性。

6.深拷貝法:

function deepCopy(Parent, Child){
    Child = Child || {};    for(var i in Parent){        if(Parent.hasOwnProprty(i)){             if(typeof Parent[i] === 'Object'){
                 Child[i] = Array.isArray(p[i]) ? [] : {};
                 deepcopy(Parent[i], Child[i]);  
             }else{
                 Child[i] = Parent[i]
             }
        }
    }    return Child;
}

所屬模式:基於物件的工作模式,屬性拷貝模式。

技術註解:與5相同,但所有物件都是值傳遞。

7.原型繼承法:

function object(o){    function F(){};
    F.prototype = o;    return new F();
}

所屬模式:基於物件工作模式,基於原型鏈模式。

技術註解:丟開仿類別機制,直接在物件之間建構繼承關係。

              發揮原型固有優點。

8.擴展與增強模式:

function objectPlus(o, stuff){    var n;    function(){};
    F.prototype = o;
    n = new F();
    n.uber = o;    for(var i in stuff){
        n[i] = stuff[i]
    }    return n;
}

所屬模式:基於物件工作模式,使用原型鏈模式,屬性拷貝模式。

技術註解:該方法實際上是原型繼承與原型拷貝的混合應用,她透過一個函數一次性的完成物件的繼承與擴展。

9.多重繼承法:

function multi(){    var n = {}, stuff, j = 0;
    len = arguments.length;    for(j=0;j<len;j++){
        stuff = argument[j];        for(var i in stuff){
            n[i] = stuff[i];
        }
    }    return n;
}

所屬模式:基於物件工作模式,屬性拷貝模式。

技術註解:一種混合插入式繼承實作。

         她會依照父對象的繼承順序依序為她們進行屬性全拷貝。

10.寄生繼承法:

function parasite(victim){    var that = object(victim);
    that.more = 1;    return that;
}

所屬模式:基於物件工作模式,使用原型鏈模式。

技術註解:此方法透過一個類似建構器的函數來建立物件。

     此函數會執行對應的物件拷貝,並對其進行擴展,然後傳回該拷貝。

11.建構器借用法:

function Child{
    Parent.apply(this, arguments);
}

所屬模式:基於建構器的工作模式。

技術註解:此方法只能繼承父物件的自身屬性(也就是建構子裡的this.屬性、方法)。

       可以與方法結合。

       她便于我们的子对象继承某个对象的具体属性时,该方式是最简单的方式。

12.构造器借用与属性拷贝法:

function Child(){
    Parent.apply(this, argument);
}
extend2(Child, Parent);

所属模式:基于构造器的工作模式,使用原型链模式,属性拷贝模式。

技术注解:她允许我们在不重复使用调用对象构造器的情况下同时继承自身属性和原型属性。

额,持续更新了这么多天,大概也就这么多了,能力有限,多多包涵!

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱(3)-JavaScript视频教程

以上是javascript如何實作繼承?總結js實作繼承的幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn