Heim > Web-Frontend > js-Tutorial > Hauptteil

Kurze Analyse von Klassen und Objekten in JavaScript

一个新手
Freigeben: 2017-09-09 13:48:29
Original
1298 Leute haben es durchsucht

1. Konstruktormethode
Dies ist eine klassische Methode und eine Methode, die in Lehrbüchern gelehrt werden muss. Es verwendet einen 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 Schlüsselwort new.

 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

Eine detaillierte Einführung in diese Methode finden Sie in der von mir geschriebenen Artikelserie „Javascript Object-Oriented Programming“, daher werde ich nicht auf Details eingehen Hier. 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, wurde die fünfte Ausgabe von ECMAScript, dem internationalen Standard für Javascript, entwickelt (die dritte Ausgabe ist derzeit beliebt). ), wurde eine neue Methode Object.create() vorgeschlagen.
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 wird diese Methode in den neuesten Versionen aller gängigen Browser (einschließlich IE9) implementiert. 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 keine privaten Eigenschaften und privaten Methoden implementieren und keine Daten zwischen Instanzobjekten teilen. Es handelt sich um eine Simulation von „. Klasse“ 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 „minimalistischen Ansatz“. Dies ist auch die Methode, die ich empfehle.
3.1 Kapselung
Diese Methode verwendet keinen Prototyp und der Code ist sehr einfach bereitzustellen. Dies ist wahrscheinlich der Grund, warum sie 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 Die folgenden Funktionen können problemlos bereitgestellt werden.
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 im 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 und 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

Zu diesem Zeitpunkt, falls vorhanden ist ein Instanzobjekt. Wenn die gemeinsam genutzten Daten geändert werden, ist auch ein anderes Instanzobjekt betroffen.

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

Das obige ist der detaillierte Inhalt vonKurze Analyse von Klassen und Objekten in JavaScript. 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