Tutoriel classique sur les fonctionnalités avancées de la programmation orientée objet JavaScript (digne de collection)

Cet article décrit les caractéristiques avancées de la programmation orientée objet en JavaScript. Partagez-le pour votre référence, comme suit:

1. Trois façons de créer des objets:

La première méthode de construction: nouvel objet

 var a = nouvel objet (); ax = 1, ay = 2;

La deuxième méthode de construction: Mesure directe de l'objet

 var b = {x: 1, y: 2};

La troisième méthode de construction: définir le type

 Point de fonction (x, y) {this.x = x; this.y = y;} var p = nouveau point (1,2);

2. Accédez à l'objet

Accéder aux propriétés de l'objet

Notation du support: héros ['nom']. ,

NOTATION POINT: HERO.NAME.

Si la propriété accessible n'existe pas, un non-défini sera retourné.

Méthodes pour accéder aux objets

Ajoutez une paire de supports après le nom de la méthode: Hero.Say ().

Une méthode d'accès comme l'attribut Access: Hero ['Say'] ().

3. Supprimer les attributs et méthodes

 // Créer un objet vide var Hero = {}; // Ajouter des attributs et des méthodes à Hero.Name = "JavaScript"; Hero.Value = "Helloworld"; Hero.SayName = function () {return "Hello" + Hero.Name;}; // Test Alert (Hero.Name); // Sortie javascriptAttalert (Hero.SayName ()); // Sortie bonjour javaScript // Supprimer l'attribut de nom de Hero Object Delete Hero.Name; // Test Alert (Hero.SayName ()); // Sortie bonjour indéfinie

4. Utilisez cette valeur

 // Créer un objet vide var Hero = {}; // Ajouter des attributs et des méthodes à Hero Object Hero.Name = "JavaScript"; Hero.Value = "Helloworld"; Hero.SayName = function () {return "hello" + this.name;}; // test alert (Hero.Name); // Sortie JavaScriptTalet (Hero.SayName ()); // Sortie bonjour javascript

Résumer:

① Ceci ici fait réellement référence à "cet objet" ou "objet actuel".

② L'utilisation de ceci est un problème pour la plupart des gens. Il n'est donc pas recommandé d'utiliser trop!

5. Objets intégrés

Les objets intégrés peuvent être à peu près divisés en trois groupes:

① Les objets de classe d'encapsulation de données - y compris l'objet, le tableau, le booléen, le nombre et la chaîne. Ces objets représentent différents types de données dans JavaScript, et tous ont leurs propres valeurs de retour de type différentes, ainsi que des états non définis et nuls.

② Objets de classe d'outils - y compris les objets utilisés pour fournir des traversées, telles que les mathématiques, la date, le regexp, etc.

③ Objets de classe d'erreur - y compris les objets d'erreur généraux et divers autres objets de classe d'erreur plus spéciaux. Ils peuvent nous aider à corriger l'état de travail du programme lorsque certaines exceptions se produisent.

6. objet objet

L'objet est l'objet parent de tous les objets de JavaScript, ce qui signifie que tous les objets sont hérités de l'objet objet.

Créer un objet vide:

 var objet = {}; var obj = new object ();

7.Assure d'objet

Les objets du tableau sont utilisés pour stocker plusieurs valeurs en une seule variable.

Créer un objet de tableau vide:

 var objet = {}; var obj = new Array ();

Par exemple 1:

 // Invert String Exemple // Définir une chaîne var str = "A, B, C, D, E, F, G"; // Utilisez la méthode Split () de l'objet String pour couper la chaîne en un tableau var arrR = str.split (","); // Utilisez la méthode reverse de l'objet de tableau pour inverser l'ordre des éléments dans le tableau. arr = arr.reverse (); // test d'alerte d'impression (arr.tostring ());

8.

Différences entre les objets de chaîne et les types de chaînes de base:

 var str = "hello"; var obj = new String ("world"); alert (typeof str); // typeof stringAlert (typeof obj); // type d'objet

Par exemple 1:

 // Exemple de déterminer si une chaîne contient une chaîne spécifiée // définir deux chaînes à juger var str = "ABCDEFG"; var substr = "efg"; / ** Définir la fonction pour juger si une chaîne contient une chaîne spécifiée * * First Paramètre: la chaîne à juger * * Second Paramètre: la chaîne à juger * / fonction sub (str, substr) {// Définir le string pour juger vers le string = String (str); // intercepter la chaîne jugée var result = string.substr (str.indexof (substr), substr.length); / ** déterminer si la chaîne interceptée est vide * * est vide, indiquant que la chaîne spécifiée ne contient pas la chaîne spécifiée * * non vide, indiquant que la chaîne spécifiée * / if (result == substr) {return;} else {return) false;}} alert (sub (str, substr));

9. Prototype

La fonction elle-même est également un objet contenant des méthodes et des propriétés. Maintenant, ce que nous voulons étudier, c'est une autre propriété de l'objet de fonction - Prototype.

Ajouter des méthodes et des propriétés à l'aide de prototypes

Réécrivez les propriétés des prototypes à l'aide de ses propres propriétés

Étendre les objets intégrés

Ajouter des méthodes et des propriétés à l'aide de prototypes

Vous trouverez ci-dessous pour créer un nouvel objet de fonction et définir certaines propriétés et méthodes:

 fonction héros (nom, couleur) {this.name = name; this.color = couleur; this.whatareyou = function () {return "Je suis un" + this.color + "" + this.name; }} var héros = nouveau héros ("javascript", "rouge"); alert (héros.whatareyou ()); // Sortie Je suis un javascript rouge

