JavaScript:繼承方式

来源:http://www.cnblogs.com/xiaoxiaoyihan/archive/2016/06/27/5620159.html
-Advertisement-
Play Games

使用構造函數 基本思想: 在子類型構造函數的內部調用超類型構造函數。 使用apply()和call()方法可以在新創建的對象上執行構造函數。 function SuperType() { this.colors = ["red", "blue", "green"]; } function SubTy ...


使用構造函數

基本思想:在子類型構造函數的內部調用超類型構造函數。

使用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()或apply()方法,實際是在將來要創建的SubType實例的環境下調用SupType構造函數。這樣,SubType的實例都會具有自己的colors屬性副本

傳遞參數

使用構造函數的一個好處是可以在子類構造函數中向超類構造函數傳遞參數。

function SuperType(name) {
    this.name = name;
}

function SubType() {
    SuperType.call(this, "蕭蕭弈寒");

    this.age = 18;
}

var instance = new SubType();
alert(instance.name);
alert(instance.age);

上例中,在SubType構造函數內部調用了SuperType構造函數時,實際上是為SubType的實例設置了name屬性。為了確保SuperType構造函數不會重寫子類的屬性,可以在調用超類型構造函數之後,再添加屬性。

使用構造函數的問題

使用構造函數,方法都在構造函數中定義,函數就不能復用了。而且,在超類的原型中定義的方法,對子類型是不可見的。這導致了所有類型都只能使用構造函數模式。

組合繼承

組合繼承:指的是將原型鏈和使用構造函數組合使用,取二者之長的一種繼承模式。思想:使用原型鏈實現對原型屬性和方法的繼承,通過使用構造函數來實現對實際屬性的繼承。

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

SuperType.prototype.sayName = function () {
    alert(this.name);
};

function SubType(name, age) {
    // 繼承超類屬性
    SuperType.call(this, name);

    // 自定義屬性
    this.age = age;
}

// 繼承方法
SubType.prototype = new SuperType();
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function () {
    alert(this.age);
};

var instance1 = new SubType("蕭蕭弈寒", 18);
instance1.colors.push("black");
alert(instance1.colors);
instance1.sayName();
instance1.sayAge();

var instance2 = new SubType("xxyh", 19);
alert(instance2.colors);
instance2.sayName();
instance2.sayAge();

上例中,SuperType構造函數定義了兩個屬性:name和colors。SuperType原型定義了sayName()方法。SubType構造函數在調用SuperType構造函數時傳入了name參數,然後定義了自己的屬性age。然後將SuperType的實例賦值給SubType的原型,然後又在給新原型上定義了方法sayAge()。這樣,就可以使兩個不同的SubType實例既有自己的屬性,又使用相同的方法。

原型式繼承

基本思想:藉助原型鏈可以基於已有的對象創建新對象,同時不必因此創建自定義類型。

示例:

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

在object()函數內部,先創建了一個臨時性的構造函數。然後將傳入的對象作為這個構造函數的原型,最後返回這個臨時類型的新實例。

object對傳入的對象執行了一次淺拷貝:

var person = {
            name: "蕭蕭弈寒",
            friends: ["張三", "李四", "王五"]
        };

var anotherPerson1 = object(person);
anotherPerson1.name = "葫蘆娃";
anotherPerson1.friends.push("趙六");

var anotherPerson2 = object(person);
anotherPerson2.name = "魁拔";
anotherPerson2.friends.push("錢七");

alert(person.friends); // "張三", "李四", "王五","趙六","錢七"

這種方式要求一個對象可以作為另一個對象的基礎。如果有這種對象,把它傳遞給object,然後對得到的對象加以修改。

在上面的例子中,person作為另一個對象的基礎,將person傳入object()函數中,然後改函數就會返回一個新對象,這個對象將person作為原型,所以它的原型中就包含一個基本類型值屬性和一個引用類型值屬性。這樣,person.friends不僅屬於person,而是會被anotherPerson1、anotherPerson2共用。

ECMAScript5通過新增Object.create()規範了原型式繼承。這個方法接收兩個參數:一個用作新對象原型的對象和一個為新對象定義額外屬性的對象。

var person = {
    name: "蕭蕭弈寒",
    friends: ["張三", "李四", "王五"]
};

var anotherPerson1 = Object.create(person);
anotherPerson1.name = "魁拔";
anotherPerson1.friends.push("趙六");

