React Native填坑之旅--class（番外篇）

TwIStOy 發布于2019-08-20 11:37 / 3039人閱讀

摘要：構造函數定義偵探類作為例子。里的既是類的定義，也是構造函數。在構造函數中定義的實例方法和屬性在每一個實例中都會保留一份，而在原型中定義的實例方法和屬性是全部實例只有一份。

無論React還是RN都已經邁入了ES6的時代，甚至憑借Babel的支持都進入了ES7。ES6內容很多，本文主要講解類相關的內容。

構造函數

定義偵探類作為例子。

ES5的“類”是如何定義的。

function ES5Detective() {
  console.log("##ES5Detective contructor");
}

ES6定義類：

class ES6Detective {
  constructor() {
    console.log("Detective constructor");
  }
}

ES6使用了class關鍵字，而且有專門的constructor。ES5里的function ES5Detective既是類的定義，也是構造函數。

屬性

看看這個偵探是從哪本書出來的。

ES5：

ES5Detective.prototype.fromBookName = "who";

ES6：

class ES6Detective {
  detectiveName: string;
  _bookName: string;

  constructor() {
    console.log("Detective constructor");
    this.detectiveName = "Detective who"; // 屬性
  }
}

ES6 getter & setter

class ES6Detective {
  detectiveName: string;
  _bookName: string;

  constructor() {
    console.log("Detective constructor");
    this.detectiveName = "Detective who";
    this._bookName = "who";
  }

  get fromBookName() {
    return this._bookName;
  }

  set fromBookName(value) {
    this._bookName = value;
  }
}

如果只有getter沒有setter而賦值的話就會出現下面的錯誤：

detective.bookAuthor = "A C";
                     ^

TypeError: Cannot set property bookAuthor of # which has only a getter

實例方法

偵探是如何解決案件的。

ES5：

ES5Detective.prototype.solveCase = function(caseName) {
  var dn = this.dectiveName;
  if(!caseName) {
    console.log("SOLVE CASE: " + dn + " no case to solve");
  } else {
    console.log("SOLVE CASE: " + dn + " get case " + caseName + " is solved");
  }
};

或者：

function ES5Detective() {
  this.dectiveName = "Detective who";
  console.log("##ES5Detective contructor");
  // 實例方法
  this.investigate = function(scene) {
    console.log("investigate " + scene);
  }

  this.assistant = "assistant who";
}

ES6:

class ES6Detective {
  detectiveName: string;
  _bookName: string;

  constructor() {
    console.log("Detective constructor");
    this.detectiveName = "Detective who";
    this._bookName = "who";
  }

  solveCase(caseName) {
    if(!caseName) {
      console.log("no case to solve");
    } else {
      console.log("case " + caseName + " is solved");
    }
  }
}

ES6添加方法非常簡單直接。ES5中添加實例方法有兩種方法，一是在prototype里定義，一是在構造函數重定義。在構造函數中定義的實例方法和屬性在每一個實例中都會保留一份，而在原型中定義的實例方法和屬性是全部實例只有一份。

另外，在ES5的構造函數重定義的實例方法可以訪問類的私有變量。比如：

function ES5Detective() {
  console.log("##ES5Detective contructor");

  var available: boolean = true; // private field. default income is ZERO.
  this.investigate = function(scene) {
    if (available) {
      console.log("investigate " + scene);
    } else {
      console.log(`i"m not available`);
    }
  }
}

在其他的方法訪問的時候就會報錯。

