1, Pop (process oriented programming)

Object oriented is to decompose transactions into objects, and then divide and cooperate among objects.

1. Example understanding

Let's take an example:
Put the elephant in the fridge.

Process oriented programming is:
Open the refrigerator door – > put the elephant in – > close the refrigerator door

Object oriented is to abstract the object first, and then find out the attribute method of the object:
1. Elephant:

• go in

2. Refrigerator

• open
• close

2. Characteristics of object-oriented programming

1. Encapsulation
2. Inheritance
3. Polymorphism

3. Advantages and disadvantages of object-oriented programming

• Advantages: easy to maintain, reuse and expand. Due to the characteristics of object-oriented encapsulation, inheritance and polymorphism, a low coupling system can be designed to make the system more flexible and easier to maintain.
• Disadvantages: lower performance than process oriented

2, Classes and objects

1. Class

Class abstracts the common part of an object. It generally refers to a large class

2. Object

Object refers specifically to a class, which instantiates a specific object through a class.
Objects are composed of properties and methods:

• Attributes: the characteristics of things, which are represented by attributes in objects
• Method: the behavior of things is represented by methods in objects

3. Create classes and instantiate objects

Create class
js generally uses class to create a class. Here we use the class keyword to create a class.
Here, constructor is the constructor of the class, which is used to pass parameters and return the instance object. When the object instance is generated through the new command, this method will be called automatically. If there is no display definition, a constructor() will be automatically created inside the class.

// Construction class
        class Car {
            // Constructor, which is automatically executed after new, and returns the instance object at the same time
            constructor(color, brand) {
                this.color = color;
                this.brand = brand;
            }

            // Add method
            run() {
                console.log("The car is running!");
            }
        }

Instantiate object
We use new to create objects

var car = new Car('red', 'toyota');

3, Class inheritance

1. Inherit

Subclasses can inherit some properties and methods of the parent class. The extensions keyword is generally used.

Syntax:

class Father{   // Parent class
} 
class  Son extends Father {  // The subclass inherits the parent class
}       

example:

class Father {
      constructor(surname) {
        this.surname= surname;
      }
      say() {
        console.log('What's your last name' + this.surname);

       }
}
class Son extends Father{  // In this way, the subclass inherits the properties and methods of the parent class

}
var damao= new Son('Liu');
damao.say();     // Your last name is Liu 

2. super keyword

super keyword is used to access and call functions on the parent class of an object. You can call the constructor of the parent class or the normal function of the parent class.
Generally used for parameter transfer

class Father {
     say() {
         return 'I'm daddy';

     }
}
class Son extends Father { // In this way, the subclass inherits the properties and methods of the parent class
     say() {
          // Super. Say() super calls the method of the parent class
          return super.say() + 'My son';
     }
}
var damao = new Son();
console.log(damao.say());  // I'm daddy     

Note: the subclass uses super in the constructor and must be placed before this (the constructor of the parent class must be called first, and the constructor of the subclass must be used)

3. Pointing problem

Here we give an example to explain. Let's write a button on the page first. Then construct a class and create an instantiated object.

        class Star {
            constructor(name, age) {
                this.name = name;
                this.age = age;
                // this.sing();
                this.btn = document.querySelector("button");
                this.btn.onclick = this.sing;
            }
            sing() {
                // this here points to his caller btn***
                console.log(this.name); //undefined
                console.log(this);
            }
            dance() {
                _that = this;
                console.log(this);
            }
        }
        var ldh = new Star('ldh'， 18);

When we instantiate the star class, what happens when we call the sing() method? Will ldh be output? The answer is undefined because this in the sing() method does not point to this object, but to its caller btn.
We can define a that outside to keep the point of this, and then we can output it normally.

4, Summary of points for attention

1. In ES6, classes do not have variable promotion, so you must define classes before instantiating objects through classes
2. The common properties and methods in the class must be used with this
3. this in the class points to the problem
4. This in the constructor points to the instance object, and this in the method points to the caller of this method

Next: JavaScript advanced - (2) constructor, prototype and inheritance