Heim > Web-Frontend > Front-End-Fragen und Antworten > Hat Javascript eine Möglichkeit, eine Klasse zu definieren?

Hat Javascript eine Möglichkeit, eine Klasse zu definieren?

WBOY
Freigeben: 2022-06-16 17:16:28
Original
1922 Leute haben es durchsucht

Javascript verfügt über Methoden zum Definieren von Klassen. Methode: 1. Verwenden Sie den Konstruktor, um die Klasse zu definieren. Die Syntax lautet „function name() {this.name = „…“;}“. 2. Verwenden Sie die Methode „Object.create()“, um die Klasse zu definieren Die Syntax lautet „var name = Object.create(...);“; 3. Definieren Sie einen Konstruktor in der Klasse, definieren Sie ein Instanzobjekt in der Funktion und rufen Sie dann die Funktion erneut auf, um die Klasse zu definieren.

Hat Javascript eine Möglichkeit, eine Klasse zu definieren?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Hat JavaScript eine Möglichkeit, eine Klasse zu definieren

Hat JavaScript eine Möglichkeit, eine Klasse zu definieren?

Drei Möglichkeiten, eine Klasse in Javascript zu definieren

In der objektorientierten Programmierung ist eine Klasse ein Objekt A Die Vorlage definiert Eigenschaften und Methoden, die für dieselbe Gruppe von Objekten gelten (auch „Instanzen“ genannt).

Die Javascript-Sprache unterstützt keine „Klassen“, aber Sie können einige Problemumgehungen verwenden, um „Klassen“ zu simulieren.

1. Konstruktormethode

Dies ist eine klassische Methode und eine Methode, die in Lehrbüchern gelehrt werden muss. Es verwendet den Konstruktor, um eine „Klasse“ zu simulieren, und verwendet intern das Schlüsselwort this, um auf das Instanzobjekt zu verweisen.

  function Cat() {
    this.name = "大毛";
  }
Nach dem Login kopieren

Verwenden Sie beim Generieren einer Instanz das neue Schlüsselwort.

  var cat1 = new Cat();
  alert(cat1.name); // 大毛
Nach dem Login kopieren

Die Attribute und Methoden der Klasse können auch im Prototypobjekt des Konstruktors definiert werden.

  Cat.prototype.makeSound = function(){
    alert("喵喵喵");
  }
Nach dem Login kopieren

Sein Hauptnachteil besteht darin, dass es relativ kompliziert ist, dies und einen Prototyp verwendet und sehr mühsam zu schreiben und zu lesen ist.

2. Object.create()-Methode

Um die Mängel der „Konstruktormethode“ zu beheben und Objekte bequemer zu generieren, schlägt die fünfte Ausgabe von ECMAScript, dem internationalen Standard für Javascript, eine neue Methode vor Object.create ().

Bei dieser Methode ist „Klasse“ ein Objekt, keine Funktion.

  var Cat = {
    name: "大毛",
    makeSound: function(){ alert("喵喵喵"); }
  };
Nach dem Login kopieren

Verwenden Sie dann direkt Object.create(), um die Instanz zu generieren, ohne new zu verwenden.

  var cat1 = Object.create(Cat);
  alert(cat1.name); // 大毛
  cat1.makeSound(); // 喵喵喵
Nach dem Login kopieren

Derzeit nutzen die neuesten Versionen aller gängigen Browser (einschließlich IE9) diese Methode. Wenn Sie auf einen alten Browser stoßen, können Sie ihn mit dem folgenden Code selbst bereitstellen.

  if (!Object.create) {
    Object.create = function (o) {
       function F() {}
      F.prototype = o;
      return new F();
    };
  }
Nach dem Login kopieren

Diese Methode ist einfacher als die „Konstruktormethode“, kann jedoch weder private Eigenschaften und private Methoden implementieren noch Daten zwischen Instanzobjekten austauschen, und die Simulation von „Klassen“ ist nicht umfassend genug.

3. Minimalistischer Ansatz

Der niederländische Programmierer Gabor de Mooij hat eine neue Methode vorgeschlagen, die besser ist als Object.create(). Er nannte diese Methode „minimalistischer Ansatz“. Dies ist auch die Methode, die ich empfehle.

3.1 Kapselung

