js中的繼承知識詳解

本文我們主要和大家分享js中的繼承知識詳解，主要以文字和程式碼的形式和大家分享，希望能幫助大家。

1. 了解構造，實例，原型之間的關係，構造和實例的prototype指向原型，原型的constructor指向構造

2. ##子類需要重複利用父類別的方法和屬性

3. 將子類別建構的prototype指向父類別的一個實例，子類別便可以透過這個實例來存取父類別的屬性和方法

4. 將此關係層層遞進就形成了原型鏈

• 實作

#

function Super(name) {
    this.name = "name";
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}
Super.prototype.getSuperproperty = function () {
    return this.superproperty;
}

function Sub(name) {
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();
Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

var instance = new Sub("ctc");
console.log(instance.getSuperproperty());//true
console.log(instance.getSubproperty());//false
console.log(instance.getSuperName());//ctc
console.log(instance.getSubName());//ctc

最後兩個輸出都是ctc的過程，當instance遇到「.」運算元時會執行   1）搜尋實例，2）搜尋sub.prototype ，3）搜尋super.prototype。

• 注意的問題

預設原型object

每一個實例都是有預設的原型Object所以剛剛的super.prototype. prototype指向的是Object的prototype

定義的時候需要謹慎

//继承
Sub.prototype = new Super();

繼承時重寫？此時sub.prototype的constructor指向了誰？

此句一定要放在，

新增方法和覆寫方法程式碼之前

Sub.prototype.getSubName = function () {
    return this.name;
}
Sub.prototype.getSubproperty = function () {
    return this.subproperty;
}

• 缺點

父類別的實例屬性變成了子類別的原型屬性被共用;

建立子類別實例的時候，無法在不影響所有實例的情況下，給父類別傳遞參數。

借用建構子

function Super(name) {
    this.name = name;
  
}
Super.prototype.getSuperName = function () {
    return this.name;
}


function Sub(name) {

  Super.call(this,name);

this.name = name;

}//繼承Sub.prototype = new Super();Sub.prototype.getSubName = function () {    return this.name;}

#主要是藉用了Super建構的程式碼，來實作sub自己的屬性的定義，

但是這樣寫就可以讓每個實例都有自己的屬性和方法，同時也失去了方法函數的複用性組合繼承

用來解決方法重複使用的問題在父類別的建構子中使用動態原型建構或組合建構的方式，讓建構子中只有屬性的賦值定義，方法的定義在原型上

然後在子類別中，將子類別的prototype指向一個父類別的實例，子類別的建構子中藉用父類的構造，這樣子類別每一個實例都有自己的屬性，而方法卻是共享的。

function Super(name) {
    this.name = name;
    this.superproperty = true;
}
Super.prototype.getSuperName = function () {
    return this.name;
}

function Sub(name) {
    Super.call(this,arguments);
    this.name = name;
    this.subproperty = false;
}
//继承
Sub.prototype = new Super();

// Sub.prototype.constructor = Sub;//如果此处未绑定，上一句重写了原型，Super的实例的constructor指向的自然是Super

Sub.prototype.getSubName = function () {    return this.name;}var instance = new Sub("ctc");

###原型式繼承######另一種繼承的實現，只是藉助原型可以基於已有對象創建新對象###

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

###理解：F是一個函數也是一個對象，其原型指向了object（）接受的o，返回的F是一個原型指向o的物件。 ######令：Object.creat()規範化了上述的函數，即Object.creat(o)同樣實作了上述程式碼######寄生式繼承######在原型式繼承的基礎之上，強化增強了這個物件###

function creatAnother(o) {
    var clone = Object.create(o);
    clone.name = "ctc";
    clone.sayname = function () {
        console.log(this.name);
    }
    return clone;
}

###為物件增加了屬性方法等##########寄生組合式繼承######目的是為了解決組合繼承的問題，在組合繼承中有起碼兩次呼叫Super()，1.  Super.call(this,arguments)  2. Sub.prototype = new Super()######其實我們只是想子類別的原型繼承父類別的方法（一般都在父類別原型上，因為不會每個實例都有自己的方法空間）######所以我們可以用原型式繼承來只將子類別的原型繼承父類別的原型###

function inherit(SubType,SuperType) {
    var prototype = Object.create(SuperType);
    prototype.constructor = SubType;
    SubType.prototype = prototype;
}

###將組合繼承的###

Sub.prototype = new Super();

###換成###

inherit(Sub,Super);

###相關推薦：########JS中的繼承方式實例詳解##### ########JS中的繼承方式有哪些？ ############詳細解讀js中的繼承機制######

以上是js中的繼承知識詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！