Javascript繼承機制的實現

来源:http://www.cnblogs.com/codeMedita/archive/2017/05/30/6920851.html
-Advertisement-
Play Games

學完了Javascript類和對象的創建之後,現在總結一下Javascript繼承機制的實現。Javascript並不像Java那樣對繼承機制有嚴格明確的定義,它的實現方式正如它的變數的使用方式那樣也是十分寬鬆的,你可以設計自己的方法“模仿”繼承機制的實現。有以下幾種方法: 1、對象冒充 1 <sc ...


學完了Javascript類和對象的創建之後,現在總結一下Javascript繼承機制的實現。Javascript並不像Java那樣對繼承機制有嚴格明確的定義,它的實現方式正如它的變數的使用方式那樣也是十分寬鬆的,你可以設計自己的方法“模仿”繼承機制的實現。有以下幾種方法:

1、對象冒充

 1 <script type="text/javascript">
 2     function classA(str){
 3         this.str=str;
 4         this.printstr=function(){
 5             document.write(this.str);
 6             document.write("<br>");
 7         }
 8         this.getstr=function(){
 9             return this.str;
10         }        
11     }
12     function classB(name,str){
13         //下麵這兩句代碼相當於將classA代碼體中的內容搬到這裡
14         this.newMethod1=classA;
15         this.newMethod1(str);
16         //註意,這裡的寫法
17         delete this.newMethod1;
18         //新的方法和屬性的定義須在刪除了newMethod之後定義,因為可能覆蓋超類的屬性和方法。
19         this.name=name;
20         this.sayName=function(){
21             document.write(this.name);
22             document.write("<br>");
23         }
24         
25     }
26     var a=new classB("Amy","helloworld");
27     a.printstr();
28     alert(a.getstr());
29     a.sayName();
30 </script>
View Code

function定義的代碼塊就相當於一個類,你可以用而且它有this關鍵字,你可以用this為它添加屬性和方法,上述代碼中有以下兩句:

this.newMethod1=classA;
this.newMethod1(str);

classB中定義了newMethod1變數,它是一個引用,指向了classA,並且還調用了classA,這兩句代碼的作用等同於直接將classA代碼塊中的內容直接複製到這裡,這樣創建的classB對像當然具有classA的屬性和方法了。對象冒充還可以實現多繼承,如下:

function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;

this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}

不過,classY會覆蓋classX中同名的屬性和方法,如果設計沒問題的話,classz也不應該繼承具有相同屬性和方法的不同類。

2、利用call()方法

 1 <script type="text/javascript">
 2     function classA(str){
 3         this.str=str;
 4         this.printstr=function(){
 5             document.write(this.str);
 6             document.write("<br>");
 7         }
 8         this.getstr=function(){
 9             return this.str;
10         }        
11     }
12     function classB(name,str){
13     //利用call方法實現繼承
14         classA.call(this,str);
15         this.name=name;
16         this.sayName=function(){
17             document.write(this.name);
18             document.write("<br>");
19         }
20         
21     }
22     var a=new classB("Amy","helloworld");
23     a.printstr();
24     alert(a.getstr());
25     a.sayName();
26 </script>
View Code

call()方法中第一個參數傳遞一個對象,這裡的this指的是當前對象,後面的參數(可能有多個)是指傳遞給調用call()方法的類(函數)所需要的參數,classA.call()也是相當於直接將classA代碼塊中的內容直接複製到這裡,classB的對象同樣可以直接使用classB中的變數和方法。

3、原型鏈

 1 <script type="text/javascript">
 2     function cA(){};
 3     cA.prototype.name="John";
 4     cA.prototype.sayName=function(){
 5         document.write(this.name);
 6         document.write("<br>");
 7     }
 8     function cB(){};
 9     cB.prototype=new cA();
10     cB.prototype.age=23;
11     cB.prototype.sayAge=function(){
12         document.write(this.age);
13         document.write("<br>");
14     }
15     var objB=new cB();
16     objB.sayAge();
17     objB.sayName();
18     document.write("is objB the instance of cA "+(objB instanceof cA));
19     document.write("<br>");
20     document.write("is objB the instance of cB "+(objB instanceof cB));
21     document.write("<br>");
22 </script>
View Code

