Maison > interface Web > js tutoriel > le corps du texte

Une brève discussion sur la réalisation de classes orientées objet dans les connaissances JavaScript_Basic

WBOY
Libérer: 2016-05-16 16:27:59
original
1339 Les gens l'ont consulté

Un objet est tout ce que les gens veulent étudier. Des entiers les plus simples aux avions complexes, ils peuvent être considérés comme des objets. Il peut non seulement représenter des choses spécifiques, mais aussi des règles abstraites, des plans ou des événements. --Cité de l'Encyclopédie Baidu

La programmation orientée objet est actuellement le modèle de programmation le plus populaire. Mais ce qui est frustrant, c’est que JavaScript, l’application frontale la plus utilisée, ne prend pas en charge la programmation orientée objet.

JavaScript n'a pas de caractères de contrôle d'accès, il n'a pas de mot-clé class pour définir une classe, il ne prend pas en charge extend ou colon pour l'héritage et il n'utilise pas virtual pour prendre en charge les fonctions virtuelles. Cependant, Javascript est flexible. langage.Suivons. Voyons comment Javascript sans le mot-clé class implémente la définition de classe et crée des objets.

Définir une classe et créer un objet instance de la classe

En Javascript, nous utilisons des fonctions pour définir des classes, comme suit :

Copier le code Le code est le suivant :

fonction Forme()
{
varx=1;
var y=2;
}

Vous pourriez dire, doute ? N'est-ce pas une fonction déterminante ? Oui, c'est une fonction de définition. Nous définissons une fonction Shape et initialisons x et y. Cependant, si vous le regardez sous un autre angle, il s'agit de définir une classe Shape, qui a deux attributs x et y, et les valeurs initiales sont respectivement 1 et 2. Cependant, le mot-clé que nous utilisons pour définir le. la classe est une fonction au lieu d'une classe.

Ensuite, on peut créer un objet aShape de la classe Shape, comme suit :

Copier le code Le code est le suivant :

var aShape = new Shape();

Définir les propriétés publiques et privées

Nous avons créé un objet aShape, mais lorsque nous essayons d'accéder à ses propriétés, une erreur se produit, comme suit :

Copier le code Le code est le suivant :

aShape.x=1;

Cela montre que les propriétés définies avec var sont privées. Nous devons utiliser ce mot-clé pour définir les propriétés publiques.

Copier le code Le code est le suivant :

fonction Forme()
{
Ceci.x=1;
Ceci.y=2;
}

De cette manière, nous pouvons accéder aux attributs de Shape, tels que :

Copier le code Le code est le suivant :

aShape.x=2;

D'accord, nous pouvons résumer en nous basant sur le code ci-dessus : utilisez var pour définir les attributs privés de la classe, et utilisez-le pour définir les attributs publics de la classe.

Définir les méthodes publiques et privées

En Javascript, une fonction est une instance de la classe Function. Function hérite indirectement d'Object. Par conséquent, une fonction est également un objet. Par conséquent, nous pouvons utiliser la méthode d'affectation pour créer une fonction. attribuez une fonction à une classe. Une variable d'attribut, alors cette variable d'attribut peut être appelée une méthode car c'est une fonction exécutable. Le code est le suivant :

Copier le code Le code est le suivant :

fonction Forme()
{
varx=0;
var y=1;
This.draw=function()
{
            //imprimer;
};
}

Nous avons défini un dessin dans le code ci-dessus et lui avons attribué une fonction. Ensuite, nous pouvons appeler cette fonction via aShape, qui est appelée une méthode publique en POO, telle que :

Copier le code Le code est le suivant :

aShape.draw();

S'il est défini avec var, alors ce tirage devient privé, ce qui est appelé une méthode privée en POO, telle que :

Copier le code Le code est le suivant :

fonction Forme()
{
varx=0;
var y=1;
var draw=fonction()
{
            //imprimer;
};
}

De cette façon, vous ne pouvez pas utiliser aShape.draw pour appeler cette fonction.

Constructeur

Javascript ne supporte pas la POO, et bien sûr il n'y a pas de constructeur. Cependant, nous pouvons simuler nous-mêmes un constructeur et le laisser appeler automatiquement lors de la création de l'objet. Le code est le suivant :

Copier le code Le code est le suivant :

fonction Forme()
{
var init = fonction()
{
//Code constructeur
};
init();
}

A la fin de Shape, nous avons appelé artificiellement la fonction init. Ensuite, lorsqu'un objet Shape est créé, init sera toujours automatiquement appelé et notre constructeur pourra être simulé.

Constructeur avec paramètres

Comment faire prendre des paramètres au constructeur ? En fait, c'est très simple. Il suffit d'écrire les paramètres à passer dans la liste des paramètres de la fonction, comme :

