Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to solve the problems caused by React Native by es6". In the daily operation, I believe many people have doubts about how to solve the problems caused by React Native by es6. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the doubts about "how to solve the problems caused by React Native". Next, please follow the editor to study!

Constructor function

Define the detective class as an example.

How the "class" of ES5 is defined.

Function ES5Detective () {console.log ('# # ES5Detective contructor');}

ES6 definition classes:

Class ES6Detective {constructor () {console.log ('Detective constructor');}}

ES6 uses the class keyword and has a special constructor. Function ES5Detective in ES5 is both a class definition and a constructor.

Attribute

Let's see which book this detective came from.

ES5:

ES5Detective.prototype.fromBookName = 'who'

ES6:

Class ES6Detective {detectiveName: string; _ bookName: string; constructor () {console.log ('Detective constructor'); this.detectiveName =' Detective who'; / / attribute}}

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;}}

If only getter is assigned without setter, the following error occurs:

Detective.bookAuthor ='A client; ^ TypeError: Cannot set property bookAuthor of # which has only a getter

Example method

How the detective solved the case.

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');}}

Or:

Function ES5Detective () {this.dectiveName = 'Detective who'; console.log (' # # ES5Detective contructor'); / / instance method 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');}

The method of adding ES6 is very simple and straightforward. There are two ways to add instance methods in ES5, one is defined in prototype, the other is redefined in constructor. The instance methods and properties defined in the constructor are retained in each instance, while the instance methods and properties defined in the prototype are only one of all instances.

In addition, instance methods redefined in the constructor of ES5 can access private variables of the class. For example:

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 (`ionomm not roomable`);}

An error will be reported when other methods are accessed.

If (! available) {^

Static method

ES5:

ES5Detective.countCases = function (count) {if (! count) {console.log ('no case solved');} else {console.log (`${count} cases are Secreted`);}}

Define the method directly after the class name, which is the static method.

ES5Detective.countCases ()

ES6:

Class ES6Detective {static countCases () {console.log (`Counting cases.`);}} / / call it ES6Detective.countCases ()

Inherit

ES6 uses the extends keyword to implement inheritance.

ES5:

Function ES5Detective () {var available: boolean = true; / / private field. This.dectiveName = 'Detective who'; console.log (' # # ES5Detective contructor'); this.investigate = function (scene) {/ / slightly} this.assistant = "assistant who";} ES5Detective.prototype.solveCase = function (caseName) {/ / slightly} / / inheritance function ES5DetectiveConan () {/ / first line in constructor method is a mustache! ES5Detective.call (this); this.dectiveName = 'Conan';} / / inheritance ES5DetectiveConan.prototype = Object.create (ES5Detective.prototype); ES5DetectiveConan.prototype.constructor = ES5DetectiveConan

There are two things to pay attention to when inheriting from ES5:

You need to call SuperClass.call (this [, arg1, arg2,...]) in the constructor of the subclass.

The prototype assignment of the subclass is: SubClass.prototype = Object.create (SuperClass.prototype), and then point the constructor back to its own: 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');}}

The new grammar of ES6 is easier to understand.

Note: be sure to call the super () method in the constructor of the subclass. Or report a mistake.

Call the super class content

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');}

Static methods can be inherited

ES6's static methods can be inherited. ES5 is not allowed.

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

There are no methods defined in the subclass ES6DetectiveConan, including static methods. However, this method can be called in both parent and subclasses.

You can even call the static method of the parent class in a subclass:

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, the study on "how to solve the problems caused by React Native" is over. I hope I can solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.