Usage of CLASS in JavaScriptES6

Introduction to the use of classes in JavaScriptES6

For javascript, classes are an optional (not mandatory) design pattern, and the implementation of classes in [[Prototype] languages such as JavaScript is very poor.

This lame feeling is not only derived from syntax, although it is a very important reason. Js has many syntax disadvantages: tedious and messy. prototype references and attempts to call functions with the same name on the upper layer of the prototype chain. Explicit pseudo-polymorphism is not reliable, beautiful, and easy to be misunderstood as a "Constructor. constructor.

In addition, class design still has further problems. In traditional class-oriented languages, parent classes and child classes, child classes, and instances are actually copying operations, but they are not copied in [Prototype.

The object association code and behavior delegate uses [[Prototype] instead of hiding it. Its conciseness shows that the class is not applicable to JavaScript.

Use of CLASS in ES6

The traditional method of javascript is to generate an object instance, define the constructor, and then use the new method.

Function StdInfo () {this. name = "job"; this. age = 30;} StdInfo. prototype. getNames = function () {console. log ("name:" + this. name) ;}// get a student information object var p = new StdInfo ()

Only objects and classes are available in javacrip. It is a prototype-based language, and a prototype object is a template of a new object. It shares its attributes with the new object. This writing method is very different from traditional object-oriented languages, and it is easy for new users to get confused.

Definition class

Class added to ES6 as the object template. Use class to define a class:

// Define class StdInfo {constructor () {this. name = "job"; this. age = 30;} // you do not need to add function getNames () {console to the method defined in the class. log ("name:" + this. name) ;}}// use new to obtain an instance object var p = new StdInfo ();

The above statement is clearer and more like the object-oriented programming syntax, And it looks easier to understand.

The defined class is just syntactic sugar, so that we can use a more concise and clear syntax to create objects and process related inheritance.

// Define class StdInfo {//...} console. log (typeof StdInfo); // function console. log (StdInfo === StdInfo. prototype. constructor); // true

From the test above, we can see that the class type is a function, a "special function", pointing to the constructor.

There are two methods to define a function: function declaration and function expression, and two methods to define a class: class declaration and class expression.

Class Declaration

Class declaration is a way to define a class. The class is followed by the class name with a pair of braces. Put the methods to be defined in braces.

// Define the class. You can omit constructorclass StdInfo {getNames () {console. log ("name:" + this. name) ;}// ------------------------------------- // define the class, add constructorclass StdInfo {// when using new to define the instance object, call this function automatically, and pass in the constructor (name, age) parameter) {this. name = name; this. age = age;} getNames () {console. log ("name:" + this. name) ;}} // when defining the instance object, input the parameter var p = new StdInfo ("job", 30)

Constructor is a default method. When new is used to define an instance object, the constructor function is automatically executed, the required parameters are passed in, and the instance object is automatically returned after the constructor is executed.

One class can only have one constructor function. If multiple functions are defined, an error is returned.

In constructor, this points to the newly created instance object, and uses this to extend attributes to the newly created instance object.

When defining an instance object, you do not need to do anything in the initialization phase, but do not need to write the constructor function explicitly. If no explicit definition is available, an empty constructor method will be added by default, constructor (){}

Class expression

A class expression is another form of defining a class. Similar to a function expression, a function is assigned as a value to a variable. You can assign a defined class to a variable. At this time, the variable is the class name. The class name after the class keyword is dispensable. If it exists, it can only be used within the class.

Class names are added to the definition class:

Const People = class StdInfo {constructor () {console. log (StdInfo); // you can print the value. It is a function} new People (); new StdInfo (); // an error is reported. StdInfo is not defined;

There is no class name after the definition class:

const People = class {  constructor(){   }} new People();

Class to be executed immediately:

const p = new class {  constructor(name,age){    console.log(name,age);  }}("job",30)

For the class to be executed immediately, add new before the class. P is the Instance Object of the class.

Variable escalation does not exist

The definition class does not have a variable upgrade. It can only be used after the class is defined, which is different from the function declaration.

// ----- Function declaration ------- // can be used before definition. The call is valid because the function declaration is promoted. Func (); function func () {}// ----- definition class --------------- new StdInfo (); // error, StdInfo is not definedclass StdInfo {}

EXTENDS inheritance

Use the extends keyword to inherit between classes. This is much easier than using inheritance in es5.

// Define the class Parent {constructor (name, age) {this. name = name; this. age = age;} speakSometing () {console. log ("I can speek chinese") ;}// defines the subclass, inheriting the Parent class Child extends Parent {coding () {console. log ("coding javascript") ;}} var c = new Child (); // you can call the method c of the parent class. speakSometing (); // I can speek chinese

With the inheritance method, the subclass has the parent class method.

If the constructor is in the subclass, you must call super.

// Define the class Parent {constructor (name, age) {this. name = name; this. age = age;} speakSometing () {console. log ("I can speek chinese") ;}// defines the subclass and inherits the Parent class Child extends Parent {constructor (name, age) {// super () is not called (), this is not defined // super (name, age);} coding () {console. log ("coding javascript") ;}} var c = new Child ("job", 30); // you can call the method c of the parent class. speakSometing (); // I can speek chinese

The subclass must call the super method in the constructor method. Otherwise, an error (this is not defined) is returned when the instance is created ). This is because the subclass does not have its own this object, but inherits the this object of the parent class and then processes it. If the super method is not called, The subclass will not get this object.