Écriture de la classe JavaScript

Nous savons que dans JavaScript, il n'y a pas de concept de classe. Toutes les instances d'objets de classe héritent des propriétés du même objet prototype, donc l'objet prototype est le cœur de la classe.

La classe est une abstraction d'objet, et l'objet est une instance spécifique de la classe. La classe est abstraite, elle ne consomme pas de mémoire, tandis que l'objet est spécifique, il occupe de l'espace de stockage. —— Wikipédia

Les besoins de JavaScript anciens étaient très simples, principalement écrits en fonction, puis en écriture procédurale, puis lentement introduits l'idée de développement orienté objet, puis lentement écrit en classe.

En JavaScript, l'essence de la écriture de la classe est principalement le constructeur+Prototype. Below, let's discuss several ways to write classes in JavaScript:

Méthode du constructeur

/**
* Classe Person : définit une personne, avec l'attribut name et la méthode getName
  */
<script>
  function Person(name) {
    this.name = name;
    this.getName = function(){
      return this.name;
    }
  }
  //Nous instançons plusieurs objets ici
  var p1 = new Person("trigkit4");
  var p2 = new Person("mike");
  console.log(p1 instanceof Person);//true
  console.log(p2 instanceof Person);//true
</script>

Par les résultats de la sortie de la console ci-dessus, nous pouvons savoir que p1et p2C'est effectivement un objet instance de la classe Person. L'opérateur instanceof à gauche est l'objet de la classe à vérifier, et à droite, c'est le constructeur de la classe. Ici, instanceof est utilisé pour vérifier l'objet p1Il appartient-il à la classe Person?.

Les avantages de cette méthode sont : nous pouvons construire des instances d'objets différentes en fonction des paramètres, mais les inconvénients sont que chaque fois qu'une instance d'objet est construite, la méthode getName est générée, ce qui cause un gaspillage de mémoire.

Nous pouvons utiliser une fonction externe pour remplacer la méthode de la classe, permettant à chaque objet de partager la même méthode. La classe modifiée est la suivante :

//Fonction externe
<script>
  function getName() {
    return this.name;
  }
  function Person(name) {
    this.name = name;
    this.getName = getName;//
  }
</script>

Méthode prototype

<script>
  function Person() {} ;
  Person.prototype.name = "trigkit"4";//Les attributs de la classe sont tous placés sur le prototype
  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());//Je suis trigkit4
</script>

Les inconvénients de la méthode prototype sont qu'ils ne peuvent pas être utilisés pour construire des instances d'objets via des paramètres (généralement, les propriétés de chaque objet ne sont pas les mêmes), les avantages sont que toutes les instances d'objets partagent la méthode getName (par rapport à la méthode constructeur), sans gaspiller de mémoire.

Constructeur+Méthode prototype
Prendre les avantages des deux premiers :
a) Définir les attributs de la classe par le biais de constructeurs (champs).
b) Définir les méthodes de la classe de manière prototype.

<script>
  function Person(name) {
    this.name = name;
  }
  //Les caractéristiques du prototype permettent aux instances d'objets de partager la méthode getName
  Person.prototype.getName = function() {
    return " I'm " + this.name;
  }
</script>

De cette manière, nous pouvons à la fois construire des objets avec différentes propriétés et partager des méthodes entre les instances d'objets, sans gaspiller de mémoire.

Pour rendre le style de code JavaScript plus compact, nous plaçons le code des méthodes prototype à l'intérieur des accolades de function Person.

<script>
  function Person(name) {
    this.name = name;
    Person.prototype.getName = function() {
      return name;//Il ne faut pas utiliser this.name
    }
  }
  var p1 = new Person('trigkit"4');
  console.log(p1.getName());//trigkit4
</script>

Ici, nous devons connaître plusieurs méthodes de définition de la classe, en plus de la fonction constructeur ci-dessus, il y a :

La méthode Object.create()
En utilisant cette méthode, "classe" est un objet et non une fonction.

 var Person = {
    name : "trigkit"4"
    age : 21,
    run: function() {
      alert("J'aime courir");
    }
  }

Ensuite, créez directement l'instance à l'aide de Object.create(), sans utiliser new.

var p1 = Object.create(Person);
  alert(p1.age);//21
  p1.run();//J'aime courir

Cette méthode est plus simple que la méthode "constructeur", mais elle ne peut pas réaliser les propriétés et méthodes privées, et les objets instance ne peuvent pas partager de données, ce qui ne simule pas suffisamment bien la classe.

Méthode createNew()
Cette méthode n'a pas besoin d'utiliser this et prototype. Elle consiste à simuler une classe en utilisant un objet, puis à définir un constructeur createNew() dans la classe, puis à définir l'objet instance dans createNew(), et à retourner cette instance d'objet.

<script>
  var Person = {
    createNew : function () {
      var person = {};
      person.name = "trigkit4";
      person.run = function(){
        alert("J'aime courir");
      };
      return person;
    }
  }
</script>

Lors de l'utilisation, appeler la méthode createNew() pour obtenir l'objet instance.

 var p1 = Person.createNew();
  p1.run();//J'aime courir

Cette méthode est en fait très similaire à la méthode d'écriture des objets littéraux, mais l'une est séparée par des virgules et l'autre par des points-virgules.

C'est tout pour cet article. J'espère que cela pourra aider à votre apprentissage et que vous serez nombreux à soutenir le tutoriel d'entraînement.

Déclaration : Le contenu de cet article est extrait du réseau, propriété de ses auteurs respectifs. Le contenu est fourni par les utilisateurs d'Internet et téléversé spontanément. Ce site ne détient pas de propriété intellectuelle, n'a pas été édité par l'homme, et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de violation de droits d'auteur, n'hésitez pas à envoyer un e-mail à : notice#oldtoolbag.com (veuillez remplacer # par @ lors de l'envoi d'un e-mail pour signaler une violation, et fournir des preuves pertinentes. Une fois vérifié, ce site supprimera immédiatement le contenu suspect de violation de droits d'auteur.)