Shulou(Shulou.com)05/31 Report--

This article shows you how Babel compiles Class in ES6. The content is concise and easy to understand. It will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Preface

Before we understand how Babel compiles class, let's take a look at how the class of ES6 corresponds to the constructor of ES5. After all, ES6's class can be seen as a syntax sugar, most of its functions can be done by ES5, and the new class writing only makes the object prototype more clear and more like the syntax of object-oriented programming.

Constructor

In ES6:

Class Person {constructor (name) {this.name = name;} sayHello () {return 'hello, I am' + this.name;}} var kevin = new Person ('Kevin'); kevin.sayHello (); / / hello, I am Kevin

Corresponding to ES5 is:

Function Person (name) {this.name = name;} Person.prototype.sayHello = function () {return 'hello, I am' + this.name;}; var kevin = new Person ('Kevin'); kevin.sayHello (); / / hello, I am Kevin

We can see the constructor Person of ES5, which corresponds to the constructor method of the Person class of ES6.

It is worth noting that all methods defined within the class are non-enumerable.

Take the above example as an example, in ES6:

Object.keys (Person.prototype); / / [] Object.getOwnPropertyNames (Person.prototype); / / ["constructor", "sayHello"]

However, in ES5:

Object.keys (Person.prototype); / / ['sayHello'] Object.getOwnPropertyNames (Person.prototype); / / ["constructor", "sayHello"] instance properties

Previously, we defined instance properties, which could only be written in the constructor method of the class. For example:

Class Person {constructor () {this.state = {count: 0};}}

However, there is now a proposal to provide a new way to write both instance and static properties, and Babel has supported it. Now we can write as follows:

Class Person {state = {count: 0};}

Corresponding to ES5 are:

Function Person () {this.state = {count: 0};} static method

All methods defined in the class are inherited by the instance. If you add the static keyword before a method, it means that the method will not be inherited by the instance, but will be called directly through the class. This is called a "static method".

In ES6:

Class Person {static sayHello () {return 'hello';}} Person.sayHello () / /' hello'var kevin = new Person (); kevin.sayHello (); / / TypeError: kevin.sayHello is not a function

Corresponding ES5:

Function Person () {} Person.sayHello = function () {return 'hello';}; Person.sayHello (); / /' hello'var kevin = new Person (); kevin.sayHello (); / / TypeError: kevin.sayHello is not a function static attribute

Static attributes refer to the properties of the Class itself, namely Class.propName, rather than those defined on the instance object (this). Previously, we could only add static attributes like this:

Class Person {} Person.name = 'kevin'

Because the proposal mentioned above can now be written as:

Class Person {static name = 'kevin';}

Corresponding to ES5 are:

Function Person () {}; Person.name = 'kevin';new call

It is worth noting that the class must use the new call, or an error will be reported. This is a major difference between it and a normal constructor, which can be executed without new.

Class Person {} Person (); / / TypeError: Class constructor Foo cannot be invoked without 'new'getter and setter

Like ES5, you can use the get and set keywords inside a class to set a store-value function and a value-taking function on an attribute to intercept the access behavior of that property.

Class Person {get name () {return 'kevin';} set name (newName) {console.log (' new name is:'+ newName)}} let person = new Person (); person.name = 'daisy';// new name is: daisyconsole.log (person.name); / / kevin

Corresponding to ES5:

Function Person (name) {} Person.prototype = {get name () {return 'kevin';}, set name (newName) {console.log (' new name is:'+ newName)}} let person = new Person (); person.name = 'daisy';// new name is: daisyconsole.log (person.name); / / kevinBabel compilation

So far, we have known about the "class" method, ES6 and ES5 is how to correspond, in fact, Babel will not be directly converted to this form when compiling, Babel will generate some helper functions to help achieve the features of ES6.

We can see what the ES6 code looks like on the Try it out page of the Babel website.

Compilation (1)

The ES6 code is:

Class Person {constructor (name) {this.name = name;}}

Babel is compiled as follows:

"use strict"; function _ classCallCheck (instance, Constructor) {if (! (instance instanceof Constructor)) {throw new TypeError ("Cannot call a class as a function");}} var Person = function Person (name) {_ classCallCheck (this, Person); this.name = name;}

The purpose of _ classCallCheck is to check whether Person is called through new, and as we said above, the class must be called using new, otherwise an error will be reported.

When we call in the form var person = Person (), this points to window, so instance instanceof Constructor will be false, as required by ES6.

Compilation (2)

The ES6 code is:

Class Person {/ / instance property foo = 'foo'; / / static property static bar =' bar'; constructor (name) {this.name = name;}}

Babel is compiled as follows:

'use strict';function _ classCallCheck (instance, Constructor) {if (! (instance instanceof Constructor)) {throw new TypeError ("Cannot call a class as a function");}} var Person = function Person (name) {_ classCallCheck (this, Person); this.foo =' foo'; this.name = name;}; Person.bar = 'bar'; compilation (III)

The ES6 code is:

Class Person {constructor (name) {this.name = name;} sayHello () {return 'hello, I am' + this.name;} static onlySayHello () {return 'hello'} get name () {return' kevin';} set name (newName) {console.log ('new name is:' + newName)}}

The code corresponding to ES5 should be:

Function Person (name) {this.name = name;} Person.prototype = {sayHello: function () {return 'hello, I am' + this.name;}, get name () {return 'kevin';}, set name (newName) {console.log (' new name is:'+ newName)} Person.onlySayHello = function () {return 'hello'}

Babel is compiled as follows:

'use strict';var _ createClass = function () {function defineProperties (target, props) {for (var I = 0; I < props.length; iTunes +) {var descriptor = props [I]; descriptor.enumerable = descriptor.enumerable | | false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty (target, descriptor.key, descriptor) }} return function (Constructor, protoProps, staticProps) {if (protoProps) defineProperties (Constructor.prototype, protoProps); if (staticProps) defineProperties (Constructor, staticProps); return Constructor;};} (); function _ classCallCheck (instance, Constructor) {if (! (instance instanceof Constructor)) {throw new TypeError ("Cannot call a class as a function") }} var Person = function () {function Person (name) {_ classCallCheck (this, Person); this.name = name;} _ createClass (Person, [{key: 'sayHello', value: function sayHello () {return' hello, I am'+ this.name }}, {key: 'name', get: function get () {return' kevin';}, set: function set (newName) {console.log ('new name is:' + newName);}}], [{key: 'onlySayHello', value: function onlySayHello () {return' hello' }]); return Person;} ()

We can see that Babel generates a _ createClass helper function that passes in three parameters, the first is the constructor, in this case Person, the second is the array of functions to be added to the prototype, and the third is the array of functions to be added to the constructor itself, that is, all the functions that add the static keyword. The function of this function is to add the methods in the function array to the constructor or the prototype of the constructor, and finally return the constructor.

In it, another defineProperties helper function is generated, which uses the Object.defineProperty method to add attributes.

The default enumerable is false,configurable and true, which is also highlighted above to prevent methods such as Object.keys () from traversing. Then determine whether it is getter and setter by judging whether value exists or not. If value exists, add the value and writable attributes to the descriptor, and if not, use the get and set attributes directly.

The above is how Babel compiles Class in ES6. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.