JS學習筆記（第6章）（實現(xiàn)繼承的幾種方式）

hiyayiji 發(fā)布于2019-08-26 10:18 / 864人閱讀

摘要：使用最多的繼承模式是組合繼承，這種模式使用原型鏈繼承共享的屬性和方法，而借用構造函數(shù)繼承實例屬性。原型式繼承，可以在不必預先定義構造函數(shù)的情況下實現(xiàn)繼承，其本質(zhì)是執(zhí)行給定對象的淺復制。

1、原型鏈實現(xiàn)繼承

function SuperType() {
    this.property = true;
}
SuperType.prototype.getSuperValue = function() {
    return this.property;
};

function SubType() {
    this.subproperty = false;
}

//繼承了SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function() {
    return this.subproperty;
};

var instance = new SubType();
alert(instance.getSuperValue());   //true

2、借用構造函數(shù)

原型鏈的問題是對象實例共享所有繼承的屬性和方法，因此不適宜多帶帶使用。解決這個問題的技術是借用構造函數(shù)，即在子類型構造函數(shù)的內(nèi)部調(diào)用超類型構造函數(shù)。這樣就可以做到每個實例都具有自己的屬性，同時還能保證只使用構造函數(shù)模式來定義類型。

function SuperType() {
    this.colors = ["red", "blue", "green"];
}

function SubType(){
    //繼承了SuperType,
    SuperType.call(this);//在子類型構造函數(shù)的內(nèi)部調(diào)用超類型構造函數(shù)
}

var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors);   //"red,blue,green,black"

var instance2 = new SuperType();
alert(instance2.colors);   //"red,blue,green"

3、組合繼承

思想：在子類型構造函數(shù)的內(nèi)部調(diào)用超類型構造函數(shù)。使用最多的繼承模式是組合繼承，這種模式使用原型鏈繼承共享的屬性和方法，而借用構造函數(shù)繼承實例屬性。

function SuperType(name) {
    this.name = name;
    this.color = ["red","blue","green"];
}

SuperType.prototype.sayName = function() {
    alert(this.name);
};
function SubType(name ,age) {
    //繼承屬性
    SuperType.call(this,name);//在子類型構造函數(shù)的內(nèi)部調(diào)用超類型構造函數(shù)
    this.age = age;
}
//繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;  //指向構造函數(shù)
SubType.prototype.sayAge = function() {
    alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors);   //"red,blue,green,black"
instance1.sayName();  //"Nicholas"
instance1.sayAge();  //29

var instance2 = new SubType("Greg" ,27);
alert(instance2.colors);  //"red,blue,green"
instance2.sayName();  //"Greg"
instance2.sayAge();  //27

4、原型式繼承

（1）借助原型可以基于已有的對象創(chuàng)建新對象，同時還不必因此創(chuàng)建自定義類型
（2）在object()函數(shù)內(nèi)部，先創(chuàng)建了一個臨時性的構造函數(shù)，然后將傳入的對象作為這個構造函數(shù)的原型，最后返回這個臨時類型的一個新實例。
（3）原型式繼承，可以在不必預先定義構造函數(shù)的情況下實現(xiàn)繼承，其本質(zhì)是執(zhí)行給定對象的淺復制。而復制的副本還可以得到進一步的改造。

var person = {
    name : "Nicholas",
    friends : ["Shelby", "Court", "Van"]
};

var anotherPerson = object(perosn);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

var yetAbotherPerson = object(perosn);
yetAbotherPerson.name = "Linda";
yetAbotherPerson.firends.push("Barbie");

alert(person.friends);  //"Shelby, Court, Van, Greg, Linda"

5、寄生式繼承

與原型式繼承非常相似，也是基于某個對象或某些信息創(chuàng)建一個對象，然后增強對象，最后返回對象。為了解決組合繼承模式由于多次調(diào)用超類型函數(shù)而導致的低效率問題，可以將這個模式與組合繼承一起使用。

function creatAnother(original) {
    var clone = object(original);   //通過調(diào)用函數(shù)創(chuàng)建一個新對象
    clone.sayHi = function() {      //以某種方式來增強這個對象
        alert("hi");
    };
    return clone;  //返回這個對象
}
var person = {
   name : "Nicholas",
   friends : ["Shelby", "Court", "Van"]
};

var anotherPerson = creatAnother(person);
anotherPerson.sayHi();  //"hi"

6、寄生組合式繼承

（1）集寄生式繼承與組合繼承的優(yōu)點于一身，是實現(xiàn)基于類型繼承的最有效的方式?？梢越鉀Q組合繼承調(diào)用兩次構造函數(shù)導致子類最終會包含超類對象的全部實例屬性的問題。
（2）寄生式組合繼承，就是通過借用構造函數(shù)來繼承屬性，通過原型鏈的混成形式來繼承方法。其思想是：不必為了指定子類型的原型而調(diào)用超類型的構造函數(shù)，我們所需的無非就是超類型原型的一個副本而已。本質(zhì)上就是，使用寄生式繼承來繼承超類型的原型，然再將結果指定給子類型的原型。其基本模式如下：