這裡對類的定義要用prototype關鍵字,定義function時不帶有參數,prototype後面的變數或方法相當於java中被static修飾後的屬性和方法,是屬於所有對象的,這裡有個特殊之處:cB.prototype=new cA();該句話相當於將cA對象內容複製給cB,cB還可以追加自己的屬性和方法。

4、混合方法

 1 <script type="text/javascript">
 2     function cA(name){
 3         this.name=name;
 4     };
 5     cA.prototype.sayName=function(){
 6         document.write(this.name);
 7         document.write("<br>");
 8     }
 9     function cB(name,age){
10         cA.call(this,name);
11         this.age=age;
12     };
13     cB.prototype=new cA();
14     cB.prototype.sayAge=function(){
15         document.write(this.age);
16         document.write("<br>");
17     }
18     var objB=new cB("Alan",27);
19     objB.sayName();
20     objB.sayAge();
21     document.write("is objB the instance of cA "+(objB instanceof cA));
22     document.write("<br>");
23     document.write("is objB the instance of cB "+(objB instanceof cB));
24     document.write("<br>");
25 </script>
View Code

這裡可以將屬性封裝在類體內,而方法利用原型方式定義,個人感覺,這是一個很好的設計方法,利用prototype定義的函數可以為多個對象重用,這裡需要註意兩點:cB類體內有cA.call(this,name);同時還要將cB原型賦為cB對象,即:cB.prototype=new cA();cA.call(this,name)同樣相當於將cA類塊內的代碼複製於此,後面一句話又將cA的方法添加給cB,同時cB還可以追加自己的屬性和方法。

以上是本次對Javascript繼承機制的總結,不足之處望各位指正批評。

 


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

-Advertisement-
Play Games
更多相關文章
  • 記憶體分配方式 簡介 在C++中,記憶體分成5個區,他們分別是堆、棧、自由存儲區、全局/靜態存儲區和常量存儲區。 棧:在執行函數時,函數內局部變數的存儲單元都可以在棧上創建,函數執行結束時這些存儲單元自動被釋放。棧記憶體分配運算內置於處理器的指令集中,效率很高,但是分配的記憶體容量有限。 堆:就是那些由 n ...
  • 今天這一題有點燒腦: 有一個序列u,滿足: 1. 第一個元素是1 2. 此後任意一個元素x,2x+1和3x+1也必定在u中 現給定整數n,求序列u中的第n+1個元素是什麼? 規定:要註意演算法的效率 分析: 乍一想有點亂。先找幾個數計算一下: 1 [1], 3, 4 1, [3], 4, 7, 10 ...
  • 英文分詞的第三方庫NLTK不錯,中文分詞工具也有很多(盤古分詞、Yaha分詞、Jieba分詞等)。但是從載入自定義字典、多線程、自動匹配新詞等方面來看。 大jieba 確實是中文分詞中的 戰鬥機 。 請隨意觀看表演 "安裝" "分詞" "自定義詞典" "延遲載入" "關鍵詞提取" "詞性標註" "詞 ...
  • ID3決策樹實現源碼(Python版),機器學習經典演算法起步階段,歡迎討論交流。 ...
  • 視頻在youtube網站國內訪問不了,可以使用翻牆軟體查看。 視頻地址:www.youtube.com/embed/682p52tFcmY@autoplay=1 下麵是視頻文字介紹: Magento 2系統整體結構是建立在模塊的基礎上。通常,創建定製的第一步是構建模塊。 要創建模塊,需要完成以下步驟 ...
  • 0 目錄 認證授權系列:http://www.cnblogs.com/linianhui/category/929878.html 1 什麼是OIDC? 看一下官方的介紹(http://openid.net/connect/): OpenID Connect 1.0 is a simple iden ...
  • 1.angular 調用客戶端方法放在 try catch中 try { js_invoke.showShareDialog(angular.toJson(obj)); // 在這裡放客戶端的方法即可 } catch(e) { console.log('Recommend share',obj); ...
  • jq筆記-dom篇-慕課網學習筆記 1.jQuery節點創建與屬性的處理 創建元素節點: 1.$("<div></div>") 創建為本節點: 1.$("<div>我是文本節點</div>") 創建為屬性節點: 1.$("<div id='test' class='aaron'>我是文本節點</di ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...