1 object oriented overview

1.1 process oriented and object-oriented

Process oriented: process oriented is to analyze the steps needed to solve the problem, then implement these steps one by one with functions, and call them in turn when using. The core of process oriented is the process of solving problems.

Object oriented: object oriented is to decompose the problem to be solved into objects. The object is not established to realize a step, but to describe the behavior of each object in solving the problem. The core of object-oriented is object.

1.2 advantages of object-oriented

1. Deeper modularity and strong encapsulation.
2. It is easier to implement complex business logic.
3. It is easier to maintain, reuse and expand.

1.3 object oriented features

1. Encapsulation: an object is a combination of attributes (static features) and behaviors (dynamic features) (encapsulation).
2. Inheritance: the properties and behaviors of the parent class (base class) can be derived from the child class. Subclasses do not need to be defined repeatedly.
3. Polymorphism: when the same message is passed to different objects, the results are different.

2 ES6 object oriented syntax

2.1 classes and objects

Class: things are divided into concrete things and abstract things. When the word "book" appears in our mind, we can roughly imagine the basic appearance and characteristics of the book. This process is abstraction, and the result of abstraction is class.
That is, a class is an abstraction of an object with the same properties and behavior.

Object: when we pick up a real book in our hands, the book has its own title, author, page number and other information. Such specific things are objects.
In other words, an object is an instance of a class (the concrete embodiment of a class).

2.2 basic syntax of class

Class keyword: used to define a class. constructor() construction methods can be defined in the class to initialize the members of the object.

Methods for defining classes:

class Class name {
    constructor([parameter]) { //Constructor: used to initialize the members of the object
        //Method body;
    }
}

Example:

class Student { //Use the class keyword to define a class
    constructor(na, a) { //Constructor: used to initialize the members of the object
        this.name = na;
        this.age = a;
    }
}

Where name in "this.name" is the attribute of the object

2.3 creating objects with classes

The syntax is:

var Object name = new Class name([parameter]);

Example: suppose you have defined a Person class with a name attribute, you can create an object and access it with the following methods

// Creating objects with classes
var p1 = new Person('Zhang San');// Create p1 object
var p2 = new Person('Li Si');// Create p2 object
console.log(p1.name);// Access p1 object's name attribute
console.log(p2.name); // Access p2 object's name attribute

2.4 access of object members

The syntax for accessing object members (including properties and methods) is as follows:

Object name.Attribute name

Or:

 Object name.Method name([parameter])

Note: in ES6, the constructor constructor cannot be called explicitly

Methods in class 2.5

In the following example, a Say() method is defined and called

Example:

class Person {//Define a Person class
    constructor(name) {
        this.name = name;//Initializes the members of the object
    }
    say() {	// Define a say() method in the class
        console.log("Hello, my name is" + this.name);
    }
}
var p1 = new Person("Orange cat is not fat");
p1.say();

The result is: Hello, my name is orange cat. I'm not fat

2.6 succession

Inheritance: in JavaScript, inheritance is used to represent the relationship between two classes. Subclasses can inherit some properties and methods of the parent class. After inheritance, they can also add their own unique properties and methods.

Parent class: also known as base class or superclass, the inherited class
Subclass: also known as derived class, a class derived from the parent class

Implementation of inheritance: Extensions
The syntax is:

class Subclass name extends Parent class name {
    constructor() {
    }
    //Other member methods
}

Example: defining parent and child classes

// Prepare a parent class first
class Father {
    constructor() { }
    money() { console.log(100); }
}
// The subclass inherits the parent class
class Son extends Father { }

To call a method in a parent class:

// Create subclass objects
var son = new Son();
son.money();

The result is: 100

2.7 super() keyword

super keyword: super keyword is used to access and call the methods of the object on the parent class. You can call the construction method of the parent class or the normal method of the parent class. That is, the upper keyword represents the parent class and is used to access and call the members of the parent class.

The construction method of calling the parent class: calling the construction method of the parent class in the construction method of the subclass. In inheritance, when creating a subclass object, the constructor of the parent class must be called first, and then the constructor of the subclass. The call of the constructor of the parent class must be the first statement in the constructor of the subclass.

Syntax of calling constructor of parent class:

super([parameter]);

Call the normal method of the parent class:

super.Method name([parameter])

Example: adding a unique method to a subclass

class Father {//Define a parent class
    constructor(x, y) {//Members of the initial session object
        this.x = x;
        this.y = y;
    }
    sum() {//Define a method
        console.log(this.x + this.y);
    }
}
class Son extends Father {//The subclass Son inherits the parent class Father
    constructor(x, y) {
        super(x, y); // super must be called before the this of the subclass.
        this.x = x;
        this.y = y;
    }
    subtract() {// Define a subclass specific method
        console.log(this.x - this.y);
    }
}
var son = new Son(5, 3);//Instantiate object
son.sum(); // Output result: 8
son.subtract(); // Output result: 2

The result is: 8 2

2.8 instance members and static members

Instance members: object members
Static member: a member shared by all objects that does not belong to a specific object, also known as class member

Access in ES6:

Class name.member name

Access in ES5:

Construction method name.member name

3. Classes defined in Es5

Defining classes in ES5: implemented by constructors

Example:

function Student(name, age) { //Constructor. It is recommended to capitalize the initial letter. Student can be regarded as a class
    this.name = name;
    this.age = age;
}

Create objects of class:

var s1 = new Student("Zhang San", 19);

4 case exercises

Design the Employee class to record the employee's situation, including name, annual salary and employment time. It is required to define MyDate class as the employment time, including the year, month and day of work, and set the Employee class with corresponding methods (construction method and information display method).

class MyDate {//Define the MyData class as the time of employment
    constructor(year, month, date) {//Year, month and day
        //Initializes the members of the object
        this.year = year;
        this.month = month;
        this.date = date;
    }
    show() {//Construct a method to display employment time
        console.log(this.year + "year" + this.month + "month" + this.date + "day")
    }
}
class Employee {//Define Employee class
    constructor(name, salary, workDate) {//Name, salary and employment time
        this.name = name;
        this.salary = salary;
        this.workDate = workDate;
    }
    disp() {//Construct a method to display name, annual salary and employment time
        console.log("full name:" + this.name);
        console.log("Annual salary:" + this.salary);
        console.log("Employment time:");
        this.workDate.show()
    }
}
var work1 = new MyDate(2021, 6, 15);//Create employment time object
var e1 = new Employee("Zhou Yu", 400000, work1);//Create employee object
e1.disp();