Wie man die Grundlagen von objektorientiertem JavaScript und das Problem dieses Zeigens versteht

Vorwort

Die Sprache hat einen Prozess von „maschinenorientiert“ zu „prozessorientiert“ durchlaufen und dann zu „objektorientiert“. JavaScript ist eine objektbasierte Sprache, die zwischen prozessorientiert und objektorientiert liegt. Beim Erlernen von JavaScript ist OOP ein sehr wichtiger Teil. Lassen Sie uns den objektorientierten Ansatz in JS besprechen! ! !

1. Grundlegende Probleme von OOP

1.1Was ist prozessorientiert und objektorientiert?

Prozessorientiert: Fokus auf die Prozessschritte zur Lösung eines Problems. Das Merkmal der Programmierung besteht darin, dass jeder Schritt des Prozesses einzeln durch Funktionen implementiert wird, ohne die Konzepte von Klassen und Objekten.

Objektorientiert: Konzentrieren Sie sich darauf, welches Objekt das Problem löst. Das Merkmal der Programmierung besteht darin, dass Klassen nacheinander erscheinen und das Objekt aus der Klasse abgerufen und zur Lösung spezifischer Probleme verwendet wird.

Für den Anrufer erfordert die Prozessorientierung, dass der Anrufer verschiedene Funktionen selbst implementiert. Objektorientiert hingegen muss dem Aufrufer nur die Funktionen bestimmter Methoden im Objekt mitteilen, ohne dass der Aufrufer die Implementierungsdetails der Methode verstehen muss.

1.2Drei Hauptmerkmale der Objektorientierung

Vererbung, Kapselung, Polymorphismus

1.3Die Beziehung zwischen Klassen und Objekten

① Klasse : Eine Sammlung von Klassen mit denselben Merkmalen (Eigenschaften) und Verhaltensweisen (Methoden).

Zum Beispiel: Mensch-->Attribute: Größe, Gewicht, Geschlecht Methoden: Essen, Sprechen, Gehen

② Objekt : Nehmen Sie aus der Klasse die Person mit bestimmten Attributwerten und Methoden heraus.

Zum Beispiel: Zhang San--> Attribute: Größe 180, Gewicht 180 Methode: Sprechen--> 🎜> ③

Die Beziehung zwischen Klassen und Objekten

Klassen sind abstrakt, Objekte sind konkret (Klassen sind die Abstraktion von Objekten und Objekte sind die Konkretisierung). von Klassen) )

Erklären Sie:

Eine Klasse ist ein abstraktes Konzept. Man kann nur sagen, dass eine Klasse Attribute und Methoden hat. Attributen kann jedoch kein spezifischer Wert zugewiesen werden. Menschen haben zum Beispiel Namen, aber wir können nicht sagen, wie sie heißen. . .

Das Objekt ist eine bestimmte Instanz, eine Person, die den Attributen in der Klasse bestimmte Werte zuweist. Wenn es sich bei Zhang San beispielsweise um einen einzelnen Menschen handelt, können wir sagen, dass Zhang Sans Name Zhang San ist. Das heißt, Zhang San hat jedem Attribut des Menschen eine spezifische Zuordnung zugewiesen, sodass Zhang San ein von Menschen erzeugtes Objekt ist.

2、 JavaScript中的面向对象

2.1Schritte zum Erstellen von Klassen und Objekten

① Erstellen Sie eine Klasse (Konstruktor): Der Klassenname muss die Kamel-Fall-Regel verwenden, d. h. der erste Buchstabe jedes Wortes muss großgeschrieben werden.

1 function 类名(属性1){
2      this.属性1 = 属性1;
3      this.方法 = function(){
4          //方法中要调用自身属性，必须要使用this.属性
5      }
6 }

② Instanziieren (neu) ein Objekt durch eine Klasse.

var obj = new 类名(属性1的具体值);
obj.属性;    调用属性
obj.方法();     调用方法

③Notizen

