Maison  >  Article  >  interface Web  >  Brève analyse des classes et des objets en JavaScript

Brève analyse des classes et des objets en JavaScript

一个新手
一个新手original
2017-09-09 13:48:291246parcourir

1. Méthode constructeur
C'est une méthode classique et une méthode qui doit être enseignée dans les manuels. 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 que j'ai écrits "Programmation orientée objet Javascript", je n'entrerai donc pas dans les détails ici. Son principal inconvénient est qu'il est relativement compliqué, qu'il utilise ceci et un prototype 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 d'ECMAScript, la norme internationale pour Javascript (la troisième édition est actuellement populaire ), a été proposée Une nouvelle méthode Object.create().
En utilisant 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, et ne peut pas partager de données entre des objets d'instance. Il s'agit d'une simulation de ". classe" Pas assez complet.
3. Approche minimaliste
Le programmeur néerlandais Gabor de Mooij a proposé une nouvelle méthode meilleure que Object.create(). Il a appelé cette méthode « approche minimaliste ». C'est aussi la méthode que je recommande.
3.1 Encapsulation
Cette méthode n'utilise pas ceci ni 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 createNew() pour générer des instances.

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

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

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

Lorsqu'elle est utilisée, 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, a une structure claire et élégante et est conforme à la construction traditionnelle de « programmation orientée objet », de sorte que le les fonctionnalités suivantes peuvent être facilement déployées.
3.2 Héritage
Laissez une classe hériter d'une autre classe, ce qui est très pratique à implémenter. Appelez simplement la méthode createNew() de ce dernier dans la méthode createNew() du premier.
Définissez d’abord une classe Animal.

 var Animal = {
    createNew: function(){
      var animal = {};
      animal.sleep = function(){ alert("睡懒觉"); };
      return animal;
    }
  };

Ensuite, dans la méthode createNew() de Cat, appelez la méthode createNew() d'Animal.

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

L'instance Cat obtenue de cette manière héritera à la fois de la classe Cat et de la classe Animal. ​

var cat1 = Cat.createNew();
  cat1.sleep(); // 睡懒觉

3.3 Propriétés privées et méthodes privées
Dans la méthode createNew(), tant que les méthodes et propriétés ne sont pas définies sur l'objet cat, elles sont privées .

  var Cat = {
    createNew: function(){
      var cat = {};
      var sound = "喵喵喵";
      cat.makeSound = function(){ alert(sound); };
      return cat;
    }
  };

La variable interne sound dans l'exemple ci-dessus ne peut pas être lue en externe et ne peut être lue que via la méthode publique makeSound() de cat.

 var cat1 = Cat.createNew();
  alert(cat1.sound); // undefined

3.4 Partage de données
Parfois, nous avons besoin que tous les objets d'instance puissent lire et écrire les mêmes données internes. Pour le moment, encapsulez simplement les données internes à l’intérieur de l’objet de classe et à l’extérieur de la méthode createNew().

  var Cat = {
    sound : "喵喵喵",
    createNew: function(){
      var cat = {};
      cat.makeSound = function(){ alert(Cat.sound); };
      cat.changeSound = function(x){ Cat.sound = x; };
      return cat;
    }
  };

Ensuite, deux objets instances sont générés :

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

A ce moment, s'il y a est un objet instance, si les données partagées sont modifiées, un autre objet instance sera également affecté.

  cat2.changeSound("啦啦啦");
  cat1.makeSound(); // 啦啦啦

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