This is the 31st day of my participation in the August More Text Challenge

1. Create a class

<script>
      Create a Person class
      class Person{}// Create an instance object of Person
      const p1 = new Person();

      console.log(p1)
  </script>
Copy the code

The red one represents who the instance object came out of. The blue ones are instance objects.Why does he want to show who made it? If we had another Dog class, we could print it out and tell it apart.

2. Pass parameters to the class

Passing parameters

 // Create an instance object of Person
  const p1 = new Person('tom'.18);
Copy the code

Receive parameters

    Create a Person class
      class Person{
        // constructor method
        constructor(name,age){
          // Who is this in the constructor? An instance object of the ---- class
          this.name = name
          this.age = age
        }
      }
Copy the code

Who is this in the constructor? We create two instances p1 and p2, this is p1 and p2 respectively

    Create a Person class
      class Person{
        // constructor method
        constructor(name,age){
          // Who is this in the constructor? An instance object of the ---- class
          this.name = name
          this.age = age
          console.log(this."this")}}// Create an instance object of Person
      const p1 = new Person('tom'.18);
      const p2 = new Person('bob'.19)
Copy the code

Can I not use the constructor? In theory you don’t have to.

3. General method

I’m going to write a general method in my class, what is a general method? That’s the method that we’re customizing in addition to the constructor.

    Create a Person class
      class Person{
        // constructor method
        constructor(name,age){
          // Who is this in the constructor? An instance object of the ---- class
          this.name = name
          this.age = age
          // console.log(this,"this")
        }
        // General method
        speak(){
          console.log(I was `The ${this.name}This year, IThe ${this.age}At the age of `)}}// Create an instance object of Person
      const p1 = new Person('tom'.18);
      const p2 = new Person('bob'.19);
      // Call the method
      p1.speak()
      p2.speak()
Copy the code

If we look closely, we don’t see the speak() method in the instance object. So where does the speak method go? —Class on a prototype object for instance use“Prototype”

Think again, who is “Speak this”? When you call speak from instance Person, this in Speak is the Person instance.

4. Class inheritance

4.1 Do not write a constructor

Let’s define a class Student, which inherits from Person, and we’re not writing a constructor in Student, because we already have a constructor in Person, so we don’t have to write a constructor.

 <script>
      Create a Person class
      class Person{
        // constructor method
        constructor(name,age){
          // Who is this in the constructor? An instance object of the ---- class
          this.name = name
          this.age = age
        }
        // General method
        speak(){
          console.log(I was `The ${this.name}This year, IThe ${this.age}At the age of `)}}// Create a class Student that inherits from Person
      class Student extends Person{}const s1 = new Student('xiao zhang'.15)
      console.log(s1)
  </script>
Copy the code

4.2 When is a constructor needed

So when do we write a constructor? If we want to pass an additional parameter grade to the student class. That is, when Student and its parent Person pass different numbers of arguments.

 // Create a class Student that inherits from Person
      class Student extends Person{
        constructor(name,age,grade){
           this.name = name
           this.age = age
           this.grade = grade 
        }
      }
      const s1 = new Student('xiao zhang'.15."Third grade")
Copy the code

I got an error, so I need to say super

  class Student extends Person{
        constructor(name,age,grade){
          // Put it before all
          super(name,age)
          // Only this property is new
          this.grade = grade 
        }
      }
Copy the code

4.3 Call the superclass method

So, can Student call the speak method at this point?

const s1 = new Student('xiao zhang'.15."Third grade")
s1.speak()
Copy the code

Yes, so where is its speak? Follow the prototype chain

4.4 Override parent methods

I want the students to say the grade as well. We need to write another speak method in the Student class. That is, override the superclass method

     // Create a class Student that inherits from Person
      class Student extends Person{
        constructor(name,age,grade){
          // Put it before all
          super(name,age)
          this.grade = grade 
        }
        speak(){
          console.log(I was `The ${this.name}This year, IThe ${this.age}Years old, I readThe ${this.grade}Grade `)}}const s1 = new Student('xiao zhang'.15."Third grade")
      s1.speak()
      console.log(s1)
Copy the code

The blue one is on the Student prototype, and the red one is on the Person prototypeStudent also wants to have a unique method, study

study(){
// When study is called from Student, this in study is Student instance
    console.log("i like study")}Copy the code

5. Conclusion:

• A constructor in a class is not required to perform initialization operations on the instance, such as adding custom attributes.
• If class A inherits from class B, and class A writes the constructor, then super in the constructor of class A must be called
• The methods defined in the class are placed on the prototype object of the class for instance to use.