Introduction détaillée aux cours de compétences JavaScript_javascript

En JavaScript, vous pouvez utiliser des classes pour implémenter la programmation orientée objet. Cependant, les classes en JavaScript sont différentes de celles en Java, et leurs définitions et utilisations correspondantes sont également différentes.

Définition des classes en JavaScript

En JavaScript, tous les objets dérivés du même objet prototype (prototype) forment une classe ; c'est-à-dire qu'une classe en JavaScript est le concept d'une collection d'objets si deux objets ont le même prototype, alors ils appartiennent. à la même classe ; les classes en JavaScript n'ont même pas besoin d'un nom de classe. Prenons comme exemple le code suivant :

Copier le code Le code est le suivant :

var p = {x:42};
var a = Objet.create(p);
var b = Objet.create(p);
console.log(a === b);//false
console.log(Object.getPrototypeOf(a) === Object.getPrototypeOf(b));//true

Dans l'exemple ci-dessus, les objets a et b ont le même objet prototype (prototype) p, donc a et b appartiennent à la même classe (bien qu'aucune de ces classes n'ait de nom de classe), et ils héritent de la valeur du prototype objet p comme 42 attribut x.

Comme vous pouvez le voir sur cet exemple, l'objet prototype fonctionne comme un modèle et plusieurs objets peuvent en être dérivés/créés. Son statut est le même que le code de classe dans le langage Java. . Le cœur de la définition. L'objet prototype dans l'exemple suivant ressemble davantage à du code de classe :

Copier le code Le code est le suivant :

