React Native填坑之旅--class（番外篇）
无论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 #<ES6Detective> 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(`im 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...
云南idc服务商