亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 編程 > JavaScript > 正文

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

2019-11-20 12:57:45
字體:
來源:轉載
供稿:網友

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

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

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

編寫和維護如此復雜的代碼,必須使用模塊化策略。目前,業界的主流做法是采用"面向對象編程"。因此,Javascript如何實現面向對象編程,就成了一個熱門課題。
麻煩的是,Javascipt語法不支持"類"(class),導致傳統的面向對象編程方法無法直接使用。程序員們做了很多探索,研究如何用Javascript模擬"類"。本文總結了Javascript定義"類"的三種方法,討論了每種方法的特點,著重介紹了我眼中的最佳方法。

==============================================

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

在面向對象編程中,類(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(); // 啦啦啦

(完)

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
久久精品电影网站| 国产成人精品视频在线| 国产小视频国产精品| 日韩精品免费在线| 亚洲精品中文字幕有码专区| 久久理论片午夜琪琪电影网| 亚洲天堂av电影| 亚洲视频精品在线| 欧美一级在线播放| 久久久久久成人| 亚洲一区二区在线播放| 国产一区二区丝袜| 亚洲国产精彩中文乱码av在线播放| 91人人爽人人爽人人精88v| 最近免费中文字幕视频2019| 久久久av网站| 亚洲精品一区av在线播放| 亚洲天堂男人天堂| 精品国产欧美一区二区五十路| 精品久久久久久亚洲国产300| 国产成人久久久精品一区| 91精品国产91久久久久| 国产一区视频在线播放| 欧美有码在线视频| 亚洲国产成人精品女人久久久| 国产精品高潮呻吟久久av无限| 国产成人精品视频在线观看| 国产精品美女主播在线观看纯欲| 亚洲精品一区久久久久久| 热久久视久久精品18亚洲精品| 久久香蕉国产线看观看网| 欧美诱惑福利视频| 久久久久国产视频| 亚洲片在线资源| 久久精品久久精品亚洲人| 91精品综合久久久久久五月天| 欧美日韩免费一区| 911国产网站尤物在线观看| 性亚洲最疯狂xxxx高清| 136fldh精品导航福利| 久久久99免费视频| 97国产一区二区精品久久呦| 色www亚洲国产张柏芝| 亚洲中国色老太| 欧美视频国产精品| 成人激情视频免费在线| 欧美日韩中文字幕日韩欧美| 中文字幕成人精品久久不卡| 久久手机精品视频| 精品自在线视频| 热久久99这里有精品| 91精品国产自产在线观看永久| 亚洲成年人在线播放| 亚洲在线一区二区| 久久久亚洲国产| 97成人精品视频在线观看| 日韩在线视频中文字幕| 国产男女猛烈无遮挡91| 国产精品久久av| 亚洲国产又黄又爽女人高潮的| 91国语精品自产拍在线观看性色| 欧美国产日韩一区二区在线观看| 久久精品国产电影| 成人黄色短视频在线观看| 欧洲精品在线视频| 久久精品视频va| 欧美精品激情在线观看| 九九热在线精品视频| 91产国在线观看动作片喷水| 在线看片第一页欧美| 成人h猎奇视频网站| 久久男人资源视频| 欧美天堂在线观看| 青青a在线精品免费观看| 91免费电影网站| 日韩在线视频导航| 国产剧情久久久久久| 精品日韩美女的视频高清| 亚洲肉体裸体xxxx137| 欧美日韩国产精品| 欧美美女15p| 久久久国产精品x99av| 4438全国亚洲精品在线观看视频| 欧美—级a级欧美特级ar全黄| 国产精品对白刺激| 国产精品激情自拍| 欧美亚洲另类在线| 国产精品毛片a∨一区二区三区|国| 在线视频欧美日韩精品| 国产精品久久久久久亚洲调教| 亚洲国产精久久久久久久| 国产精品第8页| 国产精品久久网| 亚洲国产精品推荐| 国产aⅴ夜夜欢一区二区三区| 精品久久久久国产| 2021国产精品视频| 日本久久亚洲电影| 亚洲最大av网| 国产精品第3页| 欧美中文字幕在线观看| 51精品国产黑色丝袜高跟鞋| 成人国产精品色哟哟| 亚洲美女又黄又爽在线观看| 日本精品中文字幕| 中文字幕在线观看亚洲| 欧美疯狂性受xxxxx另类| 欧美www在线| 在线观看日韩www视频免费| 亚洲xxxx妇黄裸体| 日韩av理论片| 亚洲精品欧美日韩专区| 91香蕉亚洲精品| 国产欧美一区二区三区视频| 日韩欧美在线免费观看| 91高清免费视频| 亚洲激情在线观看视频免费| 第一福利永久视频精品| 欧美成人网在线| 亚洲国产精品大全| 国产丝袜视频一区| 亚洲精品色婷婷福利天堂| 亚洲欧美一区二区三区在线| 欧美精品在线播放| 福利视频第一区| 亚洲丁香婷深爱综合| 欧美电影免费观看网站| y97精品国产97久久久久久| 久久精品国产精品亚洲| 国产精品网站大全| 欧美与黑人午夜性猛交久久久| 在线播放日韩精品| 992tv成人免费影院| 57pao成人国产永久免费| 亚洲午夜女主播在线直播| 91在线观看免费高清完整版在线观看| 成人国产精品日本在线| 成人国内精品久久久久一区| 亚洲毛片在线观看| 亚洲精品一区中文| 欧美激情欧美激情在线五月| 国产精欧美一区二区三区| 欧美美女操人视频| 欧美激情伊人电影| 欧美亚洲成人精品| 日韩成人在线视频观看| 成人性生交xxxxx网站| 欧美成年人在线观看| 亚洲精品动漫100p| 国产丝袜一区二区三区免费视频| 久久色免费在线视频| 高清视频欧美一级| 91久久精品国产| 日韩欧美亚洲范冰冰与中字| 91在线视频一区| 午夜精品久久久99热福利| 国产精品91在线| 亚洲精品美女在线观看| 神马久久久久久| 日韩欧美第一页| 欧美性xxxx极品高清hd直播| 欧美激情综合色综合啪啪五月| 亚洲人在线视频| 欧美理论电影网|