if (!available) {
     ^

靜態方法

ES5：

ES5Detective.countCases = function(count) {
  if(!count) {
    console.log("no case solved");
  } else {
    console.log(`${count} cases are solved`);
  }
};

類名后直接定義方法，這個方法就是靜態方法。

ES5Detective.countCases();

ES6:

class ES6Detective {
  static countCases() {
    console.log(`Counting cases...`);
  }
}

// call it
ES6Detective.countCases();

繼承

ES6使用extends關鍵字實現繼承。

ES5:

function ES5Detective() {
  var available: boolean = true; // private field.

  this.dectiveName = "Detective who";
  console.log("##ES5Detective contructor");

  this.investigate = function(scene) {
    // 略 
  }

  this.assistant = "assistant who";
}

ES5Detective.prototype.solveCase = function(caseName) {
  // 略
}

// inheritance
function ES5DetectiveConan() {
  // first line in constructor method is a must!!!
  ES5Detective.call(this);

  this.dectiveName = "Conan";
}

// inheritance
ES5DetectiveConan.prototype = Object.create(ES5Detective.prototype);
ES5DetectiveConan.prototype.constructor = ES5DetectiveConan;

ES5繼承的時候需要注意兩個地方：

需要在子類的構造函數里調用SuperClass.call(this[, arg1, arg2, ...])

子類的prototype賦值為：SubClass.prototype = Object.create(SuperClass.prototype)，然后把構造函數重新指向自己的：SubClass.prototpye.constructor = SubClass。

ES6：

class ES6Detective {
  constructor() {
    console.log("Detective constructor");
    this.detectiveName = "Detective who";
    this._bookName = "who";
  }

  solveCase(caseName) {
    if(!caseName) {
      console.log("no case to solve");
    } else {
      console.log("case " + caseName + " is solved");
    }
  }

  get fromBookName() {
    return this._bookName;
  }

  set fromBookName(value) {
    this._bookName = value;
  }

  get bookAuthor() {
    return "Author Who";
  }

  static countCases() {
    console.log(`Counting cases...`);
  }
}

class ES6DetectiveConan extends ES6Detective {
  constructor() {
    super();
    console.log("ES6DetectiveConan constructor");
  }
}

ES6的新語法更加易懂。

注意：一定要在子類的構造方法里調用super()方法。否則報錯。

調用super類內容

class ES6DetectiveConan extends ES6Detective {
  constructor() {
    super();
    console.log("ES6DetectiveConan constructor");
  }

  solveCase(caseName) {
    super.solveCase(caseName);

    if(!caseName) {
      console.log("CONAN no case to solve");
    } else {
      console.log("CONAN case " + caseName + " is solved");
    }
  }
}

靜態方法可以被繼承

ES6的靜態方法可以被繼承。ES5的不可以。

class ES6Detective {
  static countCases(place) {
    let p = !place ? "[maybe]" : place;
    console.log(`Counting cases...solve in ${p}`);
  }
}

class ES6DetectiveConan extends ES6Detective {
  constructor() {
    super();
    console.log("ES6DetectiveConan constructor");
  }
}

// static method
ES6Detective.countCases();
ES6DetectiveConan.countCases("Japan");

// result
Counting cases...solve in [maybe]
Counting cases...solve in Japan

在子類ES6DetectiveConan并沒有定義任何方法，包括靜態方法。但是，在父類和子類里都可以調用該方法。

甚至，可以在子類里調用父類的靜態方法：

class ES6DetectiveConan extends ES6Detective {
  static countCases(place) {
    let p = !place ? "[maybe]" : place;
    super.countCases(p);
    console.log(`#Sub class:- Counting cases...solve in ${p}`);
  }
}

// result
Counting cases...solve in [maybe]
Counting cases...solve in Japan
#Sub class:- Counting cases...solve in Japan

代碼

https://github.com/future-cha...

GPU云服務器云服務器番外篇 React Native webrtc react native react native webrtc

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80669.html

React Native填坑之旅--HTTP請求篇

摘要：填坑之旅篇填坑之旅動畫填坑之旅請求篇如果不能從頭到尾的建立一個應用，那么將失色不少。隨著，內置的支持了這個填補回調地獄大坑的功能。很好的利用了這一點，它的請求返回結果就是。在界面上顯示異常用，顯示警告使用。 React Native填坑之旅--Button篇React Native填坑之旅--動畫React Native填坑之旅--HTTP請求篇如果不能從頭到尾的建立一個RN應用，那...

yexiaobai 2019-08-20 11:27 評論0 收藏0
寫給想做前端的你

摘要：不過細想想，我郵只有前端的選修課啥的，課程也不是那么就業導向。至少目前，很少有大公司完全把作為前后端通用的技術棧。不能把簡單看做是在服務端的延展。編譯這個思想在前端領域很重要不改變現有的語言環境同時進行最佳的工程實踐。 P.S. 噴神請繞道，大神勿噴，不引戰，不攻擊，不鉆牛角尖。大二時第一次接觸前端。許多同學估計都想過要做一個網站，大部分又是從PHP開始的（誰讓它是世界上最好的語言呢...

JerryWangSAP 2019-08-21 13:49 評論0 收藏0
PostCSS自學筆記（二）【番外篇二】

摘要：之前有研究過做過假設，在插件列表中，的插件執行順序自上而下，一切看起來似乎是沒有任何問題的。再有摘自深入設計摘自寫的姿勢這兩張圖則應該是說明了我之前的假設，插件中的執行順序自上而下。先來看看一片來自的這段會不會跟這個有關呢，我先埋個伏筆。圖解PostCSS的插件執行順序文章其實是一系列的早就寫完了. 才發現忘了發在SegmentFault上面, 最早發布于https://gitee...

FleyX 2019-08-30 13:57 評論0 收藏0

發表評論

登陸后可評論

0條評論

TwIStOy

男|高級講師

我要關注我要私信

TA的文章

100天漲薪4k！從功能測試到自動化測試，我整理的超全學習指南！

閱讀 2142·2021-10-12 10:11
● JDK JRE JVM三者的區別

閱讀 842·2021-10-09 09:41
Confluence漏洞或致大規模網絡攻擊客戶群體包括近6萬家公司和組織

閱讀 3756·2021-09-09 11:37
易速互聯：十三周年慶，美國Az機房，1Gbps不限流量服務器僅550元，服務器支持自由定制配置

閱讀 1933·2021-09-08 10:41
css3動畫在手機端的流暢度比較

閱讀 2632·2019-08-30 12:58
【整理】18種推薦的CSS命名和書寫規范

閱讀 2368·2019-08-30 10:58
gulp插件解決瀏覽器緩存問題

閱讀 1271·2019-08-26 13:40
Bootstrap FileInput(文件上傳)中文API整理

閱讀 4096·2019-08-26 13:36

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

React Native填坑之旅--class（番外篇）

相關文章

React Native填坑之旅--HTTP請求篇

寫給想做前端的你

**PostCSS自學筆記（二）【番外篇二】**

發表評論

0條評論

TwIStOy

男|高級講師

TA的文章

100天漲薪4k！從功能測試到自動化測試，我整理的超全學習指南！

● JDK JRE JVM三者的區別

Confluence漏洞或致大規模網絡攻擊客戶群體包括近6萬家公司和組織

易速互聯：十三周年慶，美國Az機房，1Gbps不限流量服務器僅550元，服務器支持自由定制配置

css3動畫在手機端的流暢度比較

【整理】18種推薦的CSS命名和書寫規范

gulp插件解決瀏覽器緩存問題

Bootstrap FileInput(文件上傳)中文API整理

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

React Native填坑之旅--class（番外篇）

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！