Javascript定義類(class)的三種方法

来源:http://www.cnblogs.com/androidshouce/archive/2016/06/14/5582744.html
-Advertisement-
Play Games

將近20年前,Javascript誕生的時候,只是一種簡單的網頁腳本語言。如果你忘了填寫用戶名,它就跳出一個警告。 如今,它變得幾乎無所不能,從前端到後端,有著各種匪夷所思的用途。程式員用它完成越來越龐大的項目。 Javascript代碼的複雜度也直線上升。單個網頁包含10000行Javascrip ...


將近20年前,Javascript誕生的時候,只是一種簡單的網頁腳本語言。如果你忘了填寫用戶名,它就跳出一個警告。

如今,它變得幾乎無所不能,從前端到後端,有著各種匪夷所思的用途。程式員用它完成越來越龐大的項目。

Javascript代碼的複雜度也直線上升。單個網頁包含10000行Javascript代碼,早就司空見慣。2010年,一個工程師透露,Gmail的代碼長度是443000行!

編寫和維護如此複雜的代碼,必須使用模塊化策略。目前,業界的主流做法是採用"面向對象編程"。因此,Javascript如何實現面向對象編程,就成了一個熱門課題。

麻煩的是,Javascipt語法不支持"類"(class),導致傳統的面向對象編程方法無法直接使用。程式員們做了很多探索,研究如何用Javascript模擬"類"。本文總結了Javascript定義"類"的三種方法,討論了每種方法的特點,著重介紹了我眼中的最佳方法。

 

 

在面向對象編程中,類(class)是對象(object)的模板,定義了同一組對象(又稱"實例")共有的屬性和方法。

Javascript語言不支持"類",但是可以用一些變通的方法,模擬出"類"。

一、構造函數法

這是經典方法,也是教科書必教的方法。它用構造函數模擬"類",在其內部用this關鍵字指代實例對象。

  function Cat() {

    this.name = "大毛";

  }

生成實例的時候,使用new關鍵字。

  var cat1 = new Cat();

  alert(cat1.name); // 大毛

類的屬性和方法,還可以定義在構造函數的prototype對象之上。

  Cat.prototype.makeSound = function(){

    alert("喵喵喵");

  }

關於這種方法的詳細介紹,請看我寫的系列文章《Javascript 面向對象編程》,這裡就不多說了。它的主要缺點是,比較複雜,用到了this和prototype,編寫和閱讀都很費力。

二、Object.create()法

為瞭解決"構造函數法"的缺點,更方便地生成對象,Javascript的國際標準ECMAScript第五版(目前通行的是第三版),提出了一個新的方法Object.create()

用這個方法,"類"就是一個對象,不是函數。

  var Cat = {

    name: "大毛",

    makeSound: function(){ alert("喵喵喵"); }

  };

然後,直接用Object.create()生成實例,不需要用到new。

  var cat1 = Object.create(Cat);

  alert(cat1.name); // 大毛

  cat1.makeSound(); // 喵喵喵

目前,各大瀏覽器的最新版本(包括IE9)都部署了這個方法。如果遇到老式瀏覽器,可以用下麵的代碼自行部署。

  if (!Object.create) {

    Object.create = function (o) {

       function F() {}

      F.prototype = o;

      return new F();

    };

  }

這種方法比"構造函數法"簡單,但是不能實現私有屬性和私有方法,實例對象之間也不能共用數據,對"類"的模擬不夠全面。

三、極簡主義法

荷蘭程式員Gabor de Mooij提出了一種比Object.create()更好的新方法,他稱這種方法為"極簡主義法"(minimalist approach)。這也是我推薦的方法。

3.1 封裝

這種方法不使用this和prototype,代碼部署起來非常簡單,這大概也是它被叫做"極簡主義法"的原因。

首先,它也是用一個對象模擬"類"。在這個類裡面,定義一個構造函數createNew(),用來生成實例。

  var Cat = {

    createNew: function(){

      // some code here

    }

  };

然後,在createNew()裡面,定義一個實例對象,把這個實例對象作為返回值。

  var Cat = {

    createNew: function(){

      var cat = {};

      cat.name = "大毛";

      cat.makeSound = function(){ alert("喵喵喵"); };

      return cat;

    }

  };

使用的時候,調用createNew()方法,就可以得到實例對象。

  var cat1 = Cat.createNew();

  cat1.makeSound(); // 喵喵喵

這種方法的好處是,容易理解,結構清晰優雅,符合傳統的"面向對象編程"的構造,因此可以方便地部署下麵的特性。

3.2 繼承

讓一個類繼承另一個類,實現起來很方便。只要在前者的createNew()方法中,調用後者的createNew()方法即可。

