Javascript a-t-il un moyen de définir une classe ?

Javascript a des méthodes pour définir des classes. Méthode : 1. Utilisez le constructeur pour définir la classe, la syntaxe est "function name() {this.name = "...";}" 2. Utilisez la méthode "Object.create()" pour définir la classe. , la syntaxe est "var name = Object.create(...);"; 3. Définissez un constructeur dans la classe, définissez un objet d'instance dans la fonction, puis appelez à nouveau la fonction pour définir la classe.

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

JavaScript a-t-il un moyen de définir une classe

JavaScript a-t-il un moyen de définir une classe

Trois façons de définir une classe en Javascript

En programmation orientée objet, une classe est un objet A Le modèle définit les propriétés et les 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 qui doit être enseignée 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("喵喵喵");
　　}

Son principal inconvénient est qu'il est relativement compliqué, utilise ceci et un prototype, et 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, le standard international pour Javascript, propose une nouvelle méthode Objet.create ().

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. 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;
　　　　}
　　};

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.

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. Elle 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 d'instance sont générés :

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

À ce moment, si un objet d'instance modifie les données partagées, l'autre objet d'instance sera également affecté.

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

【Recommandations associées : tutoriel vidéo javascript, front-end web】

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!