var anotherPerson2 = Object.create(person);
anotherPerson2.name = "猴子";
anotherPerson2.friends.push("錢七");

alert(person.friends);    // "張三", "李四", "王五","趙六","錢七"

以這種方式指定的任何屬性都會覆蓋原型對象上的同名屬性。

var person = {
    name: "蕭蕭弈寒",
    friends: ["張三", "李四", "王五"]
};

var anotherPerson = Object.create(person, {
    name: {
        value: "魁拔"
    }
});

alert(anotherPerson.name);  // 魁拔

寄生式繼承

思路:創建一個僅用於封裝繼承過程的函數,該函數在內部以某種方式來增強對象,最後再像真的是它做了所有工作一樣返回對象。

function createAnother(original) {
    var clone = object(original);
    clone.sayHi = function () {
        alert("hi");
    };
    return clone;
}

上面,createAnother()接收了一個參數,這個參數就是作為新對象基礎的對象。然後把這個對象傳遞給object()函數,將返回的結果賦值給clone。再為clone對象添加一個新方法sayHi(),最後返回clone對象。

var person = {
    name: "蕭蕭弈寒",
    friends :["張三", "李四", "王五"]
};

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

新對象不僅具有person的所有屬性和方法,而且還有自己的sayHi()方法。

寄生組合式繼承

寄生組合式繼承:通過構造函數來繼承屬性,通過原型鏈的混成形式來繼承方法。不必指定子類型的原型而調用超類型的構造函數,只需要超類型原型的一個副本。

寄生組合式繼承基本模式:

function inheritPrototype(subType, superType) {
    var prototype = object(superType.prototype);
    prototype.constructor = subType;        // 增強對象
    subType.prototype = prototype;          // 指定對象
}

上面的例子中,這個函數接收兩個參數:子類型的構造函數超類型的構造函數。第一步是創建超類型原型的一個副本。第二步是為創建的副本添加constructor屬性,從而彌補因重寫原型而失去的預設的constructor屬性。最後將新對象賦值給子類型的原型。

示例:

function SuperType(name) {
    this.name = name;
    this.colors = ["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);
};

圖解:

這個例子中,只調用了一次SuperType構造函數。避免了在SubType原型上創建不必要的屬性。而且,能夠保持原型不變。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </head> ...
  • <!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="jquery.js"></script> </head> ...
  • 使用sui mobile做的選擇控制項,其中sm.js有修改,增加自定義api,詳情請看index.html的註釋,不多說了,上代碼 引用文件及demo:http://pan.baidu.com/s/1i5tuuzz ...
  • 1、JS中的記憶體空間分為兩種:棧記憶體、堆記憶體 棧記憶體:提供JS代碼執行的環境;存儲基本數據類型的值; ->全局作用域或者私有的作用域其實都是棧記憶體 堆記憶體:存儲引用數據類型的值(對象是把屬性名和屬性值存儲進去,函數是把函數體中的代碼當做字元串存儲進去) 2、當瀏覽器載入我們HTML頁面的時候,首先會 ...
  • <img class="desc_img" src="http://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=html&step_word=&pn=0&spn=0&di=87025285600&pi=&rn=1&tn=baid... ...
  • 博客近兩個月沒有更新了,沒有時間只是藉口,主要還是沒有養成寫博客的習慣,需自省!把做的東西寫出來,把不會的人教會,這是個知識內化的過程,也是提升自己的過程,so...博客還需繼續,前端的路很遠,還需繼續努力~ 1 線上編輯試題頁面設計 最近在做一個線上編輯試題系統,該系統是基於UEditor做的二次 ...
  • 前幾篇文章,我們介紹瞭如何使用HTML5 + WebGL,從零開始一步一步打造一個基於web的3D機房展示程式,並陸續增加了資產管理和動環等效果。這篇文章是前三篇文章的延伸,進一步把3D機房從房間做了擴展,實現從“地球(地圖)”— “園區”— “樓宇”— “機房”的炫酷效果,以及一些其他3D應用的開... ...
  • 原則:動靜分離,分級緩存,主動失效。 Web 開發中,介面會被分為以下幾類: 純靜態頁面。打死我都不會修改的頁面。很長一段時間內,基本上不會修改。比如:關於我們。 純動態頁面。實時性,個性化要求比較高。頁面變化很大,或者每個用戶看到的都不一樣,比如:朋友圈。 短時靜態頁面。在一定時間內基本不會變化, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...