JS繼承模式粗探

来源:http://www.cnblogs.com/betaSu/archive/2016/01/12/5123903.html
-Advertisement-
Play Games

之前提到了JS中比較簡單的設計模式,在各種設計模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質之一——繼承,今天主要談談JS中比較簡單的繼承方法。 最基礎的原型鏈繼承在這裡就不覆述了,主要講一下其他的繼承模式。1.借用構造函數繼承function Father (name) {...


      之前提到了JS中比較簡單的設計模式,在各種設計模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質之一——繼承,今天主要談談JS中比較簡單的繼承方法。

      最基礎的原型鏈繼承在這裡就不覆述了,主要講一下其他的繼承模式。

1.借用構造函數繼承

function Father (name) {
    this.name=name;
}
function Son (name) {
    Father.call(this,name);  //在子類型中調用超類型的構造函數
    this.age=15;
}
var me=new Son("Su");

好處:可以為子類型傳遞參數,如圖中的name屬性。

壞處:1.方法在構造函數中定義,無法復用。2.超類型原型中定義的方法對子類型是不可見的。

2.組合繼承(綜合原型鏈與構造函數)

//超類型構造函數
function
Father (name) { this.name=name; this.famMember=[]; }
//超類型構造函數原型方法 Father.prototype.sayName
=function () { alert(this.name); }
//子類型構造函數
function Son (name,age) { Father.call(this,name); //構造函數方法 this.age=age; } Son.prototype=new Father(); //重寫子類型原型對象 Son.prototype.constructor=Son; //重寫構造函數屬性指向子類型 Son.prototype.sayAge=function () { alert(this.age); } //重寫原型對象後再加入方法 var me=new Son("Su",15); me.famMember.push("dad","mom"); //子類型可以調用超類型構造函數內的方法
var he=new Son("Li",14);
alert(he.famMember); // []

好處:不同的子類既可以擁有自己的屬性,也可以使用相同的方法。

壞處:這種方法需要調用2次超類型的構造函數,同名的屬性方法會被覆蓋一次。

3.原型式繼承 (類似Object.create())

function object (o) {
    function F () {}
    F.prototype=o;
    return new F();
}
var obj={}; //將obj對象傳入作為新對象的原型。
var me=object(obj);

使用這種方法繼承需要有一個對象作為原型對象,所以所有繼承其的子類型的屬性方法都是共用的。

ES5通過新增Object.creatr()方法規範了原型式繼承。

4.寄生式繼承 (可以設置私有方法的原型式繼承)

function object (o) {
    function F () {}
    F.prototype=o;
    return new F();
}
var obj={};            //將obj對象傳入作為新對象的原型。到這裡都與原型式繼承相同
function creObj(o) {
  var clone=object(obj);
  clone.sayHi=function () {
    alert("Hi");
  };
return clone;
} var me=creObj(obj);

好處:這種方式彌補了原型式繼承只有公有屬性方法的缺陷,使子類型能有私有屬性方法。

5.寄生組合式繼承

function inherit (father,son) {
    var pro=Object(father.prototype);   //創建超類型原型對象的副本
    pro.constructor=son;
    son.prototype=pro;           //將副本作為子類型的原型對象
}

本方法用於彌補組合繼承中屬性方法覆蓋的問題。

用上圖代碼代替組合繼承中 Son.prototype=new Father(); 這段代碼。這樣只需調用一次父類型的構造函數,避免了創造多餘不必要的屬性方法,並且保持了原型鏈不改變,是一種理想的引用類型繼承方法。

 


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

-Advertisement-
Play Games
更多相關文章
  • 1.div+css中的定位position 最主要的兩個屬性:屬性 absolute(絕對定位) relative(相對定位),有他們才造就了div+css佈局的多樣性,讓我們的網頁豐富多彩起來。首先解釋relative(相對定位),顧名思義,定位是相對的,那他是相對於什麼呢?參照物是什麼?看如下代...
  • 今天剛打個一個技術群,裡面有人問標題上的問題,嘿,我恰好遇過,現在大家至少也在用jquery1.9以上的版本,ajaxfileupload的版本早就不更新了,大家可以下載看:地址這裡,它例子里使用的Jquery是1.2的,好老呀。。。這個問題,我以前開發過程中遇過,網上說經測試(我是沒測試),是版本...
  • 幾個自學HTML的例子,僅供娛樂,並沒有其它什麼用
  • json:{ "justIn": [{ "textId": "123", "text": "Hello,geovindu", "textType": "Greeting" },{ "textId": "514", "text":"What's up?", "textType": "Question"...
  • 基於jQuery按鈕控制單排圖片切換代碼。這是一款帶有左右箭頭按鈕控制的圖片動感滾動切換特效。效果圖如下:線上預覽源碼下載實現的代碼。html代碼: ...
  • 本文主要基於向HTML頁面引入JavaScript的幾種方式,分析HTML中JavaScript腳本的執行順序問題
  • 在日常開發的過程中,難免會用到form表單,我們需要獲取表單的數據保存到資料庫,或者拿到後臺的一串json數據,要將數據綁定到form表單上,這裡我寫了一個基於jquery的,formHelp插件,使用起來也很簡單:獲取表單的數據:$("#formid").serializeJson();綁定數據到...
  • 微信掃碼顯示特效:下麵是實際效果:(可以自己移動滑鼠,嘗試效果)(由於篇幅長度,沒有加相容性首碼,演示環境為谷歌瀏覽器。)現在就一個一個效果單獨演示:演示demo的HTML內容為:魔芋CSS:div { width:200px; height:200px; background: red; marg...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...