1. Introduction to Object-Oriented Programming
1.1 Two programming ideas
- Process-oriented
- Object-oriented
1.2 Process-oriented programming (POP)
Process-oriented is to analyze the steps needed to solve the problem, and then use functions to implement these steps step by step, and then call them one by one in turn.
1.3 Object Oriented Programming (OOP)
Object-oriented is to decompose affairs into objects, and then divide labor and cooperation between objects.
Advantages: flexible, code reusable, easy to maintain and develop, suitable for large-scale software projects with multi-person cooperation.
Features: encapsulation, inheritance, polymorphism
1.4 Comparison of process-oriented and object-oriented
Process-oriented:
- Advantages: higher performance than object-oriented, suitable for things that are closely related to hardware, such as the surface process programming used by single-chip microcomputers
- Disadvantages: no object-oriented, easy to maintain, easy to reuse, easy to expand
Object-oriented:
- Advantages: easy to maintain, easy to reuse, easy to expand, because object-oriented has the characteristics of encapsulation, inheritance, and polymorphism, a low-coupling system can be designed, making the system more flexible and easier to maintain
- Disadvantages: performance is lower than process-oriented
2. Classes and objects in ES6
2.1 Object
In real life: Everything is an object, and the object is a concrete thing, a tangible object.
In JavaScript, an object is a set of unordered collections of related properties, and all things are objects.
Objects are composed of properties and methods:
- Attributes: the characteristics of things, represented by attributes in objects (common nouns)
- Method: the behavior of food, represented by a method in the object (common verb)
2.2 class
The concept of class is added in ES6. You can use the class keyword to declare a class, and then use this class to instantiate the object.
The class extracts the common part of the object, which refers to a certain category
Object refers to a certain one, a specific object is instantiated through the class
2.3 Create a class
grammar:
class name {
//class body
}
Create an instance:
var xx = new name();
Note: the class must use new to instantiate the object
2.4 Class constructor constructor
The constructor() method is the constructor (default method) of the class, used to pass parameters and return an instance object. This method is automatically called when an object instance is generated by the new command. If there is no display definition, the class will automatically create a constructor() for us
class Star {
constructor(uname,age) {
this.uname = uname;
this.age = age;
}
}
var ldh = new Star('刘德华'，18)；
2.5 Class add method
grammar:
class Person{
constructor (name,age) {
this.name = name;
this.age = age;
}
say() {
console.log(this.name + '你好');
}
}
note:
- All functions in the class do not need to write function
- There is no need to add a comma between multiple function methods
3. Class inheritance
3.1 Inheritance
Subclasses can inherit some properties and methods of the parent class
grammar:
class Father {
//父类
}
class Son extends Father {
//子类继承父类
}
3.2 super keyword
The super keyword is used to access and call functions on the parent class of the object. You can call the parent class 构造函数, you can also call the parent class普通函数
class Father {
constructor(x,y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
class Son extends Father {
constructor(x,y) {
super(x,y); //调用了父类中的构造函数
}
}
var son = new Son(1,2);
son.sum();//3
// super 关键字调用父类普通函数
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say() {
console.log(super.say() + '的儿子');
}
}
var son = new Son();
son.say();
// 1. 继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类的方法
// 2. 继承中，如果子类里面没有，就去查找父类有没有这个方法，如果有，就执行父类的这个方法
class Father {
constructor(x,y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
// 子类继承父类加法方法 同时扩展减法方法
class Son extends Father {
constructor(x,y) {
// 利用super 调用父类的构造函数
// super 必须在子类this之前调用
super(x,y);
this.x = x;
this.y = y;
}
subtract() {
console.log(this.x - this.y);
}
}
var son = new Son(5,2);
son.sum();// 7
son.subtract();// 3
Three points of attention
- In ES6, there is no variable promotion for classes, so the class must be defined before the object can be instantiated through the class
- The common attributes and methods in the class must be used with this
- This in the class points to the problem
<button>点击</button>
<script>
var that;
class Star {
constructor(uname, age) {
// constructor 里面的this指向的是创建的实例对象
that = this;
this.uname = uname;
this.age = age;
this.btn = document.querySelector('button');
this.btn.onclick = this.sing;
}
sing() {
// 谁调用指向谁
console.log(this) // <button>点击</button>
console.log(this.uname); // undefined
console.log(that.uname); // 刘德华
}
}
var ldh = new Star('刘德华');