Schreibweise der JavaScript-Klassen

Wir wissen, dass es in js das Konzept der Klassen nicht gibt. Alle Instanzobjekte der Klassen erben Attribute vom gleichen Prototyp-Objekt, daher ist das Prototyp-Objekt das Kernstück der Klasse.

Klassen sind eine Abstraktion von Objekten, und Objekte sind konkrete Instanzen der Klassen. Klassen sind abstrakt und verbrauchen keinen Speicherplatz, während Objekte konkret sind und Speicherplatz beanspruchen. — Baidu Encyclopedia

Die frühen Anforderungen an JavaScript waren einfach und wurden hauptsächlich als Funktionen geschrieben, dann die prozedurale Schreibweise, später wurde die objektorientierte Entwicklungsidee allmählich eingeführt und später allmählich in Klassen umgeschrieben.

In js wird das Wesen der Klassen grundsätzlich als Konstruktoren dargestellt+Prototyp. Nachfolgend werden wir über die verschiedenen Schreibweisen der Klassen in js sprechen:

Konstruktionsmethodik

/**
* Person-Klasse: Definiert eine Person mit dem Attribut name und der Methode getName
  */
<script>
  function Person(name) {
    this.name = name;
    this.getName = function(){
      return this.name;
    }
  }
  //Wir instanzieren hier mehrere Objekte
  var p1 = new Person("trigkit4");
  var p2 = new Person("mike");
  console.log(p1 instanceof Person);//true
  console.log(p2 instanceof Person);//true
</script>

Wie aus dem Kontrollausgabe des oberen Konsols可知，p1und p2Es ist tatsächlich ein Instanzobjekt der Klasse Person. Der linke Teil des instanceof-Operatoren ist das Objekt der zu überprüfenden Klasse, der rechte Teil ist der Konstruktor der Klasse. Hier wird instanceof verwendet, um das Objekt p zu überprüfen1ob es zu der Klasse Person gehört.

Der Vorteil dieses Verfahrens ist: Wir können unterschiedliche Objekteinheiten basierend auf Parametern konstruieren, der Nachteil ist, dass die getName-Methode bei jeder Konstruktion eines Objekts erzeugt wird, was zu einem Speicherverbrauch führt.

Wir können eine externe Funktion verwenden, um die Klassenmethode zu ersetzen und sicherzustellen, dass jede Einheit die gleiche Methode gemeinsam nutzt. Die geänderte Klasse lautet wie folgt:

//Außenfunktionen
<script>
  function getName() {
    return this.name;
  }
  function Person(name) {
    this.name = name;
    this.getName = getName;//
  }
</script>

Prototypenmethode

<script>
  function Person() {};
  Person.prototype.name = "trigkit"4";//Die Attribute der Klasse werden auf dem Prototype platziert
  Person.prototype.getName = function() {
    return " I'm " + this.name;
  }
  var p1 = new Person();
  var p2 = new Person();
  console.log(p1.name);//trigkit4
  console.log(p2.getName());//I'm trigkit4
</script>

Der Nachteil der Prototypenmethode ist, dass man Objekteinheiten nicht mit Parametern konstruieren kann (normalerweise sind die Attribute jedes Objekts unterschiedlich), der Vorteil ist, dass alle Objekteinheiten die getName-Methode gemeinsam nutzen (im Vergleich zur Konstruktormethode), ohne dass Speicher verschwendet wird.

Konstruktor+Prototypenmethode
Nehmen wir die Vorteile der ersten beiden Methoden:
a) Klassenattribute mit dem Konstruktor definieren (Felder).
b) Klassenmethoden mit dem Prototypen definieren.

<script>
  function Person(name) {
    this.name = name;
  }
  //Die Eigenschaften des Prototyps ermöglichen es den Objekten, die getName-Methode gemeinsam zu nutzen
  Person.prototype.getName = function() {
    return " I'm " + this.name;
  }
</script>

So können wir sowohl Objekte mit verschiedenen Eigenschaften konstruieren als auch Methoden, die von den Objekten gemeinsam genutzt werden, ohne dass Speicher verschwendet wird.

Um den JavaScript-Code komprimierter zu gestalten, bewahren wir die prototype-Methode im Brackets der Funktion Person auf.

<script>
  function Person(name) {
    this.name = name;
    Person.prototype.getName = function() {
      return name;//Man sollte this.name nicht verwenden
    }
  }
  var p1 = new Person('trigkit"4);
  console.log(p1.getName());//trigkit4
</script>

Hier müssen wir einige Methoden zur Definition von Klassen kennen, abgesehen von der obigen Konstruktorfunktion, darunter:

Die Methode Object.create()
Mit diesem Verfahren ist "Klasse" ein Objekt und nicht eine Funktion.

 var Person = {
    name : "trigkit"4"
    age : 21,
    function run() {
      alert("Ich mag Laufen");
    }
  }

Dann generieren Sie direkt eine Instanz mit Object.create() ohne new zu verwenden.

var p1 = Object.create(Person);
  alert(p1.age);//21
  p1.run();//Ich mag Laufen

Diese Methode ist einfacher als "Konstruktormethode", aber sie kann keine privaten Eigenschaften und privaten Methoden implementieren. Die Instanzobjekte können auch keine Daten teilen, und die Simulation der "Klasse" ist nicht vollständig.

createNew() Methode
Diese Methode erfordert keine Verwendung von this und prototype. Die Methode besteht darin, ein Objekt zu verwenden, um eine Klasse zu simulieren, und in der Klasse einen Konstruktor createNew() zu definieren. In createNew() wird das Instanzobjekt definiert und dieses Instanzobjekt wird als Rückgabewert zurückgegeben.

<script>
  var Person = {
    createNew : function () {
      var person = {};
      person.name = "trigkit4";
      person.run = function(){
        alert("Ich mag Laufen");
      };
      return person;
    }
  }
</script>

Beim Gebrauch, rufen Sie das createNew()-Verfahren auf, um eine Instanzobjekt zu erhalten.

 var p1 = Person.createNew();
  p1.run();//Ich mag Laufen

Diese Schreibweise ist im Grunde sehr ähnlich zu der Schreibweise von Objekt-Literalen, nur dass eine durch Kommas und die andere durch Semikolons getrennt ist.

Das ist der gesamte Inhalt dieses Artikels. Ich hoffe, er hilft Ihnen bei Ihrem Lernen und ich hoffe, dass Sie die呐喊教程 unterstützen.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetbenutzern freiwillig eingereicht und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte finden, die möglicherweise ein Urheberrechtsverstoß darstellen, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @, wenn Sie eine Meldung senden, und fügen Sie relevante Beweise bei. Sobald überprüft, wird diese Website die涉嫌侵权的内 容立即删除。)