无论React还是RN都已经迈入了ES6的时代，甚至凭借Babel的支持都进入了ES7。ES6内容很多，本文主要讲解类相关的内容。

构造函数

定义侦探类作为例子。

ES5的“类”是如何定义的。

1. function ES5Detective() {
2. console.log('##ES5Detective contructor');
3. }

ES6定义类：

1. class ES6Detective {
2. constructor() {
3. console.log('Detective constructor');
4. }
5. }

ES6使用了class关键字，而且有专门的constructor。ES5里的function ES5Detective既是类的定义，也是构造函数。

属性

看看这个侦探是从哪本书出来的。

ES5：

1. ES5Detective.prototype.fromBookName = 'who';

ES6：

1. class ES6Detective {
2. detectiveName: string;
3. _bookName: string;
4. constructor() {
5. console.log('Detective constructor');
6. this.detectiveName = 'Detective who'; // 属性
7. }
8. }

ES6 getter & setter

1. class ES6Detective {
2. detectiveName: string;
3. _bookName: string;
4. constructor() {
5. console.log('Detective constructor');
6. this.detectiveName = 'Detective who';
7. this._bookName = 'who';
8. }
9. get fromBookName() {
10. return this._bookName;
11. }
12. set fromBookName(value) {
13. this._bookName = value;
14. }
15. }

如果只有getter没有setter而赋值的话就会出现下面的错误：

1. detective.bookAuthor = 'A C';
2. ^
3. TypeError: Cannot set property bookAuthor of #<ES6Detective> which has only a getter

实例方法

侦探是如何解决案件的。

ES5：

1. ES5Detective.prototype.solveCase = function(caseName) {
2. var dn = this.dectiveName;
3. if(!caseName) {
4. console.log('SOLVE CASE: ' + dn + ' no case to solve');
5. } else {
6. console.log('SOLVE CASE: ' + dn + ' get case ' + caseName + ' is solved');
7. }
8. };

或者：

1. function ES5Detective() {
2. this.dectiveName = 'Detective who';
3. console.log('##ES5Detective contructor');
4. // 实例方法
5. this.investigate = function(scene) {
6. console.log('investigate ' + scene);
7. }
8. this.assistant = "assistant who";
9. }

ES6:

1. class ES6Detective {
2. detectiveName: string;
3. _bookName: string;
4. constructor() {
5. console.log('Detective constructor');
6. this.detectiveName = 'Detective who';
7. this._bookName = 'who';
8. }
9. solveCase(caseName) {
10. if(!caseName) {
11. console.log('no case to solve');
12. } else {
13. console.log('case ' + caseName + ' is solved');
14. }
15. }
16. }

ES6添加方法非常简单直接。ES5中添加实例方法有两种方法，一是在prototype里定义，一是在构造函数重定义。在构造函数中定义的实例方法和属性在每一个实例中都会保留一份，而在原型中定义的实例方法和属性是全部实例只有一份。

另外，在ES5的构造函数重定义的实例方法可以访问类的私有变量。比如：

1. function ES5Detective() {
2. console.log('##ES5Detective contructor');
3. var available: boolean = true; // private field. default income is ZERO.
4. this.investigate = function(scene) {
5. if (available) {
6. console.log('investigate ' + scene);
7. } else {
8. console.log(`i'm not available`);
9. }
10. }
11. }

在其他的方法访问的时候就会报错。

1. if (!available) {
2. ^

静态方法

ES5：

1. ES5Detective.countCases = function(count) {
2. if(!count) {
3. console.log('no case solved');
4. } else {
5. console.log(`${count} cases are solved`);
6. }
7. };

类名后直接定义方法，这个方法就是静态方法。

1. ES5Detective.countCases();

ES6:

1. class ES6Detective {
2. static countCases() {
3. console.log(`Counting cases...`);
4. }
5. }
6. // call it
7. ES6Detective.countCases();

继承

ES6使用extends关键字实现继承。

ES5:

1. function ES5Detective() {
2. var available: boolean = true; // private field.
3. this.dectiveName = 'Detective who';
4. console.log('##ES5Detective contructor');
5. this.investigate = function(scene) {
6. // 略
7. }
8. this.assistant = "assistant who";
9. }
10. ES5Detective.prototype.solveCase = function(caseName) {
11. // 略
12. }
13. // inheritance
14. function ES5DetectiveConan() {
15. // first line in constructor method is a must!!!
16. ES5Detective.call(this);
17. this.dectiveName = 'Conan';
18. }
19. // inheritance
20. ES5DetectiveConan.prototype = Object.create(ES5Detective.prototype);
21. ES5DetectiveConan.prototype.constructor = ES5DetectiveConan;

ES5继承的时候需要注意两个地方：

1. 需要在子类的构造函数里调用SuperClass.call(this[, arg1, arg2, ...])
2. 子类的prototype赋值为：SubClass.prototype = Object.create(SuperClass.prototype)，然后把构造函数重新指向自己的：SubClass.prototpye.constructor = SubClass。

ES6：

1. class ES6Detective {
2. constructor() {
3. console.log('Detective constructor');
4. this.detectiveName = 'Detective who';
5. this._bookName = 'who';
6. }
7. solveCase(caseName) {
8. if(!caseName) {
9. console.log('no case to solve');
10. } else {
11. console.log('case ' + caseName + ' is solved');
12. }
13. }
14. get fromBookName() {
15. return this._bookName;
16. }
17. set fromBookName(value) {
18. this._bookName = value;
19. }
20. get bookAuthor() {
21. return 'Author Who';
22. }
23. static countCases() {
24. console.log(`Counting cases...`);
25. }
26. }
27. class ES6DetectiveConan extends ES6Detective {
28. constructor() {
29. super();
30. console.log('ES6DetectiveConan constructor');
31. }
32. }

ES6的新语法更加易懂。

注意：一定要在子类的构造方法里调用super()方法。否则报错。

调用super类内容

1. class ES6DetectiveConan extends ES6Detective {
2. constructor() {
3. super();
4. console.log('ES6DetectiveConan constructor');
5. }
6. solveCase(caseName) {
7. super.solveCase(caseName);
8. if(!caseName) {
9. console.log('CONAN no case to solve');
10. } else {
11. console.log('CONAN case ' + caseName + ' is solved');
12. }
13. }
14. }

静态方法可以被继承

ES6的静态方法可以被继承。ES5的不可以。

1. class ES6Detective {
2. static countCases(place) {
3. let p = !place ? '[maybe]' : place;
4. console.log(`Counting cases...solve in ${p}`);
5. }
6. }
7. class ES6DetectiveConan extends ES6Detective {
8. constructor() {
9. super();
10. console.log('ES6DetectiveConan constructor');
11. }
12. }
13. // static method
14. ES6Detective.countCases();
15. ES6DetectiveConan.countCases('Japan');
16. // result
17. Counting cases...solve in [maybe]
18. Counting cases...solve in Japan

在子类ES6DetectiveConan并没有定义任何方法，包括静态方法。但是，在父类和子类里都可以调用该方法。

甚至，可以在子类里调用父类的静态方法：

1. class ES6DetectiveConan extends ES6Detective {
2. static countCases(place) {
3. let p = !place ? '[maybe]' : place;
4. super.countCases(p);
5. console.log(`#Sub class:- Counting cases...solve in ${p}`);
6. }
7. }
8. // result
9. Counting cases...solve in [maybe]
10. Counting cases...solve in Japan
11. #Sub class:- Counting cases...solve in Japan

作者：小红星闪啊闪

来源：51CTO