>>> Der Prozess der Erstellung eines Objekts über den Klassennamen wird als „Instanziierung der Klasse“ bezeichnet.

>>>Dies in der Klasse zeigt bei der Instanziierung auf das neu erstellte Objekt. Daher binden this.property und this.method tatsächlich Eigenschaften und Methoden an das Objekt, das bald neu sein wird.

>>>Um in einer Klasse ihre eigenen Eigenschaften aufzurufen, müssen Sie this.property name verwenden. Wenn Sie den Variablennamen direkt verwenden, können Sie nicht auf die entsprechende Eigenschaft zugreifen.

>>>Klassennamen müssen die Groß- und Kleinschreibung verwenden. Achten Sie auf den Unterschied zu normalen Funktionen.

2.2Zwei wichtige Attribute Konstruktor und Instanz von

① Konstruktor: Gibt den Konstruktor des aktuellen Objekts zurück

>>>zhangsan.constructor = Person; √

② instanceof: Erkennen Sie, ob ein Objekt eine Instanz einer Klasse ist

>>>lisi-Instanz von Person √ lisi wird durch die neue Person-Klasse erstellt

>>>lisi-Instanz von Objekt √ Alle Objekte sind Instanzen von Objekt

>>>Person-Instanz von Objekt √ Die Funktion selbst ist auch ein Objekt

3、 JavaScript中的this指向问题

3. Dieses Zeigeproblem in JavaScript

在上一部分中，我们创建了一个类，并通过这个类new出了一个对象。 但是，这里面出现了大量的this。 很多同学就要懵逼了，this不是“这个”的意思吗？为什么我在函数里面写的this定义的属性，最后到了函数new出的对象呢？？

3.1谁最终调用函数，this就指向谁！

① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！
② this指向的，永远只可能是对象，不可能是函数！！
③ this指向的对象，叫做函数的上下文context，也叫函数的调用者。

3.2this指向的规律(与函数的调用方式息息相关！)

① 通过函数名()调用的，this永远指向window

func(); // this--->window//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。

② 通过对象.方法调用的，this指向这个对象

// 狭义对象
    var obj = {
        name:"obj",
        func1 :func
    };
    obj.func1(); // this--->obj//【解释】我们将func函数名，当做了obj这个对象的一个方法，然后使用对象名.方法名， 这时候函数里面的this指向这个obj对象。

    // 广义对象
    document.getElementById("p").onclick = function(){        
    this.style.backgroundColor = "red";
}; // this--->p//【解释】对象打点调用还有一个情况，我们使用getElementById取到一个p控件，也是一种广义的对象，用它打点调用函数，则函数中的this指向这个p对象。

③ 函数作为数组的一个元素，用数组下标调用，this指向这个数组

var arr = [func,1,2,3];
arr[0]();  // this--->arr//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。

④ 函数作为window内置函数的回调函数使用，this指向window。比如setTimeout、setInterval等

setTimeout(func,1000);// this--->window//setInterval(func,1000);//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。

⑤ 函数作为构造函数，使用new关键字调用，this指向新new出的对象

var obj = new func(); //this--->new出的新obj//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。

3.3关于this问题的面试题

var fullname = 'John Doe';var obj = {
　　fullname: 'Colin Ihrig',
　　prop: {
　　　　fullname: 'Aurelio De Rosa',
　　　　getFullname: function() {
　　　　　　return this.fullname;
　　　　}
　　}
};
console.log(obj.prop.getFullname()); 
// 函数的最终调用者 obj.prop 
            var test = obj.prop.getFullname;
console.log(test());  
// 函数的最终调用者 test()  this-> window            obj.func = obj.prop.getFullname;
console.log(obj.func()); 
// 函数最终调用者是obj
            var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());// 函数最终调用者数组

Das obige ist der detaillierte Inhalt vonWie man die Grundlagen von objektorientiertem JavaScript und das Problem dieses Zeigens versteht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!