Maison  >  Article  >  interface Web  >  Quelles sont les trois méthodes pour définir une classe en javascript

Quelles sont les trois méthodes pour définir une classe en javascript

WBOY
WBOYoriginal
2022-02-21 17:13:532565parcourir

Trois façons de définir une classe en JavaScript : 1. Utilisez le constructeur pour définir la classe, la syntaxe est "function name(){this.name=value;}" 2. Utilisez le "Object.create()" ; 3. , utilisez la méthode "createNew()" pour définir la classe.

Quelles sont les trois méthodes pour définir une classe en javascript

L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.

Quelles sont les trois méthodes de définition d'une classe en JavaScript

En programmation orientée objet, une classe est un modèle pour un objet, qui définit les propriétés et méthodes communes au même groupe d'objets (également appelés "instances") .

Le langage JavaScript ne prend pas en charge les "classes", mais vous pouvez utiliser certaines solutions de contournement pour simuler des "classes".

1. Méthode constructeur

C'est une méthode classique et une méthode incontournable dans les manuels scolaires. Il utilise un constructeur pour simuler une "classe" et utilise le mot-clé this en interne pour faire référence à l'objet instance.

function Cat(){
  this.name = "大毛";
}

Lors de la génération d'une instance, utilisez le nouveau mot-clé.

var cat1 = new Cat();
alert(cat1.name);   //大毛

Les attributs et méthodes de la classe peuvent également être définis sur l'objet prototype du constructeur.

Cat.prototype.makeSound = function(){
  alert("喵喵喵");
}

Pour une introduction détaillée à cette méthode, veuillez consulter la série d'articles "Programmation orientée objet JavaScript", je n'entrerai pas dans les détails ici. Son principal inconvénient est qu'il est compliqué à enseigner, qu'il utilise ceci et des prototypes, et qu'il est très laborieux à écrire et à lire.

2. Méthode Object.create()

Afin de résoudre les lacunes de la "méthode constructeur" et de générer des objets plus facilement, la cinquième édition de la norme internationale pour JavaScript ECMAScript (la troisième édition est actuellement populaire), une nouvelle méthode Object.create() est proposée.

Avec cette méthode, "classe" est un objet, pas une fonction.

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

Ensuite, utilisez directement Object.create() pour générer l'instance sans utiliser new.

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

Actuellement, les dernières versions de tous les principaux navigateurs (y compris IE9) ont déployé cette méthode. Si vous rencontrez un ancien navigateur, vous pouvez utiliser le code suivant pour le déployer vous-même.

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

Cette méthode est plus simple que la "méthode constructeur", mais elle ne peut pas implémenter de propriétés privées et de méthodes privées, ni partager des données entre des objets d'instance, et la simulation de "classes" n'est pas assez complète.

3. Méthode minimaliste

Le programmeur néerlandais Gabor de Mooij a proposé une nouvelle méthode meilleure que Object.create(). C'est aussi la méthode que je recommande.

3.1 Encapsulation

Cette méthode ne s'applique pas à ceci et au prototype, et le code est très simple à déployer, c'est probablement pourquoi on l'appelle la "méthode minimaliste".

Tout d'abord, il utilise également un objet pour simuler une "classe". Dans cette classe, définissez un constructeur caeateNew() pour générer des instances.

var Cat = {
  createNew: function(){
    //some code here
  }
};

Ensuite, dans carateNew(), définissez un objet instance et utilisez cet objet instance comme valeur de retour.

var Cat = {
  createNew: function(){
    var cat = {};
    cat.name = "大毛";
    car.makeSound = function(){
      alert("喵喵喵");
    };
  }
};

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

var cat1 = Cat.createNew();
cat1.makeSound();   //喵喵喵

L'avantage de cette méthode est qu'elle est facile à comprendre, qu'elle a une structure claire et élégante et qu'elle est conforme à la construction traditionnelle de « programmation orientée objet », de sorte que les fonctionnalités suivantes peuvent être facilement déployées.

Recommandations associées : Tutoriel d'apprentissage Javascript

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn