Explication détaillée d'exemples de constructeur et de nouvel opérateur en JavaScript

Explication détaillée d'exemples de constructeurs et de nouveaux opérateurs en JavaScript

｛…｝ la syntaxe permet la création d'un seul objet, mais si nous devons créer plusieurs objets similaires, we Nécessite l'utilisation d'un constructeur et d'un opérateur "nouveau".

Constructeur

Le constructeur est techniquement une fonction normale, mais il existe généralement deux conventions :
1 La première lettre de leur nom est en majuscule.
2. Ils ne doivent être exécutés qu’en utilisant le nouvel opérateur.

Exemple :

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

let user = new User("Jack");

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

Jetons un coup d'œil à ce qui se fait dans les coulisses lorsque new User() est exécuté ?
1. Créez d'abord un objet vide, puis attribuez-le à celui-ci.
2. Exécutez la fonction, modifiez généralement cet objet et ajoutez de nouveaux attributs.
3. ceci est renvoyé.

En d'autres termes, le contenu de new User() est le suivant :

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

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

  // return this;  (implicitly)
}

Donc le résultat de new User("Jack") est cohérent avec le code suivant :

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

Maintenant, si nous voulons créer d'autres objets, nous pouvons utiliser new User("Ann"), new User("Alice"), etc. Plus court et plus facile à lire que d'utiliser du texte à chaque fois pour décrire un objet.
L'objectif principal du constructeur à l'heure actuelle est de réaliser la réutilisation du code pour créer des objets.

Notons encore :
Techniquement, n'importe quelle fonction peut être utilisée comme constructeur, c'est-à-dire que n'importe quelle fonction peut être appelée en utilisant new et également exécuter l'algorithme décrit ci-dessus.
La mise en majuscule de la première lettre n'est qu'une convention générale pour indiquer plus clairement qu'il s'agit d'un constructeur coréen et qu'il doit être appelé en utilisant new.

new function(){…}
Si nous avons plusieurs lignes de code pour créer un objet complexe, nous pouvons les envelopper à l'aide d'un constructeur, le code est le suivant :

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

Le constructeur ne peut pas être rappelé car il n'est pas enregistré et n'est appelé que pour créer l'objet. Le but de cette technique est simplement d’encapsuler un seul code objet complexe.

Constructeur à double usage : new.target

A l'intérieur de la fonction, on peut vérifier si sa méthode appelante utilise la nouvelle méthode. Ceci est possible en utilisant un attribut spécial new.target.
La valeur est vide lorsqu'elle est appelée normalement, et la valeur est la fonction lorsqu'elle est appelée via new.

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

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

Le code suivant peut obtenir le même effet en utilisant la méthode conventionnelle et la nouvelle méthode de fonctionnement.

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

Cette méthode est utilisée dans certaines bibliothèques pour rendre le code plus flexible. Mais ce n’est pas une bonne chose de l’utiliser partout. Ce n’est pas assez évident pour ceux qui connaissent la situation interne de l’objet User.

Valeur de retour du constructeur

Habituellement, les constructeurs n'ont pas besoin d'une instruction de valeur de retour. Sa tâche est d'écrire le contenu nécessaire dans cet objet puis de le renvoyer automatiquement.
Mais s'il y a une instruction return, la règle est simple :
- Si return renvoie un objet, alors celui-ci est renvoyé à la place.
- Si return renvoie un type primitif, il est ignoré et celui-ci est toujours renvoyé.

En d'autres termes, return renvoie soit un objet, soit this. L'exemple suivant renvoie un objet à la place de ceci :

function BigUser() {

  this.name = "John";

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

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

Cet exemple renvoie vide, ou est. écrire un type primitif. En fait, cela n'a pas d'importance.

function SmallUser() {

  this.name = "John";

  return; // finishes the execution, returns this

  // ...

}

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

La plupart des constructeurs n'ont pas besoin de revenir, ce comportement particulier est rappelé ici juste par souci d'exhaustivité intellectuelle.

Ignorer les parenthèses
D'ailleurs, lors de l'appel du constructeur, s'il n'y a pas de paramètres, on peut omettre les parenthèses après l'identifiant de l'objet.

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

Ignorer les parenthèses n'est pas un bon style de codage, mais cela est autorisé dans la spécification.

Méthodes dans les constructeurs

L'utilisation de constructeurs pour créer des objets offre une grande flexibilité, et différents objets peuvent être définis en fournissant des paramètres.
Bien sûr, nous y ajoutons non seulement des attributs, mais également des méthodes.

L'exemple suivant crée un objet, utilise le paramètre name et ajoute une méthode sayHi:

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() { ... }
}
*/

Résumé

• Constructeur ou constructeur pour bref, c'est une fonction ordinaire, mais il existe une convention générale selon laquelle la première lettre du nom est en majuscule.

• Le constructeur est appelé en utilisant new, qui commence par créer un objet this vide, puis le renvoie avec un contenu rempli.

Nous pouvons utiliser le constructeur pour créer plusieurs objets similaires. Ce n'est pas le seul contenu de la journée, qui sera expliqué plus en détail plus tard.
Javascript fournit des constructeurs pour certains objets intégrés, tels que Date, Set, etc.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!