先定義一個Animal類。

  var Animal = {

    createNew: function(){

      var animal = {};

      animal.sleep = function(){ alert("睡懶覺"); };

      return animal;

    }

  };

然後,在Cat的createNew()方法中,調用Animal的createNew()方法。

  var Cat = {

    createNew: function(){

      var cat = Animal.createNew();

      cat.name = "大毛";

      cat.makeSound = function(){ alert("喵喵喵"); };

      return cat;

    }

  };

這樣得到的Cat實例,就會同時繼承Cat類和Animal類。

  var cat1 = Cat.createNew();

  cat1.sleep(); // 睡懶覺

3.3 私有屬性和私有方法

在createNew()方法中,只要不是定義在cat對象上的方法和屬性,都是私有的。

  var Cat = {

    createNew: function(){

      var cat = {};

      var sound = "喵喵喵";

      cat.makeSound = function(){ alert(sound); };

      return cat;

    }

  };

上例的內部變數sound,外部無法讀取,只有通過cat的公有方法makeSound()來讀取。

  var cat1 = Cat.createNew();

  alert(cat1.sound); // undefined

3.4 數據共用

有時候,我們需要所有實例對象,能夠讀寫同一項內部數據。這個時候,只要把這個內部數據,封裝在類對象的裡面、createNew()方法的外面即可。

  var Cat = {

    sound : "喵喵喵",

    createNew: function(){

      var cat = {};

      cat.makeSound = function(){ alert(Cat.sound); };

      cat.changeSound = function(x){ Cat.sound = x; };

      return cat;

    }

  };

然後,生成兩個實例對象:

  var cat1 = Cat.createNew();

  var cat2 = Cat.createNew();

  cat1.makeSound(); // 喵喵喵

這時,如果有一個實例對象,修改了共用的數據,另一個實例對象也會受到影響。

  cat2.changeSound("啦啦啦");

  cat1.makeSound(); // 啦啦啦

 


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

-Advertisement-
Play Games
更多相關文章
  • 最近一段時間要畢業了,忙著找工作,見過不少筆試面試題,自己總結了一些加上網上找的一些整合了一下。答案暫時都東拼西湊出來了,但是還是先不發出來,一方面是答案並不是唯一的並且自己的答案不能保證對,另一方面希望看到本文的伙伴能自己去找答案,畢竟,技術只有自己真正理解了才是自己的東西,共勉。 小白第一次發文 ...
  • js獲取url中的參數 function UrlSearch() { var name, value; var str = location.href; //取得整個地址欄 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有參數 ...
  • 本文是【Knockout.js 學習體驗之旅】系列文章的第3篇,所有demo均基於目前knockout.js的最新版本(3.4.0)。小茄才識有限,文中若有不當之處,還望大家指出。 目錄: 【Knockout.js 學習體驗之旅】(1)ko初體驗 【Knockout.js 學習體驗之旅】(2)花式捆 ...
  • 構造函數覆蓋模式,使用new操作符調用該函數的行為就如以函數調用它的行為一樣。這能工作完全利益於js允許new表達式的結果可以被構造函數中的顯式return語句所覆蓋。當User函數返回self對象時,new表達式的結果就變為self對象。該self對象可能是另一個綁定到this的對象。 防範誤用構... ...
  • __proto__屬性很特殊,它提供了Object.getPrototypeOf方法所不具備的額外能力,即修改對象原型鏈接的能力。 避免修改__proto__屬性的最明顯的原因是可移植性的問題。並不是所有的平臺都支持修改對象原型的特性,所以無法編寫可移植的代碼。 避免修改__proto__屬性的另一 ...
  • 前幾天,舍友去某互聯網公司面前端研發工程師。回來後,他就跟我們聊了下麵試官給他出的題。其中,有一道題是“如何實現iframe高度的自適應?”。好吧,我承認,我聽到iframe這個詞的第一反應就是:這個東西性能差、搜索引擎不友好等等。由於這樣的偏見,還真沒有好好研究一下iframe。其實,iframe ...
  • every():對數組每一項都遍歷,然後每一項都符合要求的話則返回true,否則就返回false some():對數組每一項都遍歷,其中有一項符合要求則返回true,否則返回false filter():對數組的每一項都遍歷,返回其中要求的元素組成的數組 map():對數組每一項都遍歷並且運行給定的 ...
  • 之前的項目一直採用grunt來構建,然後用requirejs做模塊化,requirejs官方有提供grunt的插件來做壓縮合併。現在的項目切到了gulp,模塊化用起了seajs,自然而然地也想到了模塊合併壓縮的問題。然後一開始在解決這個問題的時候,並不是很順利,在npm上並沒有那種特別流行的專門用來... ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...