Eine kurze Einführung in die objektorientierte Programmierung

Einführung in die objektorientierte Programmierung

1 objektorientierte Programmierung oop (Objekt Orinted Programmierung)

Objektorientiert ist das Zerlegen von Dingen in Objekte und dann durch Arbeitsteilung zwischen den Objekten.
Beispiel: Stellen Sie den Elefanten in den Kühlschrank, unterteilt in drei Schritte 1. 2 3
Objektorientiert ist das Teilen des Problems durch die Funktion von Das Objekt, nicht die Stufe
(Traktor). Es gibt Besen.) Die
objektorientierte Programmierung bietet die Vorteile von Flexibilität, Wiederverwendbarkeit des Codes, einfacher Wartung und Entwicklung und eignet sich besser für große Softwareprojekte mit Zusammenarbeit zwischen mehreren Personen.

Drei Merkmale objektorientiert

• Verkapselung
• erben
• Polymorphismus

Objektorientiertes Denken

1. Extrahieren Sie (abstrakte) allgemeine Attribute und Verhaltensweisen von Objekten und kapseln Sie sie in eine Klasse (Vorlage).
2. Instanziieren Sie die Klasse und rufen Sie das Objekt der Klasse ab

Zum Beispiel

Beispiel: Das Mobiltelefon ist ein abstraktes (allgemein bezeichnetes, nicht klares)
Xiaomi (Apple) -Handy. Das spezifische (speziell)
Xiaomi und Apple sind beide Mobiltelefone, und es gibt viele Ähnlichkeiten, wie Gewicht und Material.
Wir können Extrahieren Sie diese Der gleiche Punkt, kapseln Sie in eine Vorlage, und wenn Sie dann ein Mobiltelefon erstellen müssen, müssen Sie nur diese Vorlage verwenden

Bei der objektorientierten Programmierung müssen wir nur berücksichtigen, welche Objekte vorhanden sind. Entsprechend der objektorientierten Denkweise erstellen wir ständig Objekte, verwenden Objekte und weisen sie an, Dinge zu tun.

2 Klassen und Objekte

Objekt

Im wirklichen Leben ist alles ein Objekt, und ein Objekt ist eine bestimmte Sache, und alles, was Sie sehen und berühren können, ist ein Objekt wie Papier.
In js ist ein Objekt eine Reihe ungeordneter Sammlungen verwandter Eigenschaften und Methoden. Alle Dinge sind Objekte, wie z. B. Zeichenfolgen

• Attribute: Die Eigenschaften von Dingen, dargestellt durch Attribute im Objekt
• Methode: Das Verhalten von Dingen, dargestellt durch Methoden im Objekt

Klasse

Sie können ein Klassenschlüsselwort verwenden, um eine Klasse zu deklarieren, und diese Klasse verwenden, um ein Objekt zu instanziieren. Die
Klasse abstrahiert den öffentlichen Teil eines Objekts. Sie bezieht sich im Allgemeinen auf eine große Klasse, und ein
Objekt bezieht sich speziell auf ein bestimmtes Objekt Objekt wird durch die Klasse instanziiert.

Wenn Sie beispielsweise ein BMW Auto herstellen möchten, ist die Zeichnung nur eine Klasse, die abstrakter ist. Durch diese Zeichnung können wir viele BMW Autos herstellen.

Klassenkonstruktor Konstruktor

Die Methode constructor () ist der Konstruktor (Standardmethode) der Klasse. Sie wird zum Übergeben von Parametern und zum Zurückgeben des Instanzobjekts verwendet. Die Objektinstanz wird vom neuen Befehl generiert. Diese Methode wird automatisch aufgerufen. Wenn keine Anzeigedeklaration vorhanden ist Innerhalb der Klasse wird automatisch ein Konstruktor () erstellt.

• Klasse erstellen

//创建一个类  
class Star {
    
    
   constructor (name){
    
    
     this.name=name
   }
}

//利用类创造对象 new 
var star = new Star('没头发')
console.log(star.name);//没头发
//通过class 关键字创建类  类名要首字母大写
// 类里面有个constructor函数，可以接受传递进来的参数，同时返回实例对象
// constructor 函数，只要new生成实例，就会自动调用，就算不写，类也会自动生产
//创建类时，不加小括号，生成实例加 构造函数不需要加 function

• Fügen Sie der Klasse eine allgemeine Methode hinzu

class Star {
    
    
    constructor (name){
    
    
        this.name=name
    }
    sing(song){
    
    
          console.log(this.name+' 唱的 '+song);
    }
}
var star = new Star('没头发')star.sing('冰雨') // 没头发 唱的 冰雨
//类里所有的方法都不需要写function
//多个函数方法之间不加，

3 Arten der Vererbung

Die Klasse erbt die Schlüsselwörter extenses und super

Vererbung im wirklichen Leben, Vererbung des Geschäfts des Vaters , Vererbung des Programms erbt einige Methoden und Eigenschaften der übergeordneten Klasse

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 ruft die normalen Funktionen der übergeordneten Klasse und die Regeln zum Suchen von Attributen in der Vererbung auf

Wann verlängert wird nicht geschrieben

class Father {
    
    
    say(){
    
    
        return '父类 '
    }
}
class Son{
    
    
    say(){
    
    
        console.log('儿子');
        //super.say() 就是调用父亲中的函数 say()
    }
}
var son = new Son()
son.say()//儿子

Wenn es sich ausdehnt, gilt das Prinzip der Nähe

class Father {
    
    
    say(){
    
    
        return '父类 '
    }
}
class Son extends Father{
    
    
    say(){
    
    
        console.log('儿子');
    }
}
var son = new Son()
son.say()  //儿子

• Wenn die Unterklasse bei der Vererbung eine Methode ausgeben möchte, müssen Sie zuerst herausfinden, ob es eine solche Methode in der Unterklasse gibt, und wenn ja, die Methode der Unterklasse ausführen
• Wenn nicht in der Unterklasse, suchen Sie in der übergeordneten Klasse. Wenn dies der Fall ist, führen Sie die Methode in der übergeordneten Klasse aus (Prinzip der Nähe).

Super Aufmerksamkeit
super muss davor in die Unterklasse gestellt werden

4 Zwei Punkte bei der Verwendung von Klassen

• In es6 gibt es keine variable Heraufstufung, daher muss die Klasse definiert werden, bevor das Objekt durch die Klasse instanziiert werden kann

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()

Beachten Sie, dass dies in der Kategorie 5 auf das Problem hinweist

Jetzt möchte ich auf die Schaltfläche auf der Seite klicken und dann die Methode in der übergeordneten Klasse aufrufen

<button>点击</button>

Dieser Fehler wird undefiniert ausgegeben

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('没头发')

Ändere das

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('没头发')