Basic syntax of ES6 class

Posted by Assorro on Sat, 29 Jan 2022 10:20:19 +0100

1, Basic concepts of class

class writing is just a syntax sugar. It just makes the writing of object prototype clearer and more like the syntax of object-oriented programming
The internal default of classes and modules is strict mode
Class does not have variable promotion

2, constructor method

1. Constructor method is the default method of the class. It will be called automatically when an object instance is generated through the new command. A class must have a constructor method. If there is no explicit definition, an empty constructor method will be added by default.

class Point {
}

// Equivalent to
class Point {
  constructor() {}
}

2. The data type of a class is a function, and the class itself points to a constructor

class Point {
  // ...
}

typeof Point // "function"
Point === Point.prototype.constructor // true

3, Instance of class

class Point {
  // ...
}

// report errors
var point = Point(2, 3);

// correct
var point = new Point(2, 3);

Like ES5, all instances of a class share a prototype object.

var p1 = new Point(2,3);
var p2 = new Point(3,2);

p1.__proto__ === p2.__proto__  // true

4, Instance property, static property, static method

ES6 clearly stipulates that Class has only static methods and no static attributes.
Characteristics of static attributes and methods:
① The properties and methods that will not be owned by the class instance are only owned by the class itself
② Can only be called through class

ES7 has a proposal for static attributes, which is currently supported by Babel transcoder.
This proposal provides a new way to write instance attributes and static attributes.

1. Instance properties of class
Previously, instance properties were defined in the constructor. In es7, instance properties of a class can be written directly into the class using equations.

Examples in react

class ReactCounter extends React.Component {
  // Old writing
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  
  // New writing method of es7
  state = {
    count: 0
  };
}

2. Static properties of class
Static attribute refers to the attribute of Class itself, that is, Class Propname instead of the attribute defined on the instance object (this).

// Old writing
class Foo {
}
Foo.prop = 1;

// neographism
class Foo {
  static prop = 1;
}

3. Static method of class
Class is equivalent to the prototype of an instance. All methods defined in the class will be 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, which is called "static method".

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod() // TypeError: foo.classMethod is not a function

5, Class extensions

class Foo {
  // es7 writing method, static attribute
  static age = 22
  static classMethod() {
    return 'hello'
  }
  // es7 writing method, instance attribute
  state = {
    name: 'aLiang',
  }

  eatFoo = name => {
    return name
  }
}

class Bar extends Foo {
  // es6 writing method
  // constructor(props) {
  //   super(props)
  //   this.sex = 'male'
  // }

  // es7 writing method, instance attribute
  sex = 'male'

  // Static method
  static classMethod() {
    return super.classMethod() + ', too'
  }
}

const bar = new Bar()

// Characteristics of static attributes and methods:
// 1. Can be inherited
// 2. It can only be called through the class, and the class itself has
console.log(Bar.classMethod()) // 'hello, too'
console.log(Bar.age) // 22

// The instance object does not access static properties and methods
console.log(bar.sex) // 'male '
console.log(bar.eatFoo('bar')) // 'bar'
console.log(bar.state.name) // 'aLiang'

I think this article is well written. I hope to praise, collect and pay more attention. I will update the dry goods from time to time every month. Thank you!

Articles you may be interested in:

Topics: Javascript

Programmer Think