Copier le code Le code est le suivant :

fonction Forme(ax,ay)
{
varx=0;
var y=0;
var init = fonction()
{
//Constructeur
         x=ax;
y=oui;
};
init();
}

De cette façon, nous pouvons créer des objets comme celui-ci :

Copier le code Le code est le suivant :

var aShape = new Shape(0,1);

Propriétés statiques et méthodes statiques

Comment définir des propriétés et méthodes statiques en Javascript ? Comme indiqué ci-dessous :

Copier le code Le code est le suivant :

fonction Forme(ax,ay)
{
varx=0;
var y=0;
var init = fonction()
{
//Constructeur
         x=ax;
y=oui;
};
init();
>
Shape.count=0; //Définit un nombre d'attributs statiques. Cet attribut appartient à la classe, pas à l'objet.
Shape.staticMethod=function(){};//Définir une méthode statique

Avec les propriétés et méthodes statiques, nous pouvons y accéder en utilisant le nom de la classe, comme suit :

Copier le code Le code est le suivant :

alerte ( aShape.count );
aShape.staticMethod();

Remarque : les propriétés et méthodes statiques sont publiques. Jusqu'à présent, je ne sais pas comment rendre les propriétés et méthodes statiques privées ~.

Accéder aux propriétés publiques et privées de cette classe dans les méthodes

Accédez à vos propres propriétés dans la méthode de classe. Javascript a différentes méthodes d'accès pour les propriétés publiques et privées. Veuillez consulter le code suivant :

Copier le code Le code est le suivant :

fonction Forme(ax,ay)
{
varx=0;
var y=0;
Ceci.gx=0;
This.gy=0;
var init = fonction()
{
           x=ax;//Pour accéder aux propriétés privées, écrivez simplement le nom de la variable directement
y=oui;
This.gx=ax;//Pour accéder aux propriétés publiques, vous devez ajouter this.
avant le nom de la variable This.gy=ay;
};
init();
}

Notes à ce sujet

D'après l'expérience de l'auteur, cela dans la classe ne pointe pas toujours vers notre objet lui-même. La raison principale est que Javascript n'est pas un langage POO. De plus, les fonctions et les classes sont définies avec des fonctions, ce qui bien sûr en provoquera. problèmes mineurs.

La situation dans laquelle ce pointeur pointe vers une erreur est généralement dans le traitement d'un événement. Nous voulons que la fonction membre d'un objet réponde à un événement lorsque l'événement est déclenché, le système appellera notre fonction membre. this Le pointeur n'est plus notre propre objet. Bien sûr, l'appeler dans la fonction membre provoquera certainement une erreur.

La solution est que nous enregistrons cela dans un attribut privé au début de la définition de la classe. À l'avenir, nous pourrons utiliser cet attribut pour le remplacer. J'utilise cette méthode pour utiliser ce pointeur qui est assez sûre et sans souci~

Modifions le code pour résoudre ce problème. Comparez le code de la partie 6 et vous comprendrez :

Copier le code Le code est le suivant :

fonction Forme(ax,ay)
{
var _this=this; //Enregistrez ceci et remplacez this par _this à l'avenir, afin que vous ne soyez pas dérouté par this
varx=0;
var y=0;
_this.gx=0;
_this.gy=0;
var init = fonction()
{
           x=ax;//Pour accéder aux propriétés privées, écrivez simplement le nom de la variable directement
y=oui;
​​​​ _this.gx=ax;//Pour accéder aux propriétés publiques, vous devez ajouter ceci.
avant le nom de la variable ​​​​ _this.gy=ay;
};
init();
}

Ci-dessus, nous avons expliqué comment définir des classes en Javascript, créer des objets de classes, créer des propriétés et des méthodes publiques et privées, créer des propriétés et des méthodes statiques, simuler des constructeurs et discuter de cela, sujet aux erreurs.

C'est tout pour parler de l'implémentation de la POO en Javascript. Ce qui précède est le contenu le plus pratique. Généralement, Javascript est utilisé pour définir des classes et le code ci-dessus suffit pour créer des objets. Bien entendu, vous pouvez également utiliser mootools ou prototype pour définir des classes et créer des objets. J'ai utilisé le framework mootools et je pense qu'il est très bon. Il propose une simulation de classe Javascript plus complète et prend en charge l'héritage de classe. Les lecteurs intéressés peuvent l'essayer. Bien sûr, si vous utilisez un framework, vous devez inclure les fichiers d'en-tête js pertinents dans votre page Web, j'espère donc toujours que les lecteurs pourront créer des classes sans framework. De cette façon, le code sera plus efficace et vous pourrez également. tu vois, ce n'est pas gênant de créer une classe simple~

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!