The usage of (class) class in es6

The usage of (class) class in es6


  1. es6 introduced the concept of Class. The new class writing makes the writing of object prototypes clearer, more like the syntax of object-oriented programming, and easier to understand.
  2. In fact, the concepts of prototype and constructor are still used behind the scenes.
  3. Strict mode does not need to use use strict because as long as the code is written in classes and modules, only strict mode can be used.
  4. There is no variable promotion in the promotion class (because of inheritance, you must ensure that the subclass is defined after the parent class).
  5. All methods of the class are defined in the prototype property of the class. Calling the method on the instance of the class is actually calling the method on the prototype. The prototype method can be called by the instance object, but it cannot be called by the class name, and an error will be reported.
class is es6 to define a class
  1. In fact, class is just a syntactic sugar, which is another way of writing a constructor.
  2. (Syntax sugar is an elegant solution at the grammatical level to avoid coding errors and improve coding efficiency. Simply put, it is a portable way of writing)

Look at the code

class Person { } Console .log ( typeof the Person) //the funciton Console .log (Person.prototype.constructor the Person ===) //to true copy the code

Use to see the code
Usage and use the constructor to generate object instances through new

class person2 { } the let JSON = new new PERSON2; duplicated code
Properties and methods

The attributes and methods defined in the constructor are called instance attributes and methods on this, otherwise they belong to prototype attributes and methods

class Person { constructor ( name ) { this .name = name //The methods and properties defined in the constructor are the instance objects themselves, } say () { //The methods and properties defined outside the constructor are the attention that all instance objects can share! console .log( 'hello' ) } } let jon = new Person() jon.hasOwnPrototype ( 'name' ) //to true jon.hasOwnPrototype ( 'say' ) //to false copy the code

Static method

A method that can be called directly through the class without passing the instance object, where this points to the class itself

class Person { static doSay () { this .say() } static say () { console .log( 'hello' ) } } Person.doSay() //hello ************************************************** ********************************************* //Static methods can be inherited by subclasses class Sub extends Person { } Sub.doSay() //hello //Static method can be called by the class name, not by the instance object, otherwise it will report an error class Person { static sum ( a, b ) { console .log(a + b) } } var p = new Person() Person.sum ( . 1 , 2 ) //. 3 p.sum ( . 1 , 2 ) //Not TypeError p.sum IS A function to copy the code

name attribute

The name attribute returns the name of the class, which is the name immediately following the class.

class Person { } //the Person copy the code

This refers to the instance of the class by default.

If there is this pit inside the method of the class, it is very likely to report an error
if this method is used alone. If this points to the wrong point, use the arrow function 2 and bind this in the construction method.

Getter and setter

class Person { get name () { return 'getter' } set name ( val ) { console .log( 'setter' + val) } } let jon = new Person() = 'Jon' //the setter Jon //getters duplicated code

//Class declaration cannot be repeated

class Person {}
class Person {}
//TypeError Identifier'Person' has already been declared

constructor keyword

