Introduction to object-oriented programming
Introduction to object-oriented programming
1 object-oriented programming oop (object Orinted programming)
Object-oriented is to decompose things into objects, and then by the division of labor between the objects.
Example: Put the elephant in the refrigerator, divided into three steps 1. 2 3
Object-oriented is to divide the problem by the function of the object, not the step
(tractor) There are brooms on it)
Object-oriented programming has the advantages of flexibility, code reusability, easy maintenance and development, and is more suitable for large-scale software projects with multi-person cooperation.
Three characteristics of object-oriented
- Encapsulation
- inherit
- Polymorphism
Object-oriented thinking
- Extract (abstract) common attributes and behaviors of objects and encapsulate them into a class (template)
- Instantiate the class and get the object of the class
For example
Example: Mobile phone is an abstract (referred to in general, not clear)
Xiaomi (Apple) mobile phone. The specific (specifically)
Xiaomi and Apple are both mobile phones, and there are many similarities, such as weight and materials.
We can extract these The same point, encapsulate into a template, and then when you need to make a mobile phone, you only need to use this template
In object-oriented programming, we only need to consider which objects are there. According to the object-oriented way of thinking, we constantly create objects, use objects, and direct them to do things.
2 classes and objects
Object
In real life, everything is an object, and an object is a specific thing, and everything you can see and touch is an object, such as paper.
In js, an object is a set of unordered collections of related properties and methods, all things are objects, such as strings
- Attributes: the characteristics of things, represented by attributes in the object
- Method: the behavior of things, represented by methods in the object
Class
You can use a class keyword to declare a class, and use this class to instantiate an object.
Class abstracts the public part of an object. It refers to a large class in general, and an
object refers specifically to a certain object. A specific object is instantiated through the class.
For example, if you want to make a BMW car, the drawing is just a class, which is more abstract. We can make many BMW cars through this drawing.
Class constructor constructor
The constructor() method is the constructor (default method) of the class. It is used to pass parameters and return the instance object. The object instance is generated by the new command. This method is automatically called. If there is no display declaration, a constructor() will be automatically created inside the class.
- Create class
//创建一个类
class Star {
constructor (name){
this.name=name
}
}
//利用类创造对象 new
var star = new Star('没头发')
console.log(star.name);//没头发
//通过class 关键字创建类 类名要首字母大写
// 类里面有个constructor函数，可以接受传递进来的参数，同时返回实例对象
// constructor 函数，只要new生成实例，就会自动调用，就算不写，类也会自动生产
//创建类时，不加小括号，生成实例加 构造函数不需要加 function
- Add a common method to the class
class Star {
constructor (name){
this.name=name
}
sing(song){
console.log(this.name+' 唱的 '+song);
}
}
var star = new Star('没头发')star.sing('冰雨') // 没头发 唱的 冰雨
//类里所有的方法都不需要写function
//多个函数方法之间不加，
3 types of inheritance
The class inherits the extends and super keywords
Inheritance in real life, the inheritance of the parent's business , the inherited subclass in the program inherits some methods and properties of the parent class
class Father {
constructor(x,y){
this.x=x
this.y=y
}
money(){
console.log(100);
}
sum(){
console.log(this.x+this.y);
}
}
class Sonextends Father{
constructor(x,y){
this.x=x
this.y=y
}
}
var son = new Son(1,2)
son.money() //100
son.sum() //Must call super constructor in derived class before accessing 'this' or returning from derived constructor
// this指向问题 因为sum中的this指向的是父类不是子类
class Father {
constructor(x,y){
this.x=x
this.y=y
}
sum(){
console.log(this.x+this.y);
}
}
class Sonextends Father{
constructor(x,y){
super() //调用了父类的构造函数
}
}
var son = new Son(1,2)
son.sum() //3
Super calls the normal functions of the parent class and the rules for finding attributes in inheritance
When extends is not written
class Father {
say(){
return '父类 '
}
}
class Son{
say(){
console.log('儿子');
//super.say() 就是调用父亲中的函数 say()
}
}
var son = new Son()
son.say()//儿子
When there is extends, the principle of proximity
class Father {
say(){
return '父类 '
}
}
class Son extends Father{
say(){
console.log('儿子');
}
}
var son = new Son()
son.say() //儿子
- In inheritance, if the subclass wants to output a method, first find out if there is such a method in the subclass, and if there is, execute the method of the subclass
- If not in the subclass, search in the parent class, if there is, execute the method in the parent class (the principle of proximity)
Super's attention
super must be placed before this in the subclass
4 Two points of attention when using classes
- In es6, there is no variable promotion, so the class must be defined before the object can be instantiated through the class
var star = new Star('没头发')
class Star {
constructor (name){
this.name=name
}
sing(song){
console.log(this.name+' 唱的 '+song);
}
}
//'Star' before initialization
``
- 在类中共有的属性和方法，一定要加this才能使用
```javascript
var star = new Star('没头发')
class Star {
constructor (name){
this.name=name
song() // sing is not defined
}
sing(song){
console.log(this.name+' 唱的 '+song);
}
}
var star = new Star()
Note that this in the 5 category points to the problem
Now I want to click the button in the page, and then call the method in the parent class
<button>点击</button>
this error, output undefined
class Star {
constructor(uname) {
this.uname = uname
this.btn=document.querySelector('button')
this.btn.onclick=this.sing
}
sing() {
//方法sing里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
console.log(this.uname); //undefined
}
}
var star = new Star('没头发')
Change this
vat _that;
class Star {
constructor(uname) {
_that=this
this.uname = uname
this.btn=document.querySelector('button')
this.btn.onclick=this.sing
}
sing() {
//方法sing里面的this指向的是btn这个按钮，因为这个按钮调用了这个函数
console.log(_that.uname); //没头发
}
}
var star = new Star('没头发')