不管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(`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