  • constructor method
  • The constructor method is the default method of the class. When an object instance is generated by the new command, this method is automatically called (the instance object this is returned by default).
  • A class must have a constructor method. If it is not explicitly defined, an empty constructor method will be added by default.
  • A class can only have one special method named "constructor". If the class contains multiple constructor methods, a SyntaxError will be thrown.
class Person { constructor ( x, y ) { this .x = x //Return the instance object by default this this .y = y } toString () { console .log( this .x + ', ' + this .y) } } Copy code

What is constructor?

Each class must have a constructor. If there is no explicit declaration, the js engine will automatically add an empty constructor.

class person3 { } //Equivalent to class person3 { constructor () {} } Copy code

Note that when declaring a method in a class, do not use a comma before the method without adding the function keyword, otherwise an error will be reported. All the methods defined in the class are non-enumerable.

Note that the properties of the same instance as es5 are defined on the prototype unless they are explicitly defined on itself (that is, this object).

class Point { constructor ( x,y ) { this .x = x; this .y = y; } toString () { return `this.x + this.y` ; } } var point = new Point(); point.toString() //(2,3) point.hasOwnProperty( "x" ) //true point.hasOwnProperty( "y" ) //true Here x&&y are the properties of the instance object point itself (because it is defined in this Variable)//So it returns true point.hasOwnProperty( "toString" ) //false toString is the property of the prototype object (because it is defined on the Point class)//So it returns false point._proto_.hasOwnProperty( "toString" ) //true //Add two instances var p1 = new Point(); var p2 = new Point(); p1._proto_ === p2._proto_ //true This is not recommended.//In the above code, p1 and p2 are both instances of point. Their prototypes are both Point.prototype, so the _proto_ attributes are equal.//In other words may be added as a "category" attribute instance by _proto_ method copy the code

super keyword

The super keyword is used to access and call the function on the parent class. You can call the constructor of the parent class or the ordinary function of the parent class.

class Father { constructor ( surname ){ this .surname = surname } say () { console .log( "Your name" + this .surname) //Your name hammer } } //Here the child inherits the parent class class Son extends Father { constructor ( surname,name ) { super (surname) this .name = name } say () { super .say() console .log( 'call ordinary' + this .name) //call ordinary iron } } var son = new Son( 'hammer' , "iron" ) son.say() console .log(son) //Print {surname: "hammer", name: " " //In the constructor of the subclass, if you use super to call the constructor of the parent class, you must write it before this.//You can also call the parent Ordinary methods of the class//In es6, the class has no variable promotion and must be defined first before the common attributes and methods in the object class can be instantiated. This is called through this //What does this in the class represent //The constructor in this points to the instance object //Method on behalf of the caller which this method of copying the code

extends inheritance

Inheritance means that the child inherits the parent industry. In reality, the child class in the program can inherit some of the methods and attributes of the parent class.
A major feature of object-oriented inheritance can reduce code writing and facilitate the extraction of public content. Keyword extends

class Father { constructor ( surname ){ this .surname = surname } say () { //There is a method in the parent Father say() console .log( "your name" + this .surname) } } class Son extends Father { //Here Son inherits the method keyword extends in Father parent } var Son = new new Son ( 'hammer' ) //out new new instance son.say () //print your name hammer copy the code

Class method

class Person { constructor ( name, age ) { //Constructor, receiving a name and age this .name = name this .age = age } say () { ////Note that a method of the class which do not add method, key method and resolution method spaced between function Console .log ( "hello" , the this .name) } //....sayWhat(){} saySome(){} } var Person = new new the Person ( 'Wang' , 44 ) //call the method person.say () //Pharaoh //method on the instance of the class is actually calling method calls the prototype copy the code

Class expression

Like functions, calss can also be defined in the form of expressions. Class expressions can be used to write classes that can be executed immediately!!
Note that class expressions similar to function expressions cannot be used before they are evaluated (that is, called before assigning variables) But unlike function definitions, although function declarations can be promoted, classes cannot

Class expressions (class definitions)
Class expressions can be named or anonymous

Anonymous class

let Person = class { constructor ( x, y ) { this .x = x this .y = y } } Copy code

Named class

let Person = class Person { constructor ( x, y ) { this .x = x this .y = y } } const Mycalss = class Me { getClassName () { return; } }; //Use an expression here (that is, assign a variable) //Note! The name of this class is Mycalss instead of Me Me. It can only be used in the internal code of the Class to refer to the current class let inst = new Mycalss(); inst.getClassName () //Me Me.Name //Me given only defined within Class duplicated code

Use class expressions to write classes that are executed immediately!!

let person = new class { constructor ( name ) { this .name = this .name; } sayname () { console .log( this .name); } } ( "Normally stuff" ) //this code in the class instance is executed immediately copy the code

Supplementary case

class Animal { //class defines a "class" constructor () { this .type = 'animal' //There is a constructor method, which is the construction method//this keyword represents the instance object } //The methods and properties defined in the constructor are the instance object's own, but outside the constructor Methods and properties are the attention that all instance objects can share! says ( say ) { console .log( this .type + 'says' + say) } } let animal = new Animal() animal.says( 'hello' ) //animal says hello class Cat extends Animal { //Inheritance is achieved through the extends keyword//A Cat class is defined, which inherits all the attributes and methods of the Animal class through the extends keyword. constructor () { super () //The super keyword refers to the instance of the parent class (that is, the this object of the parent class). The subclass must call the super method in the constructor method, otherwise an error will be reported when the instance is created. this .type = 'cat' //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 the this object. } } let cat = new Cat() cat.says ( 'Hello' ) //(Pic) CAT Hello duplicated code

See git for details