Detaillierte Erläuterung von Beispielen für Konstruktoren und neue Operatoren in JavaScript

Detaillierte Erläuterung von Beispielen für Konstruktoren und neue Operatoren in JavaScript

｛…｝ Die Syntax ermöglicht die Erstellung eines Objekts. Wenn wir jedoch mehrere ähnliche Objekte erstellen müssen, Wir erfordern die Verwendung eines Konstruktors und eines „neuen“ Operators.

Konstruktor

Konstruktor ist technisch gesehen eine normale Funktion, es gibt jedoch im Allgemeinen zwei Konventionen:
1 Der erste Buchstabe ihres Namens wird großgeschrieben.
2. Sie sollten nur mit dem neuen Operator ausgeführt werden.

Beispiel:

function User(name) {
  this.name = name;
  this.isAdmin = false;
}

let user = new User("Jack");

alert(user.name); // Jack
alert(user.isAdmin); // false

Werfen wir einen Blick darauf, was hinter den Kulissen geschieht, wenn new User() ausgeführt wird?
1. Erstellen Sie zunächst ein leeres Objekt und weisen Sie es dann diesem zu.
2. Führen Sie die Funktion aus, ändern Sie normalerweise dieses Objekt und fügen Sie einige neue Attribute hinzu.
3. Dies wird zurückgegeben.

Mit anderen Worten, der Inhalt von new User() ist wie folgt:

function User(name) {
  // this = {};  (implicitly)

  // we add properties to this
  this.name = name;
  this.isAdmin = false;

  // return this;  (implicitly)
}

Das Ergebnis von new User("Jack") stimmt also mit dem folgenden Code überein:

let user = {
  name: "Jack",
  isAdmin: false
};

Wenn wir nun andere Objekte erstellen möchten, können wir new User("Ann"), new User("Alice") usw. verwenden. Kürzer und einfacher zu lesen, als jedes Mal Text zur Beschreibung eines Objekts zu verwenden.
Der Hauptzweck des Konstruktors besteht derzeit darin, die Wiederverwendung von Code zum Erstellen von Objekten zu erreichen.

Beachten wir noch einmal:
Technisch gesehen kann jede Funktion als Konstruktor verwendet werden, d. h. jede Funktion kann mit new aufgerufen werden und auch den oben beschriebenen Algorithmus ausführen.
Die Großschreibung des ersten Buchstabens ist nur eine allgemeine Konvention, um klarer zu machen, dass es sich um einen koreanischen Konstruktor handelt und mit new aufgerufen werden sollte.

new function(){…}
Wenn wir mehrere Codezeilen zum Erstellen eines komplexen Objekts haben, können wir sie mit einem Konstruktor umschließen. Der Code lautet wie folgt:

  let user = new function() { 
     this.name = “John”; 
     this.isAdmin = false;
  // ...other code for user creation
  // maybe complex logic and statements
  // local variables etc
};

Der Konstruktor kann nicht erneut aufgerufen werden, da er nicht gespeichert ist und nur zum Erstellen des Objekts aufgerufen wird. Der Zweck dieser Technik besteht einfach darin, einen einzelnen komplexen Objektcode zu kapseln.

Konstruktor mit doppeltem Verwendungszweck: new.target

Innerhalb der Funktion können wir prüfen, ob die aufrufende Methode die neue Methode verwendet. Dies ist über ein spezielles Attribut new.target möglich.
Der Wert ist leer, wenn er normal aufgerufen wird, und der Wert ist die Funktion, wenn er über new aufgerufen wird.

function User() {
  alert(new.target);
}

User(); // undefined
new User(); // function User { ... }

Der folgende Code kann mit der herkömmlichen Methode und der neuen Betriebsmethode den gleichen Effekt erzielen.

function User(name) {
  if (!new.target) { // if you run me without new
    return new User(name); // ...I will add new for you
  }

  this.name = name;
}

let john = User("John"); // redirects call to new User
alert(john.name); // John

Diese Methode wird in einigen Bibliotheken verwendet, um den Code flexibler zu gestalten. Für diejenigen, die mit der internen Situation des Benutzerobjekts vertraut sind, ist es jedoch nicht sinnvoll, es überall zu verwenden.

Konstruktor-Rückgabewert

Normalerweise benötigen Konstruktoren keine Rückgabewertanweisung. Seine Aufgabe besteht darin, einige notwendige Inhalte in dieses Objekt zu schreiben und es dann automatisch zurückzugeben.
Aber wenn es eine return-Anweisung gibt, ist die Regel einfach:
- Wenn return ein Objekt zurückgibt, wird stattdessen dieses zurückgegeben.
- Wenn return einen primitiven Typ zurückgibt, wird dieser ignoriert und dieser wird trotzdem zurückgegeben.

Mit anderen Worten, return gibt entweder ein Objekt oder dieses zurück. Das folgende Beispiel lautet wie folgt:

function BigUser() {

  this.name = "John";

  return { name: "Godzilla" };  // <-- returns an object
}

alert( new BigUser().name );  // Godzilla, got that object

Dieses Beispiel gibt leer zurück oder ist Einen primitiven Typ schreiben, spielt in der Tat keine Rolle.

function SmallUser() {

  this.name = "John";

  return; // finishes the execution, returns this

  // ...

}

alert( new SmallUser().name );  // John

Die meisten Konstrukteure müssen nicht zurückkehren, dieses besondere Verhalten wird hier nur der intellektuellen Vollständigkeit halber in Erinnerung gerufen.

Ignorieren Sie die Klammern
Übrigens können wir beim Aufruf des Konstruktors die Klammern nach der Objektkennung weglassen, wenn keine Parameter vorhanden sind.

let user = new User; // <-- no brackets
// same as
let user = new User();

Das Ignorieren von Klammern ist kein guter Codierungsstil, aber in der Spezifikation zulässig.

Methoden in Konstruktoren

Die Verwendung von Konstruktoren zum Erstellen von Objekten bietet große Flexibilität, und verschiedene Objekte können durch die Bereitstellung von Parametern definiert werden.
Natürlich fügen wir dazu nicht nur Attribute hinzu, sondern auch Methoden.

Das folgende Beispiel erstellt ein Objekt, verwendet den Namensparameter und fügt eine Methode sayHi hinzu:

function User(name) {
  this.name = name;

  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };
}

let john = new User("John");

john.sayHi(); // My name is: John

/*
john = {
   name: "John",
   sayHi: function() { ... }
}
*/

Zusammenfassung

• Konstruktor oder Konstruktor für Kurz gesagt, es handelt sich um eine gewöhnliche Funktion, aber es gibt eine allgemeine Konvention, dass der erste Buchstabe des Namens großgeschrieben wird.

• Der Konstruktor wird mit new aufgerufen, der zunächst ein leeres this-Objekt erstellt und dieses dann mit gefülltem Inhalt zurückgibt.

Wir können den Konstruktor verwenden, um mehrere ähnliche Objekte zu erstellen. Dies ist nicht der einzige Inhalt des Tages, der später näher erläutert wird.
Javascript stellt Konstruktoren für einige integrierte Objekte bereit, z. B. Date, Set usw.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für Konstruktoren und neue Operatoren in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!