Diese Methode verwendet weder dies noch den Prototyp, und der Code ist sehr einfach bereitzustellen, weshalb sie wahrscheinlich als „minimalistische Methode“ bezeichnet wird.

Zuallererst wird auch ein Objekt verwendet, um eine „Klasse“ zu simulieren. Definieren Sie in dieser Klasse einen Konstruktor createNew(), um Instanzen zu generieren.

  var Cat = {
    createNew: function(){
      // some code here
    }
  };
Nach dem Login kopieren

Definieren Sie dann in createNew() ein Instanzobjekt und verwenden Sie dieses Instanzobjekt als Rückgabewert.

  var Cat = {
    createNew: function(){
      var cat = {};
      cat.name = "大毛";
      cat.makeSound = function(){ alert("喵喵喵"); };
      return cat;
    }
  };
Nach dem Login kopieren

Wenn Sie es verwenden, rufen Sie die Methode createNew() auf, um das Instanzobjekt abzurufen.

  var cat1 = Cat.createNew();
  cat1.makeSound(); // 喵喵喵
Nach dem Login kopieren

Der Vorteil dieser Methode besteht darin, dass sie leicht zu verstehen ist, eine klare und elegante Struktur aufweist und dem traditionellen Konstrukt der „objektorientierten Programmierung“ entspricht, sodass die folgenden Funktionen problemlos bereitgestellt werden können.

3.2 Vererbung

Lassen Sie eine Klasse eine andere Klasse erben, was sehr praktisch zu implementieren ist. Rufen Sie einfach die Methode createNew() des letzteren in der Methode createNew() des ersteren auf.

Definieren Sie zunächst eine Animal-Klasse.

  var Animal = {
    createNew: function(){
      var animal = {};
      animal.sleep = function(){ alert("睡懒觉"); };
      return animal;
    }
  };
Nach dem Login kopieren

Dann rufen Sie in der Methode createNew() von Cat die Methode createNew() von Animal auf.

  var Cat = {
    createNew: function(){
      var cat = Animal.createNew();
      cat.name = "大毛";
      cat.makeSound = function(){ alert("喵喵喵"); };
      return cat;
    }
  };
Nach dem Login kopieren

Die auf diese Weise erhaltene Cat-Instanz erbt sowohl die Cat-Klasse als auch die Animal-Klasse.

  var cat1 = Cat.createNew();
  cat1.sleep(); // 睡懒觉
Nach dem Login kopieren

3.3 Private Eigenschaften und private Methoden

In der Methode createNew() sind die Methoden und Eigenschaften privat, solange sie nicht für das Cat-Objekt definiert sind.

  var Cat = {
    createNew: function(){
      var cat = {};
      var sound = "喵喵喵";
      cat.makeSound = function(){ alert(sound); };
      return cat;
    }
  }
Nach dem Login kopieren

Die interne Variable sound im obigen Beispiel kann nicht extern gelesen werden. Sie kann nur über die öffentliche Methode makeSound() von cat gelesen werden.

  var cat1 = Cat.createNew();
  alert(cat1.sound); // undefined
Nach dem Login kopieren

3.4 Datenfreigabe

Manchmal benötigen wir alle Instanzobjekte, um dieselben internen Daten lesen und schreiben zu können. Kapseln Sie zu diesem Zeitpunkt einfach die internen Daten innerhalb des Klassenobjekts und außerhalb der Methode createNew().

  var Cat = {
    sound : "喵喵喵",
    createNew: function(){
      var cat = {};
      cat.makeSound = function(){ alert(Cat.sound); };
      cat.changeSound = function(x){ Cat.sound = x; };
      return cat;
    }
  };
Nach dem Login kopieren

Dann werden zwei Instanzobjekte generiert:

  var cat1 = Cat.createNew();
  var cat2 = Cat.createNew();
  cat1.makeSound(); // 喵喵喵
Nach dem Login kopieren

Wenn zu diesem Zeitpunkt ein Instanzobjekt die gemeinsam genutzten Daten ändert, ist auch das andere Instanzobjekt betroffen.

  cat2.changeSound("啦啦啦");
  cat1.makeSound(); // 啦啦啦
Nach dem Login kopieren

【Verwandte Empfehlungen: Javascript-Video-Tutorial, Web-Frontend

Das obige ist der detaillierte Inhalt vonHat Javascript eine Möglichkeit, eine Klasse zu definieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage