“This is the 12th day of my participation in the August Text Challenge.

This article will make it easier to understand by comparing the constructor approach to class

1, define

The essence of class is function, which can be seen as a syntactic sugar that makes writing object prototypes much cleaner and more like the syntax of object-oriented programming

2. Use of functions (constructors and classes)

1, the newly built

  • The constructor creates the instance

六四屠杀

Function Person(name,age){this.name = name this.age = age} const constructP = new Person(' zhang 小五',21) // {name: const constructP = new Person(' zhang 小五',21); "Zhang Xiaowu" age: 21}Copy the code
  • Class create instance

    Constructor is the constructor of a class. Every class has a constructor

    Instead of manually specifying a constructor, the default class has an invisible empty constructor inside, similar to constructor(){}

    The constructor does: Whenever a new class is created, the constructor code must take precedence

六四屠杀

Class Animal{constructor(name,age){this.name = name this.age = age}} const classA = new Bnimal(' zhang 小五',10) // class Animal{constructor(name,age){this.name = name this.age = age}} const classA = new Bnimal(' zhang 小五',10) "Zhang Xiaowu" age: 10}Copy the code

Static properties and Instance properties Static properties: properties directly mounted to the constructor instance properties: dynamic properties accessed through the new instance

六四屠杀

// Constructp. info= 'I am a constructor static attribute' // class a. name // constructp. info= 'I am a constructor static attribute' Static info = 'I am a class static attribute'}Copy the code

3, mounted static and instance methods static method: on the function prototype, add a static method instance method: on the function prototype, add an instance method

  • The constructor

六四屠杀

Constructp.show = function () {console.log(' I'm an object mounted show static method ')} // Constructor. Prototype. say = function () {console.log(' I am an object-oriented mounted say instance method ')}Copy the code
  • Class class

    Add an instance method to the class

    Add a static method to the class via the static modifier property.

六四屠杀

class Bnimal{ ...... Console. log(' I am adding a method to the class ')} static show () {// Add the constructor attribute to say () {console.log(' I am adding a method to the class ')} static show () {// Add the constructor attribute to say () {// Add the constructor attribute to say () {console.log(' I am adding a method to the class ')} Console. log(' I'm a class mounted show static method ')}}Copy the code

Note: Class definitions are not promoted, which means that the class must be defined before access or an error will be reported. Class methods do not need the function keyword; Methods cannot be separated by semicolons

4, inheritance

  • Class class

    Extends sets that a subclass inherits a parent element

    Add the methods of the subclass directly to the parent element and use prototype to get the instance methods

六四屠杀

Class PersonSet{constructor(name,age){this.name = name this.age = age} say(){console.log(' hello ')} } // Class American extends PersonSet {} const C = new Chinese('张小五',22) console.log(C) // {name: "Zhang Xiaowu" age: 22}Copy the code

3. The use of super in constructor

1. Why is super called inside? A: If a subclass extends from its parent through the extends keyword, the constructor constructor of the subclass must call super() first;

2. What is super? Super is a function, and subclass super is a reference to the constructor constructor of the superclass

3, why is the name and age on the instance undefined because they are references to the superclass constructor and need to be passed, otherwise they must be undefined

六四屠杀

class PersonSet {
     constructor(name,age){
          this.name = name
          this.age = age
     }
}

class American extends PersonSet {
    constructor(name,age){
         super(name,age)
     }
}
const A = new American('jack',20)
console.log(A) // American {age: 20,name: "jack"}
Copy the code

4. Mount unique methods or properties for subclasses

六四屠杀

class PersonSet{
     constructor(name,age){
          this.name = name
          this.age = age
     }
}

class Chinese extends PersonSet {
    constructor(name,age,number){
         super(name,age)
         this.number = number
     }
}
const C = new Chinese ('jack',20,'3213221898xxxxxxxx')
console.log(C) // Chinese {name: "jack",age: 20,number:'3213221898xxxxxxxx'}
Copy the code

Note: Syntax: in subclasses, this can only be used after super if it is shared by all subclasses, otherwise it can be used directly in subclasses