JavaScript object oriented

1-1 introduction to object-oriented programming

1-1.1 two programming ideas:

• Process oriented
• object-oriented

1-2 POP (process oriented programming)

Process oriented is to analyze the steps needed to solve the problem, and then use functions to realize these steps step by step. When using, just call them one by one.

For example: put the elephant into the refrigerator and face the process:
	1. Open the fridge,
	2. Put the elephant in,
	3. Close the refrigerator door.

Process oriented is to solve problems according to the steps we have analyzed.

1-3 Object Oriented Programming (OOP)

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

For example: put the elephant into the refrigerator, object-oriented approach: first find out the objects and write out the functions of these objects.
	1. Elephant object.
		* go in
	2. Refrigerator object.
		* open
		* close
	3. Use the function of elephant and refrigerator.

Object oriented is to divide problems by object functions, not steps.

1. In the idea of object-oriented program development, each object is the function center and has a clear division of labor.
2. Object oriented programming has the advantages of flexibility, code reusability, easy maintenance and development. It is more suitable for large-scale software projects with multi person cooperation.
3. Object oriented features:
   • Encapsulation: encapsulate code.
   • Inheritance: the son will inherit the attributes of his father.
   • Polymorphism: the same object can reflect different states at different times.

1-4 comparison between process oriented and object-oriented

1. Process oriented:

   • Advantages: higher performance than object-oriented, suitable for things closely related to hardware, such as process oriented programming adopted by single chip microcomputer.
   • Disadvantages: no object-oriented, easy to maintain, easy to reuse and easy to expand.

2. object-oriented:

   • 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.

Classes and object orientation in ES6

2-1 object oriented

1. Object-oriented is closer to our real life. We can use object-oriented to describe things in the real world, but things are divided into concrete things and abstract things.

mobile phone			  Abstract (general)
Samsung model		Specific (specific)

1. Object oriented thinking characteristics:

   • Extract (Abstract) the attributes and behaviors shared by objects, organize (encapsulate) them into a class (template).

   • Instantiate the class and get the object of the class.

In object-oriented programming, we consider which objects are there. According to the characteristics of object-oriented thinking, we constantly create objects, use objects and command objects to do things.

2-2 object

1. In real life: everything is an object. The object is a concrete thing that can be seen and touched. For example, a book, a car, a person can be an object, a database, a web page, and a connection to a remote server can also be an object.
2. In JavaScript, an object is an unordered collection of related attributes and methods. All things are objects, such as strings, values, arrays, functions, etc.
3. Objects are composed of properties and methods:
   • Attribute: the characteristic of a thing, which is represented by an attribute in an object (common noun).
   • Method: the behavior of things is expressed by means in the object (commonly used verb).

Class 2-3

1. class
   The concept of class is added in ES6. You can use the class keyword to declare a class, and then instantiate the object with this class.
   • Class abstracts the common part of an object. It generally refers to a large class
   • Object refers to a specific object that is instantiated through a class.
2. Object oriented thinking characteristics:
   • Extract (Abstract) the attributes and behaviors shared by objects, organize (encapsulate) them into a class (template).
   • Instantiate the class and get the object of the class.

2-4 creating classes

• Syntax:

class name{
	// class body
}

• Create instance:

var xx = new name()

Note: the class must instantiate the object with new.

• The simplest case

// Create class create a star class
class Star{
	
}

// Creating objects with classes
new Star()

Class 2-4 constructor

1. The constructor() method is the constructor of the class (the default method), which is used to pass parameters and return instance objects. This method is called automatically when an object instance is generated through the new command. If there is no display definition, a constructor() will be automatically created inside the class.
   • Case:

// Create class create a star class
class Star{
	constructor(uname){
		this.uname = uname
	}
}

// Creating objects with classes
var ldh = new Star('Lau Andy')
console.log(ldh.uname)
// The running result is: output Andy Lau on the console.

1. Summary:
   • Create a class through the class keyword. We still habitually define the initial capitalization of the class name.
   • There is a constructor() function in the class, which can accept the passed parameters and return the instance object at the same time.
   • constructor() function will be called automatically as long as new generates an instance. If we don't write this function, the class will also generate this function automatically.
   • The generated instance new cannot be omitted.
   • Finally, pay attention to the syntax specification. Do not add parentheses after the class name of the created class, parentheses after the class name of the generated instance, and function is not required for the constructor.

Class 2-5 addition method

• Syntax:

class Person{
	constructor(name,age){		// Constructor constructor or constructor.
		this.name = name
		this.age = age
	}
	say(){
		console.log(this.name + 'Hello')
	}
}
// 1) All functions in our class do not need to write function.
// 2) There is no need to add comma separation between multiple function methods.

• Case:

// Create class create a star class
class Star{
	constructor(uname，age){
		this.uname = uname
		this.age = age
	}
	sing(song){
		// console.log('I sing ')
		console.log(this.name + song)
	}
}

// Creating objects with classes
var ldh = new Star('Lau Andy',18)
var zxy = new Star('Xue You Zhang',20)
ldh.sing('Ice rain')
zxy.sing('Li Xianglan')
// The output result is: Andy Lau ice rain
//			 Zhang Xueyou, Li Xianglan

Class inheritance

3-1 succession

1. Inheritance in reality: children inherit their father's business. For example, we all inherit our father's surname.
2. Inheritance in programs: subclasses can inherit some properties and methods of the parent class.
3. Syntax:
   • Extensions allows subclasses to inherit the properties and methods of the parent class.

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

• Case:

	class Father{
		constructor(){
	
		}
		money{
			console.log(100)
		}
	}
	class Son extends Father{
	
	}
	var son = new Son()
	son.money()

// The output result is: output 100 on the console.

3-2 super keyword

1. 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 ordinary function of the parent class.
   • super keyword calling constructor case of parent class:

	class Father {
		construter(x,y) {
			this.x = x
			this.y = y
		}
		sum() {
			console.log(this.x + this.y)
		}
	}
	class Son extends Father {
		construter(x,y) {
			super(x,y)	// The constructor in the parent class was called.
		}
	}
	var son = new Son(1,2)
	son.sum
	
	// The output result is: output 3 on the console.

• super keyword common function case of calling parent class:

	// 1) In inheritance, if you instantiate a subclass to output a method, first see whether the subclass has this method, if so. Execute the subclass first.
	// 2) In inheritance, if there is no method in the subclass, check whether the parent class has this method. If so, execute the method of the parent class (proximity principle).

	class Father {
		say() {
			return 'I'm daddy'
		}
	}
	class Son extends Father {
		say() {
			// console.log('I'm a son ')
			console.log(super.say() + 'My son')
			// super.say() is to call the normal function say() in the parent class
		}
	}
	var son = new Son
	son.say()

// The output result is: output "I'm dad's son" on the console.

• 3-3 subclasses inherit the methods of the parent class and extend their own methods at the same time

class Father {
            constructor(x,y){
                this.x = x
                this.y = y
            }
            sum(){
                console.log(this.x + this.y)
            }
        }
        // The subclass inherits the addition method of the parent class and extends the subtraction method at the same time.
        class Son extends Father {
            constructor(x,y){
                // Use the super keyword to call the constructor of the parent class.
                // super keywords must be called before subclass this.
                super(x,y)
                this.x = x
                this.y = y
            }
            subtract(){
                console.log(this.x - this.y)
            }
        }
        var son = new Son(5,3)
        son.subtract()
        son.sum()

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

Classes and objects in ES6

Three points for attention

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