无论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.  
5.   constructor() { 
6.     console.log('Detective constructor'); 
7.     this.detectiveName = 'Detective who'; // 属性 
8.   } 
9. }  

ES6 getter & setter

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

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

1. detective.bookAuthor = 'A C'; 
2.                      ^ 
3.  
4. 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.  
9.   this.assistant = "assistant who"; 
10. }  

ES6:

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

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

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

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

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

1. if (!available) { 
2.  
3. ^  

静态方法

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.  
7. // call it 
8. ES6Detective.countCases();  

继承

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

ES5:

1. function ES5Detective() { 
2.   var available: boolean = true; // private field. 
3.  
4.   this.dectiveName = 'Detective who'; 
5.   console.log('##ES5Detective contructor'); 
6.  
7.   this.investigate = function(scene) { 
8.     // 略  
9.   } 
10.  
11.   this.assistant = "assistant who"; 
12. } 
13.  
14. ES5Detective.prototype.solveCase = function(caseName) { 
15.   // 略 
16. } 
17.  
18. // inheritance 
19. function ES5DetectiveConan() { 
20.   // first line in constructor method is a must!!! 
21.   ES5Detective.call(this); 
22.  
23.   this.dectiveName = 'Conan'; 
24. } 
25.  
26. // inheritance 
27. ES5DetectiveConan.prototype = Object.create(ES5Detective.prototype); 
28. 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.  
8.   solveCase(caseName) { 
9.     if(!caseName) { 
10.       console.log('no case to solve'); 
11.     } else { 
12.       console.log('case ' + caseName + ' is solved'); 
13.     } 
14.   } 
15.  
16.   get fromBookName() { 
17.     return this._bookName; 
18.   } 
19.  
20.   set fromBookName(value) { 
21.     this._bookName = value; 
22.   } 
23.  
24.   get bookAuthor() { 
25.     return 'Author Who'; 
26.   } 
27.  
28.   static countCases() { 
29.     console.log(`Counting cases...`); 
30.   } 
31. } 
32.  
33. class ES6DetectiveConan extends ES6Detective { 
34.   constructor() { 
35.     super(); 
36.     console.log('ES6DetectiveConan constructor'); 
37.   } 
38. }  

ES6的新语法更加易懂。

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

调用super类内容

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

静态方法可以被继承

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.  
8. class ES6DetectiveConan extends ES6Detective { 
9.   constructor() { 
10.     super(); 
11.     console.log('ES6DetectiveConan constructor'); 
12.   } 
13. } 
14.  
15. // static method 
16. ES6Detective.countCases(); 
17. ES6DetectiveConan.countCases('Japan'); 
18.  
19. // result 
20. Counting cases...solve in [maybe] 
21. 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.  
9. // result 
10. Counting cases...solve in [maybe] 
11. Counting cases...solve in Japan 
12. #Sub class:- Counting cases...solve in Japan  

作者：小红星闪啊闪

来源：51CTO