Clear use class of ES6

definition

Class is the syntax sugar of constructor and prototype chain.

There are two ways to define a class

class Student {
}
var Student = class {
}

Some browsers may not be able to parse the syntax of es6 or above. At this time, you need to parse the code into the syntax recognized by the browser through babel. After the syntax of defining the class is compiled through babel, the constructor defined through function is used.

Class and constructor are the same. They are created with the new keyword and have the prototype attribute

class Student{}
var student = new Student()
console.log(Student.prototype)
console.log(Student.prototype.constructor)
console.log(student.__proto__ === Student.prototype)
console.log(student instanceof Student)
console.log(typeof Student)

The results are as follows

Class method

Construction method

The constructor is used to define the construction method of the class. When creating an instance of the class through the new keyword, the code in the construction method will be executed

class Student {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
}
var student = new Student('alice', 18)
console.log(student)

The execution result is as follows: an instance object of Student is created

babel analysis results are as follows

Example method

An instance method is a method mounted on the prototype of a class (constructor). It can be used by all instance objects and will not be saved on each instance object

class Student {
  constructor(name, age) {
    this.name = name
    this.age = age
  }
  studying() {
    console.log(`${this.name} likes studing~`)
  }
}
var student = new Student('kiki', 16)
console.log(student)
student.studying()

The results are as follows

Accessor method

Accessor methods can be used to get / modify properties in a class

class Student {
  constructor(){
    this.mainSubject = 'Chinese'
  }
  get subject(){
    console.log('Get major')
    return this.mainSubject
  }
  set subject(value){
    console.log('Modify major')
    this.mainSubject = value
  }
}
var student = new Student()
console.log(student)
student.mainSubject = 'Math'
console.log(student)

The results are as follows

Static method

It is defined on the class (constructor) and can only be used by the class (constructor) itself

class Student {
  static showInfo(){
    console.log('I am a Student class')
  }
}
Student.showInfo()

The results are as follows

inherit

It is simpler to implement inheritance in a class than in a constructor. The inheritance relationship between the two classes can be realized through the extends keyword.

class Person{
  eating(){
    console.log('person eating')
  }
}
class Student extends Person{
}
var student = new Student()
console.log(student)
student.eating()

The results are as follows

If you want to share the data in the construction method, you need to implement it through super

class Person{
  constructor(name, age){
    this.name = name
    this.age = age
  }
  eating(){
    console.log('person eating')
  }
}

class Student extends Person{
  constructor(name, age, stuNo){
    super(name, age)
    this.stuNo = stuNo
  }
  eating(){
    super.eating()
    console.log('student eating')
  }
}

var student = new Student('kiki', 16, 1)
console.log(student)
student.eating()

The results are as follows

Inherit built-in classes

When we need to extend the built-in functions of javascript, we can inherit from the built-in functions. For example, to supplement the array, add a method to return the first element in the array.

class iArray extends Array {
  firstItem(){
    return this[0]
  }
}
let arr = new iArray(1, 2, 3)
console.log(arr)
console.log(arr.firstItem())

The results are as follows

Mix in

javascript can only inherit from one parent class and does not support multiple parent classes. When a child class wants to obtain the properties and methods of multiple parent classes, it can customize the mixin method to realize the inheritance relationship

function mixinRunner(BaseClass) {
  return class extends BaseClass {
    running() {
      console.log('running')
    }
  }
}
function mixinEater(BaseClass){
  return class extends BaseClass {
    eating() {
      console.log('eating')
    }
  }
}
class Person {
 
}
const Student = mixinEater(mixinRunner(Person))
const student = new Student()
student.running()
student.eating()

The results are as follows

polymorphic

When different data type operations perform the same operation, the behavior is inconsistent, which is called polymorphism.

function calcArea(foo) {
  console.log(foo.getArea())
}

var circle = {
  radius: 6,
  getArea() {
    return this.radius * 3.14
  }
}

function Person() {
  this.getArea = function(){
    return 20
  }
}

calcArea(circle)
calcArea(new Person())

The results are as follows

Execute the calcArea function twice above. The parameters passed in are ordinary object and instance object respectively. Execute their respective getArea methods, and the final results are also different

The above is the specific introduction to the use of ES6 and other class es. There are still many places for developers to master about js advanced. You can see other blog posts I wrote and keep updating~

Tags: Javascript ECMAScript Class inheritance

Posted on Sat, 20 Nov 2021 20:55:45 -0500 by GoncaloF