JavaScript-objektorientierte Grundlagen und spezifische Analyse dieses Zeigeproblems

Der folgende Editor bringt Ihnen einen alltäglichen Artikel über die objektorientierten Grundlagen von JavaScript und dieses Zeigeproblem. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Kommen Sie und schauen Sie sich den Editor an

Vorwort

Unsere Programmiersprache hat sich von „maschinenorientiert“ zu „maschinell“ entwickelt -orientiert“ Ein Prozess von „prozessorientiert“ 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. Grundfragen von OOP

1.1 Was sind prozessorientiert und objektorientiert?

Prozessorientiert: Konzentrieren Sie sich 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.2 Drei Hauptmerkmale der objektorientierten

Vererbung, Kapselung, Polymorphismus

1.3 Die Beziehung zwischen Klassen und Objekten

① Klasse: eine Sammlung derselben Merkmale (Eigenschaften) und Verhaltensweisen (Methoden).

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

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

Zum Beispiel: Zhang San--> Attribute: Größe 180, Gewicht 180 Methode: Talk--> Mein Name ist Zhang San, Größe 180

③ Die Beziehung zwischen Klassen und Objekten

Klasse ist abstrakt, Objekt ist konkret (Klasse ist die Abstraktion des Objekts, Objekt ist die Konkretisierung der Klasse)

Erklären Sie:

Klasse ist ein abstraktes Konzept, nur Wir kann sagen, dass eine Klasse Attribute und Methoden hat, aber wir können den Attributen keine spezifischen Werte zuweisen. 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. Objektorientiert in JavaScript

2.1 Schritte zum Erstellen von Klassen und Objekten

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

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

② Instanziieren (neu) ein Objekt durch eine Klasse.

var obj = neuer Klassenname (spezifischer Wert von Attribut 1);

obj 🎜>③Hinweise

>>> Der Prozess der Neuerstellung eines Objekts über den Klassennamen wird in der Klasse this als „Instanziierung der Klasse“ bezeichnet 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ß-/Kleinschreibung verwenden. Achten Sie auf den Unterschied zu normalen Funktionen.

2.2 Zwei wichtige Attribute Konstruktor und Instanz von

①constructor: Gibt den Konstruktor des aktuellen Objekts zurück >> >zhangsan.constructor = Person; √②instanceof: Erkennen, ob ein Objekt eine Instanz einer Klasse ist

>>>lisi-Instanz von Person √ lisi wird durch die Person geleitet class new Out of

>>>lisi instanceof Object √ Alle Objekte sind Instanzen von Object

>>>Person instanceof Object √ Die Funktion selbst ist auch ein Objekt

3. Dieses Zeigeproblem in JavaScript

Im vorherigen Teil haben wir eine Klasse erstellt und über diese Klasse ein neues Objekt erstellt. Davon ist jedoch einiges drin. Viele Studenten sind verwirrt. Bedeutet das nicht „dies“? Warum landet das dadurch definierte Attribut, das ich in der Funktion geschrieben habe, in dem von der Funktion new erzeugten Objekt? ? 3.1 Wer schließlich die Funktion aufruft, wird darauf hinweisen! ① Auf wen sich das bezieht, sollte nicht bedenken, wo die Funktion deklariert ist, sondern wo die Funktion aufgerufen wird! !

② Worauf dies hinweist, kann immer nur ein Objekt sein, keine Funktion! !

③ 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]());
// 函数最终调用者数组

好了，这篇博客，我们了解了什么是面向对象、类和对象的关系、JS中声明类与对象的步骤，以及重点讲解的this指向问题！ 希望能够帮助大家真正的理解了this的认知，下面我会继续给大家分享关于面向对象方面的问题。多谢大家的支持！！！

Das obige ist der detaillierte Inhalt vonJavaScript-objektorientierte Grundlagen und spezifische Analyse dieses Zeigeproblems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!