var p = {
INCREMENT_BY : 1,
incrément : fonction(x){
retourner x this.INCREMENT_BY;
>
>
var a = Objet.create(p);
var b = Objet.create(p);
console.log(a.increment(7));//8
console.log(b.increment(9));//10

Dans l'exemple ci-dessus, l'objet prototype p définit une propriété (INCREMENT_BY) avec une valeur de 1 et une fonction nommée incrément ; les objets a et b obtiennent les fonctions INCREMENT_BY et incrément à partir du modèle p. Lors de l'appel de la fonction d'incrémentation de l'objet a ou b, JavaScript tentera d'obtenir la valeur INCREMENT_BY de a ou b (this.INCREMENT_BY) ; puisque INCREMENT_BY est obtenu à partir de p, sa valeur est entièrement 1 - obtenue à partir du modèle, la valeur They sont toutes les mêmes variables, similaires aux variables statiques en Java, donc dans l'exemple ci-dessus, tous les caractères majuscules sont utilisés lors du nom de la variable INCREMENT_BY.

Dans l'exemple ci-dessus, tous les objets créés à partir du modèle p (ces objets appartenant à la même classe) ont exactement les mêmes propriétés et comportements. Mais en fait, pour différents objets d'une même classe, en plus d'avoir les attributs/comportements définis par la classe, ils ont souvent des attributs et des comportements uniques. Par conséquent, si vous devez utiliser le modèle de prototype comme classe, vous devez personnaliser chaque objet qui en dérive :

Copier le code Le code est le suivant :

var p = {
INCREMENT_BY : 1,
incrément : fonction(x){
return x this.INCREMENT_BY this.custom_increment_by;
>
>
var a = Objet.create(p);
var b = Objet.create(p);
a.custom_increment_by = 0;
b.custom_increment_by = 1;
console.log(a.increment(7));//8
console.log(b.increment(9));//11

Dans cet exemple, les objets a et b créés à partir du modèle p ont une variable custom_increment_by dont les valeurs ne sont pas nécessairement égales les unes aux autres, et le résultat final de leur fonction incrément() est lié à la valeur de custom_increment_by. De manière générale, la personnalisation de nouveaux objets se fait souvent dans une fonction unifiée :

Copier le code Le code est le suivant :

var p = {
INCREMENT_BY : 1,
incrément : fonction(x){
return x this.INCREMENT_BY this.custom_increment_by;
>
>
fonction getIncrementalClassObject(customIncrementByValue){
var incrémentalObj = Object.create(p);
incrémentalObj.custom_increment_by = customIncrementByValue;
retourner incrémentalObj;
>
var a = getIncrementalClassObject(0);
var b = getIncrementalClassObject(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11

De cette manière, la définition d'une classe se complète grâce à l'objet prototype p et à la fonction getIncrementalClassObject() : vous pouvez obtenir des objets dont les objets prototypes sont p en appelant la fonction getIncrementalClassObject(), et ces nouveaux objets peuvent être créés lors de l'appel de la fonction getIncrementalClassObject(). Effectuez quelques personnalisations. Il convient de noter que cette classe définie n'a pas de nom de classe pour le moment. Pour faciliter la description, appelons-la Incrémentale.

En regardant le travail effectué dans la fonction getIncrementalClassObject(), vous pouvez voir que le processus de création d'un nouvel objet à partir de la classe Incremental est le suivant :

1. Créez un objet vide et définissez son objet prototype comme p.
2. Personnalisez cet objet vide nouvellement créé en fonction de différentes valeurs de paramètres.
3. Renvoyez le nouvel objet personnalisé.

En JavaScript, vous pouvez compléter rapidement la définition d'une classe et la création de nouveaux objets en utilisant Constructor (constructeur).

Constructeur en JavaScript

Comme vous pouvez le voir dans l'exemple ci-dessus de la classe Incremental, la définition d'une nouvelle classe nécessite deux parties de code : la création d'un objet prototype en tant que modèle et la création d'une fonction personnalisée pour initialiser le nouvel objet lors de la création d'un nouvel objet ; une classe passe par trois processus : spécifier l'objet prototype du nouvel objet, personnaliser/initialiser le nouvel objet et renvoyer le nouvel objet. En JavaScript, tout cela peut être fait via Constructor (constructeur).

Constructor en JavaScript est une fonction responsable de l'initialisation de nouveaux objets ; et le prototype de cette fonction Constructor est utilisé comme modèle pour créer de nouveaux objets. En prenant toujours la classe incrémentale ci-dessus comme exemple, après avoir utilisé Constructor pour réécrire le code, cela ressemblera à ceci :

Copier le code Le code est le suivant :

function Incremental(customIncrementByValue){
This.custom_increment_by = customIncrementByValue;
>
Incrémental.prototype = {
INCREMENT_BY : 1,
incrément : fonction(x){
return x this.INCREMENT_BY this.custom_increment_by;
>
>

var a = new Incremental(0);
var b = new Incremental(1);
console.log(a.increment(7));//8
console.log(b.increment(9));//11

Le processus d'utilisation de la fonction Constructeur pour créer un nouvel objet via le mot-clé new passe en fait par les étapes suivantes :

Créez un nouvel objet vide.

1. Pointez l'objet prototype de cet objet vers l'attribut prototype de la fonction constructeur.
2. Utilisez cet objet comme paramètre pour exécuter la fonction constructeur.
3. Il s’agit du même travail effectué dans la fonction précédente getIncrementalClassObject().

Nom de la classe

Lorsque vous utilisez Constructor pour créer un objet, l'objet correspondant a également un "nom de classe", qui peut être vérifié à partir du résultat de l'opérateur instanceof :

Copier le code Le code est le suivant :

console.log (une instance d'Incrémental);//true
console.log(b instanceof Incremental);//true

Cependant, l'opérateur instanceof ne détermine pas si l'objet est créé par le constructeur incrémental. L'opérateur instanceof détermine uniquement si l'objet prototype de l'objet est Incremental.prototype. Lorsqu'il y a deux constructeurs avec le même prototype, l'opérateur instanceof retournera true uniformément sans distinguer quel constructeur est utilisé pour créer l'objet.

Copier le code Le code est le suivant :

fonction Incremental2(customIncrementByValue){
This.custom_increment_by = customIncrementByValue 3;
>
Incremental2.prototype = Incremental.prototype;
console.log (une instance d'Incremental2);//true