function inheritPrototype(SubType,superType) {
    var prototype = object(superType.prototype);   //創(chuàng)建對象
    prototype.constructor = subType;               //增強對象
    subType.prototype = prototype;                 //指定對象
}

這個函數(shù)接收兩個參數(shù)：子類型構造函數(shù)和超類型構造函數(shù)。
第一步是創(chuàng)建超類型原型的一個副本;
第二步是為創(chuàng)建的副本添加constructor屬性，從而彌補因重寫原型而失去的默認的constructor屬性;
第三步將新創(chuàng)建的對象（即副本）賦值給子類型的原型。

function inheritPrototype(SubType,superType) {
    var prototype = object(superType.prototype);   //創(chuàng)建對象
    prototype.constructor = subType;               //增強對象
    subType.prototype = prototype;                 //指定對象
}

function SuperType(name) {
    this.name = name;
    this.color = ["red","blue","green"];
}

SuperType.prototype.sayName = function() {
    alert(this.name);
};
function SubType(name ,age) {
    //繼承屬性
    SuperType.call(this.name);      
    this.age = age;
}

inheritPrototype(SubType, SuperType);

SubType.prototype.sayAge = function() {
    alert(this.age);
};

GPU云服務器云服務器 js繼承的幾種方式服務器請求的幾種方式 java創(chuàng)建對象的幾種方式 js的幾種數(shù)據(jù)類型

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

轉載請注明本文地址：http://systransis.cn/yun/105949.html

基本方法筆記 - 收藏集 - 掘金

摘要：探討判斷橫豎屏的最佳實現(xiàn)前端掘金在移動端，判斷橫豎屏的場景并不少見，比如根據(jù)橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。探討判斷橫豎屏的最佳實現(xiàn) - 前端 - 掘金在移動端，判斷橫豎屏的場景并不少見，比如根據(jù)橫豎屏以不同的樣式來適配，抑或是提醒用戶切換為豎屏以保持良好的用戶體驗。判斷橫豎屏的實現(xiàn)方法多種多樣，本文就此來探討下目前有哪些實現(xiàn)方法以及其中的優(yōu)...

maochunguang 2019-08-20 17:44 評論0 收藏0
JS學習筆記（第24章）（最佳實踐）

摘要：大多數(shù)情況下，可以是同局部變量完成相同的事情而不引入新的作用域。選擇正確的方法避免不必要的屬性查找一旦多次用到屬性對象，應該將其存儲在局部變量中。盡可能多的使用局部變量將屬性查找替換為值查找。 1、可維護性 1.1 可維護代碼特征 1. 可理解性 2. 直觀性 3. 可適應性 4. 可擴展性 5. 可調(diào)試性 1.2 代碼約定 1、可讀性（代碼縮進和代碼注釋） 2、變量和函數(shù)命名變量...

cnTomato 2019-08-26 13:39 評論0 收藏0
JS學習筆記（第6章）（面向?qū)ο笾?em>繼承——JS繼承的六大方式）

摘要：除此之外，在超類型的原型中定義的方法，對子類型而言也是不可兼得，結果所有類型都只能用構造函數(shù)模式。創(chuàng)建對象增強對象指定對象繼承屬性這個例子的高效率體現(xiàn)在它只調(diào)用了一次構造函數(shù)。 1、原型鏈原型鏈的基本思想是利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。構造函數(shù)、原型和實例的關系：每個構造函數(shù)都有一個原型對象；原型對象都包含著一個指向構造函數(shù)的指針；實例都包含一個指向原型對象的...

lscho 2019-08-26 13:33 評論0 收藏0
讀《javaScript高級程序設計－第6章》之封裝類

摘要：創(chuàng)建構造函數(shù)后，其原型對象默認只會取得屬性至于其他的方法都是從繼承來的。上圖展示了構造函數(shù)的原型對象和現(xiàn)有的兩個實例之間的關系。所有原生的引用類型都在其構造函數(shù)的原型上定義了方法。第6章我一共寫了3篇總結，下面是相關鏈接：讀《javaScript高級程序設計－第6章》之理解對象讀《javaScript高級程序設計－第6章》之繼承工廠模式所謂的工廠模式就是，把創(chuàng)建具體對象的過程抽象...

seal_de 2019-08-21 17:15 評論0 收藏0
寫技術博客那點事

摘要：從現(xiàn)在開始，養(yǎng)成寫技術博客的習慣，或許可以在你的職業(yè)生涯發(fā)揮著不可忽略的作用。如果想了解更多優(yōu)秀的前端資料，建議收藏下前端英文網(wǎng)站匯總這個網(wǎng)站，收錄了國外一些優(yōu)質(zhì)的博客及其視頻資料。前言寫文章是一個短期收益少，長期收益很大的一件事情，人們總是高估短期收益，低估長期收益。往往是很多人堅持不下來，特別是寫文章的初期，剛寫完文章沒有人閱讀會有一種挫敗感，影響了后期創(chuàng)作。從某種意義上說，...

ddongjian0000 2019-08-23 15:12 評論0 收藏0