React和RN都进入了ES6时代,甚至在Babel的支持下进入了ES7。ES6的内容很多,本文主要讲解class相关的内容。构造函数定义了Detective类作为示例。ES5“类”是如何定义的。functionES5Detective(){console.log('##ES5Detectivecontructor');}ES6定义类:classES6Detective{constructor(){console.log('Detectiveconstructor');}}ES6使用class关键字,有一个特殊的构造函数。ES5中的函数ES5Detective既是类定义又是构造函数。查看这个侦探来自哪本书的属性。ES5:ES5Detective.prototype.fromBookName='who';ES6:classES6Detective{detectiveName:string;_bookName:string;constructor(){console.log('Detectiveconstructor');this.detectiveName='Detectivewho';//property}}ES6getter&setter类ES6Detective{detectiveName:string;_bookName:string;constructor(){console.log('Detectiveconstructor');this.detectiveName='Detectivewho';this._bookName='who';}getfromBookName(){returnthis._bookName;}setfromBookName(value){this._bookName=value;}}如果只有getter没有setter,赋值时会出现如下错误:detective.bookAuthor='AC';^TypeError:CannotsetpropertybookAuthorof#whichhasonlyagetterinstancemethoddetectivehowcasewas解决。ES5:ES5Detective.prototype.solveCase=function(caseName){vardn=this.deciveName;if(!caseName){console.log('SOLVECASE:'+dn+'nocasetosolve');}else{console.log('SOLVECASE:'+dn+'getcase'+caseName+'已解决');}};或者:functionES5Detective(){this.deciveName='Detectivewho';console.log('##ES5Detectivecontructor');//实例方法this.investigate=function(scene){console.log('investigate'+scene);}this.assistant="assistantwho";}ES6:classES6Detective{detectiveName:string;_bookName:string;constructor(){console.log('Detectiveconstructor');this.detectiveName='Detectivewho';this._bookName='who';}solveCase(caseName){if(!caseName){console.log('nocasetosolve');}else{console.log('case'+caseName+'resolved');}}}ES6加法非常简单明了。ES5中添加实例方法有两种方式,一种是在原型中定义,另一种是在构造函数中重新定义。构造函数中定义的实例方法和属性在每个实例中都会保留一份,而原型中定义的实例方法和属性对于所有实例都只有一份。此外,ES5的构造函数中重新定义的实例方法可以访问类的私有变量。例如:functionES5Detective(){console.log('##ES5Detectivecontructor');varavailable:boolean=true;//privatefield.defaultincomeisZERO.this.investigate=function(scene){if(available){console.log('investigate'+scene);}else{console.log(`i'mnotavailable`);}}}被其他方法访问时会报错。if(!available){^静态方法ES5:ES5Detective.countCases=function(count){if(!count){console.log('nocasesolved');}else{console.log(`${count}casesresolved`);}};直接在类名后面定义方法,这个方法是静态方法。ES5Detective.countCases();ES6:classES6Detective{staticcountCases(){console.log(`Countingcases...`);}}//callitES6Detective.countCases();继承ES6使用extends关键字来实现继承。ES5:functionES5Detective(){varavailable:boolean=true;//privatefield.this.deciveName='Detectivewho';console.log('##ES5Detectivecontructor');this.investigate=function(scene){//略}this.assistant="assistantwho";}ES5Detective.prototype.solveCase=function(caseName){//略}//继承函数ES5DetectiveConan(){//firstlineinconstructormethodisamust!!!ES5Detective.call(this);this.dictiveName='Conan';}//继承ES5DetectiveConan.prototype=Object.create(ES5Detective.prototype);ES5DetectiveConan.prototype.constructor=ES5DetectiveConan;ES5继承需要注意两点:需要调用SuperClass.call(this[,arg1intheconstructorofthesubclass,arg2,...])子类的原型赋值为:SubClass.prototype=Object。创建(SuperClass.prototype),然后构造函数被重定向到它自己的:SubClass.prototpye.constructor=SubClass。ES6:classES6Detective{constructor(){console.log('Detectiveconstructor');this.detectiveName='Detectivewho';this._bookName='who';}solveCase(caseName){if(!caseName){console.log('nocasetosolve');}else{console.log('case'+caseName+'issolved');}}getfromBookName(){returnthis._bookName;}setfromBookName(value){this._bookName=value;}getbookAuthor(){return'AuthorWho';}staticcountCases(){console.log(`Countingcases...`);}}classES6DetectiveConanextendsES6Detective{constructor(){super();console.log('ES6DetectiveConanconstructor');}}ES6的新语法更可以理解。注意:一定要在子类的构造函数中调用super()方法。否则报错。调用超类内容classES6DetectiveConanextendsES6Detective{constructor(){super();console.log('ES6DetectiveConanconstructor');}solveCase(caseName){super.solveCase(caseName);if(!caseName){console.log('CONANnocasetosolve');}else{console.log('CONANcase'+caseName+'issolved');}}}静态方法可以继承ES6静态方法可以继承。ES5不能。classES6Detective{staticcountCases(place){letp=!place?'[maybe]':place;console.log(`Countingcases...solvein${p}`);}}classES6DetectiveConanextendsES6Detective{constructor(){super();控制台.log('ES6DetectiveConanconstructor');}}//staticmethodES6Detective.countCases();ES6DetectiveConan.countCases('Japan');//resultCountingcases...solvein[maybe]Countingcases...solveinJapan在子类ES6DetectiveConan中没有定义任何东西方法,包括静态方法。但是,可以在超类和子类中调用此方法。甚至,可以在子类中调用父类的静态方法::-Countingcases...solvein${p}`);}}//resultCountingcases...solvein[可能]Countingcases...solveinJapan#Subclass:-Countingcases...solveinJapancodehttps://github.com/future-恰...