首頁 > 文章 > web前端 > 對JS的繼承的理解

對JS的繼承的理解

jacklove原創: 2018-06-15 15:43:072663瀏覽

js的原型繼承

原型鍊是實作js繼承的主要方法，他的原理是讓利用原型讓一個引用型別繼承另一個引用型別的屬性和方法。如果我們讓一個原型物件等於一個實例，那麼，此時的原型物件將包含指向另一個原型的指標假如另一個原型又等於一個物件的實例，如此一層套一層，這就是原型鏈的基本概念。

下邊是一個簡單的例子

    var Parent = function(){
        this.name = &#39;parent&#39; ;
    } ;
    Parent.prototype.getName = function(){
        return this.name ;
    } ;
    Parent.prototype.obj = {a : 1} ;    var Child = function(){
        this.name = &#39;child&#39; ;
    } ;
    Child.prototype = new Parent() ;    var parent = new Parent() ;    var child = new Child() ;
    console.log(parent.getName()) ; //parent
    console.log(child.getName()) ; //child

以上程式碼定義了兩個型別:parent和chiled。每個類型都有一個屬性和方法，他們主要的區別就是child繼承了parent，繼承是透過創建parent的實例，並把這個實例賦給child.prototype實現的
實現的本質是重寫了原型鏈對象，取代他的是新的實例。直接把父類別的物件賦值給子類別建構子的原型，這樣子類別的物件就可以存取到父類別以及父類別建構子的prototype中的屬性。
我們可以用instanceof運算子判斷，用這個運算子測試實例和原型鏈中出現過的建構函數，就回傳true

借用建構子

什麼是建構函數

JavaScript的建構子並不是作為類別的一個特定方法存在的；當任何一個普通函數用來建立一類物件時，它就被稱為建構函數，或建構子。一個函數要作為一個真正意義上的建構函數，需要滿足下列條件：

#1、在函數內部對新物件（this）的屬性進行設置，通常是增加屬性和方法。

2、建構子可以包含傳回語句（不建議），但傳回值必須是this，或者它非物件類型的值。
關於JavaScript的建構函數，有一個容易混淆的地方，那就是原型的constructor屬性。在JavaScript中，每個函數都有預設的原型物件屬性prototype，該物件預設包含了兩個成員屬性：constructor和proto。關於原型的細節就不在本文贅述了，我們現在關心的是這個constructor屬性。

依照物件導向的習慣性思維，我們說建構函數相當於「類別」的定義，從而可能會認為constructor屬性就是該類別實際意義上的建構函數，在new表達式創建一個物件的時候，會直接呼叫constructor來初始化對象，那就大錯特錯了。 new表達式執行的實際過程已經在上文中介紹過了（四個步驟），其中用於初始化物件的是第三步，呼叫的初始化函數正是「類別函數」本身，而不是constructor

    function CO(){
    this.p = “I’m in constructed object”;    this.alertP = function(){
        alert(this.p);
        }
    }    var o2 = new CO();

借用建構函式繼承

這個基本想法很簡單，也就是在子型別建構函式的內部呼叫超型別建構函式。因為函數只不過是在特定環境中執行程式碼的對象，因此可以透過使用apply()和call（）方法也可以在新建立的對像上執行的建構子。

   function superType(){
       this.colors = ["red","blue","green"];
   }   function subtype(){
       superType.call(this);
   }   var instance1 = new subtype();
   instance1.colors.push("black");
   alert(instance1.colors);//"red,blue,green,black"
   var instance2 = new subtype();
   alert(instance2.colors);//"red,blue,green"

透過使用call()，我們實際上是在新建立的subtype實例環境下呼叫了supertype（）建構函數，這樣一來，就會在新subtype物件上執行supertype建構函數，因此就會在subtype物件上執行supertype()函式中定義的所有物件初始化程式碼

   function superType(name){
       this.name = name;
   }   function subtype(){
       superType.call(this,"Marry");       this.age = 29;
   }   var instance = new subtype();
   alert(instance.name);//"Marry"
   alert(instance2.age);//"29"

這是建構函式的一個很大的優勢，可以在子型別建構函式中傳送參數參數。

本文講解了JS的繼承的理解，更多相關內容請關注php中文網。

對JS的繼承的理解

js的原型繼承

借用建構子

什麼是建構函數

借用建構函式繼承

相關文章