JavaScript objektorientiert und dieses Zeigen (mit Code)

Dieses Mal bringe ich Ihnen JavaScript-Objektorientierung und dieses Zeigen (mit Code). Was sind die Vorsichtsmaßnahmen bei der Verwendung von JavaScript? Objektorientiert und dieses Zeigen . Werfen wir einen Blick darauf.

Unsere Programmiersprache hat einen Prozess von „maschinenorientiert“ über „prozessorientiert“ bis hin zu „objektorientiert“ durchlaufen. 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.1 Was ist 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 Aufrufer erfordert die Prozessorientierung, dass der Aufrufer 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 Objektorientierung

Vererbung, Kapselung, Polymorphismus

1.3 Beziehung zwischen Klassen und Objekten

① Klasse: Eine Sammlung ähnlicher Merkmale (Eigenschaften) und Verhaltensweisen (Methoden).

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

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

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

③ Die Beziehung zwischen Klassen und Objekten

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

Erklären Sie:

Klasse ist ein abstraktes Konzept. Man kann nur sagen, dass eine Klasse Attribute und Methoden hat, aber sie kann den Attributen keine spezifischen Werte zuweisen. Menschen haben zum Beispiel Namen, aber wir können nicht sagen, wie sie heißen. . .

Ein Objekt ist eine bestimmte Instanz, ein Individuum, das den Attributen in der Klasse bestimmte Werte zuweist. Wenn Zhang San beispielsweise ein einzelner Mensch ist, 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ß-/Kleinschreibung verwenden, d. h. der erste Buchstabe jedes Wortes muss großgeschrieben werden.

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

② Instanziieren (neu) Sie ein Objekt über die Klasse.

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

obj.property; Eigenschaft aufrufen

obj.method(); Aufrufmethode

③Notizen

>>>Der Prozess der Neuerstellung eines Objekts über den Klassennamen wird „Instanziierung der Klasse“ genannt

>>>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 diesen Eigenschaftsnamen verwenden. Wenn Sie den Variablennamen direkt verwenden, können Sie nicht auf die entsprechende Eigenschaft zugreifen.

>>>Klassennamen müssen die Kamel-Fall-Regel verwenden und auf den Unterschied zu gewöhnlichen Funktionen achten.

2.2 Zwei wichtige Attribute Konstruktor und Instanz von

①constructor：返回当前对象的构造函数

>>>zhangsan.constructor = Person; √

②instanceof：检测一个对象，是不是一个类的实例；

>>>lisi instanceof Person √ lisi是通过Person类new出的

>>>lisi instanceof Object √ 所有对象都是Object的实例

>>>Person instanceof Object √ 函数本身也是对象

3、 JavaScript中的this指向问题

在上一部分中，我们创建了一个类，并通过这个类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]());
// 函数最终调用者数组

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Vue中computed属性的使用方法

ajax与跨域jsonp

Das obige ist der detaillierte Inhalt vonJavaScript objektorientiert und dieses Zeigen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!