Ajoutez des propriétés et des méthodes à l'objet de fonction Hero ci-dessus:

 Hero.prototype.price = 100; Hero.prototype.rating = 3; Hero.prototype.getInfo = function () {return "Rating:" + this.rating + ", prix:" + this.price;} alert (Hero.getInfo ()); // Évaluation de la production: 3, prix: 100

La méthode ci-dessus peut également être fait comme ceci:

 Hero.prototype = {Price: 100, Note: 3, getInfo: function () {return "Rating:" + this.rating + ", prix:" + this.price; }};

Réécrivez les propriétés des prototypes à l'aide de ses propres propriétés

Que dois-je faire si les propres attributs de l'objet sont les mêmes que l'attribut prototype? La réponse est que les propres attributs de l'objet ont une priorité plus élevée que les attributs du prototype.

 fonction héros () {this.name = "jscript";} héros.prototype.name = "javascript"; var héros = new Hero (); alert (héros.name); // output JScriptDelete Hero.Name; alert (Hero.Name); // Sortie JavaScript

Étendre les objets intégrés

 // Ajouter une fonction à juger pour le prototype Array Object Array.prototype.inArray = fonction (couleur) {for (var i = 0, len = this.length; i <len; i ++) {if (this [i] === couleur) {return true; }} return false;} // définir un objet de tableau var a = ["rouge", "vert", "bleu"]; // test alert (a.inArray ("red")); //trueelert(a.inarray("yellow ")); //FAUX

10. Héritage

Si les deux classes sont du même type d'instance, il existe des relations entre elles. Nous appelons la relation généralisée entre les types de la même instance "héritage".

La relation d'héritage contient au moins trois significations:

① Les instances de sous-classes peuvent partager des méthodes de classes parents.

② Les sous-classes peuvent remplacer les méthodes de la classe parent ou étendre de nouvelles méthodes.

③ Les sous-classes et les classes de parents sont les deux "types" d'instances de sous-classe.

Dans JavaScript, "l'héritage" n'est pas pris en charge. C'est-à-dire qu'il n'y a pas de syntaxe héritée en JavaScript. En ce sens, JavaScript n'est pas un langage orienté objet direct.

11. Chaîne prototype

La chaîne prototype est la méthode d'héritage par défaut formulée par la norme ECMAScript.

Par exemple:

 fonction a () {this.name = "a"; this.toString = function () {return this.name};} function b () {this.name = "b";} function c () {this.name = "c"; this.age = 18; this.getage = function () {return this.age};} b.pototype = new a ();); c.pototype = new);

Explication:

L'objet est créé directement dans la propriété Prototype de l'objet B et n'étend pas le prototype d'origine de ces objets.

Une nouvelle entité est créée via un nouveau A () puis utilisée pour écraser le prototype de l'objet.

JavaScript est une langue qui repose entièrement sur des objets, et il n'y a pas de concept de classe.

Par conséquent, il est nécessaire de créer directement une entité avec un nouveau a () avant que le travail d'héritage pertinent ne puisse être achevé via les propriétés de l'entité.

Après avoir terminé cette mise en œuvre de l'héritage, toute modification, réécriture ou suppression de a () n'affectera pas b ().

Hérité du prototype uniquement:

 fonction a () {} a.prototype.name = "a"; a.prototype.tostring = function () {return this.name}; function b () {} b.prototype = a.prototype; b.prototype.name = "b"; function c () {} c.prototype = b.pototype; c.pototype.name = "c"; c.; = 18; c.prototype.getage = function () {return this.age};

L'héritage entre les objets (contenu étendu, ne peut pas l'être) (copie superficielle)

 // La fonction accepte un objet et renvoie sa fonction de copie ExtendCopy (p) {var z = {}; // définir un objet vide z pour (var i dans p) {// var i = 0; i <p.length; i ++ z [i] = p [i]; // Si vous êtes traité comme un tableau, vous pouvez comprendre} // attribut Uber: utilisez P comme parent de Z et Point Z vers le prototype de P Z.Uber = P; return z;} // définir l'objet a, mais l'objet a n'est pas un objet de fonction var a = {name: "a", toStr: function () {return this.name;}} // définir l'objet b, mais l'objet b n'est pas un objet de fonction var b = extendCopy (a); b.name = "b"; b.toStr = function () {return this.uber.tostr () + "," + this.name;}; // définir l'objet C, mais l'objet c n'est pas un objet de fonction var c = extendcopy (b); c.name = 18; alert (c.tostr ()); // Sortie A, B, 18

PS: de nombreuses dispositions de code dans le tutoriel ne sont pas standardisées. Voici quelques outils de formatage et d'embellissement de code JavaScript pour tout le monde:

Outil de mise en forme du code JavaScript:

http://tools.vevb.com/code/js

Outils d'embellissement / compression / formatage / de formatage du code JavaScript:

http://tools.vevb.com/code/jscompress

Tool de compression JSMin en ligne JS:

http://tools.vevb.com/code/jsMincompress

Pour plus d'informations sur JavaScript, veuillez consulter les sujets spéciaux de ce site: "Tutoriel axé sur les objets JavaScript", "Résumé des compétences de l'opération JSON dans JavaScript", "Résumé des compétences de commutation JavaScrip "Résumé des structures de données JavaScript et des compétences en algorithmes", "Résumé des algorithmes et techniques de traversée JavaScript" et "Résumé de l'utilisation des opérations mathématiques JavaScript"

J'espère que cet article sera utile à la programmation JavaScript de tous.