Programmation orientée objet. Travailler avec des objets dans JavaScript - Utiliser des fonctions - Théorie et pratique

Objets

L'objet est un type de données fondamental dans la langue javascript. Un objet - Ceci est un composant: il combine un ensemble de valeurs (valeurs simples ou d'autres objets) et vous permet d'enregistrer et d'extraire ces valeurs par nom.

L'objet est une collection de propriétés non ordonnées, chacune ayant un nom et une valeur. Les noms de propriété sont des lignes afin que nous puissions dire que les objets affichent les chaînes aux valeurs. Un tel affichage de chaînes aux valeurs peut être appelé différemment: vous pouvez déjà connaître une telle structure de données fondamentale comme "hachage", "dictionnaire" ou "tableau associatif". Cependant, l'objet est plus qu'un simple affichage de lignes aux valeurs.

En plus de ses propres propriétés, les objets de la langue javascript peuvent également hériter des propriétés d'autres objets appelés "prototypes". Les méthodes de l'objet sont des représentants typiques des propriétés héritées et " héritage par des prototypes«C'est une caractéristique clé de la langue javascript.

Les objets de JavaScript sont dynamiques - généralement, ils vous permettent d'ajouter et de supprimer des propriétés - mais ils peuvent également être utilisés pour simuler des objets statiques et des "structures" en langues de programmation avec un système de type statique. De plus, ils peuvent être utilisés (sinon de prendre en compte les objets affichent les chaînes aux valeurs) pour représenter les ensembles de chaînes.

Toute valeur dans la langue JavaScript, qui n'est pas une chaîne, un nombre, une vraie, une fausse, null ou non définie est un objet. Et même des chaînes, des chiffres et des valeurs logiques qui ne sont pas des objets peuvent se comporter en tant qu'objets immuables (avoir une chaîne d'objets de chaîne, un nombre, etc.).

Les objets sont des valeurs variables et des opérations avec eux sont effectuées par référence et non par la valeur. Si la variable X fait référence à l'objet et que l'instruction est effectuée Var Y \u003d X; , Dans la variable Y, la liaison sera enregistrée sur le même objet et non sa copie. Toute modification effectuée dans l'objet à l'aide d'une variable Y reflète également la variable x.

La propriété a un nom et une valeur. Le nom de la propriété peut être n'importe quelle chaîne, y compris une chaîne vide, mais l'objet ne peut pas avoir deux propriétés avec le même nom. La valeur de la propriété peut être une valeur autorisée dans JavaScript, ou (dans ECMAScript 5) la fonction de lecture ou d'écriture (ou les deux).

En plus des noms et des valeurs, chaque propriété a un certain nombre de valeurs associées appelées. attributs de propriété :

Attribut Écritable Définit la disponibilité des valeurs de propriété pour l'enregistrement.

Attribut énorme Détermine la disponibilité du nom de la propriété à énumérer dans le cycle pour / en cycle.

Attribut configurable Définit la capacité de personnaliser, c'est-à-dire Supprimer des propriétés et des modifications apportées à ses attributs.

Avant que la norme ECMAScript 5 n'apparaisse, toutes les propriétés des objets, programme crééDisponible pour l'enregistrement, l'énumération et les paramètres. ECMAScript 5 prévoit la possibilité de configurer vos attributs de propriétés.

En plus des propriétés, chaque objet a trois objet d'attribut :

Attribut classer Contient une chaîne avec le nom de la classe d'objet et définit le type d'objet.

Drapeau eXTENSIBLE. (Dans ECMAScript 5) indique la possibilité d'ajouter de nouvelles propriétés à l'objet.

Enfin, ce qui suit est une description de certains termes qui nous aideront à distinguer trois catégories étendues d'objets dans JavaScript et deux types de propriétés:

Objet de langue de base

Ceci est un objet ou une classe d'objets définis par la spécification ECMAScript. Les tableaux, fonctions, dates et expressions régulières (par exemple) sont des objets de la langue de base.

Objet de l'exécution

Ceci est un objet défini par l'exécution (tel qu'un navigateur Web), où l'interprète JavaScript est construit. Les objets HTMLElement représentant la structure de la page Web dans le client JavaScript sont des objets d'exécution. Les objets du temps d'exécution peuvent également être les objets de la langue de base, par exemple lorsque l'environnement d'exécution définit les méthodes qui sont des objets de fonction classiques du JavaScript de base.

Objet utilisateur

Tout objet créé à la suite de l'exécution du code de programme JavaScript.

Propre propriété

Cette propriété est définie directement dans cet objet.

Propriété héritée

Cette propriété définie par le prototype de l'objet.

Créer des objets

Les objets peuvent être créés à l'aide des lettres d'objet, de nouveaux mots-clés et (dans ECMAScript 5) Fonctions Objet.create ().

Objets littéraux

Le moyen le plus simple de créer un objet est d'inclure un programme littéral objet. L'objet littéral est une liste de propriétés (noms de paires / valeur), enfermé par des crochets, séparés par des virgules. Le nom de propriétés peut être un identifiant ou un littéral à chaîne (autorisé à utiliser une chaîne vide). La valeur de la propriété peut être une expression autorisée dans JavaScript - la valeur de l'expression (ceci peut être une valeur ou un objet simple) deviendra la valeur de la propriété.

Vous trouverez ci-dessous plusieurs exemples de création d'objets:

Var vide \u003d (); // objet sans propriétés var point point \u003d (x: 0, y: 0); // deux propriétés var point2 \u003d (x: point.x, y: point.y + 1); // Valeurs plus complexes Var Site \u003d ("Site URL": "www..net framework", // et des traits d'union, ip. Citations Auteur: (// La valeur de cette propriété est FirstName: "alexandr" , // objet. Veuillez noter que le nom de famille: "Frolov" // Les noms de ces propriétés sans citations.));

Dans ECMAScript 5 (et dans certaines implémentations ECMAScript 3), il est permis d'utiliser les mots réservés comme noms des propriétés sans guillemets. Cependant, en général, les noms de propriété qui coïncident avec des mots réservés, dans l'ECMA-Script 3 devraient être entre guillemets. Dans ECMAScript 5, la dernière virgule, après la dernière propriété de l'objet littéral, est ignorée. Dans la plupart des implémentations, les engagements d'achèvement de ECMAScript 3 sont également ignorés, mais c'est-à-dire interprète leur présence comme une erreur.

L'objet littéral est une expression qui crée et initialise un nouvel objet chaque fois que cette expression est calculée. La valeur de chaque propriété est toujours calculée lorsque la valeur littérale est calculée. Cela signifie que, avec le seul objet de l'objet, vous pouvez créer beaucoup de nouveaux objets si ce littéral est placé dans le corps du cycle ou une fonction qui sera appelée plusieurs fois, et que les propriétés de ces objets peuvent différer les unes des autres. .

Créer des objets à l'aide du nouvel opérateur

Le nouvel opérateur crée et initialise un nouvel objet. Cet opérateur doit suivre le nom de la fonction. La fonction utilisée de cette manière est appelée constructeur et sert à initialiser l'objet nouvellement créé. JavaScript de base inclut de nombreux constructeurs intégrés pour créer des objets de base. Par example:

Var o \u003d nouvel objet (); // crée un nouvel objet vide: identique à () var a \u003d nouveau tableau (); // Créer un tableau vide: identique à Var D \u003d nouvelle date (); // Créer un objet de date représentant l'heure actuelle VAR R \u003d Nouveau REGEXP ("JS"); // Créer un objet Regexp pour les opérations de mappage avec modèle

Outre ces constructeurs intégrés, il est possible de définir leurs propres constructeurs pour initialiser les objets nouvellement créés. À propos de la manière dont il est fait est décrit dans le prochain article.

Objet.create ()

ECMAScript 5 Standard définit la méthode Object.create (), qui crée un nouvel objet et utilise son premier argument comme prototype de cet objet. En plus d'objet.create () peut recevoir un deuxième argument facultatif décrivant les propriétés d'un nouvel objet.

Objet.create () est une fonction statique et non par la méthode causée par un objet relativement spécifique. Pour provoquer cette fonctionnalité, il suffit de lui donner l'objet de prototype souhaité:

// obj hérite des propriétés x et y var obj \u003d objet.create ((x: 1, y: 2));

Pour créer un objet qui n'a pas de prototype peut être transmis valeur nullMais dans ce cas, l'objet nouvellement créé n'héritera aucune propriété ou méthodes de base, comme Tostring () (ce qui signifie que cet objet ne peut pas être utilisé dans des expressions avec l'opérateur +):

// obj2 n'hérite pas des propriétés ni var obj2 \u003d objet.create (null) méthodes;

Si le programme doit créer un objet vide conventionnel (lequel, par exemple, est renvoyé par la littéral () ou la nouvelle expression objet ()), passez dans le premier objet d'argument.Prototype:

// obj3 est similaire à l'objet créé // avec () ou nouvel objet () var obj3 \u003d objet.create (objet.pototype);

Capacité à créer de nouveaux objets avec des prototypes arbitraires (par exemple: la possibilité de créer des "héritiers" à partir d'objets) est un outil puissant dont l'action peut être migrée vers ECMAScript 3 à l'aide d'une fonction présentée dans l'exemple ci-dessous:

// hériter () renvoie l'objet nouvellement créé, hérité des propriétés // prototype P objet. Utilise l'objet.create () fonction de ECMAScript 5, // S'il est défini, sinon la réception ancienne est utilisée. Fonction hériter (p) (si (p \u003d\u003d null) jet TypeError (); // p ne peut pas être la null si la valeur (objet.create) // si objet.create () est définie ... renvoyer l'objet.create ( P); // l'utiliser. Var t \u003d typeof p; // sinon, découvrez le type et vérifiez-le si (T! \u003d\u003d "objet" && t! \u003d\u003d "fonction" the TypeError (); Fonction F () (); // Déterminez le constructeur vide. F.Prototype \u003d p; // enregistrement sur son prototype // lien vers l'objet p. Renvoyer nouveau f (); // utilisation f () pour créer // "Heir "Objet p.)

La mise en œuvre de la fonction hérite () acquiert plus de sens dès que nous vous familiariserons avec des concepteurs dans le prochain article. Pour l'instant, considérez simplement qu'il renvoie un nouvel objet, héritant les propriétés de l'objet dans l'argument. Veuillez noter que la fonction hérite () n'est pas un remplacement complet de objet.create (): il ne vous permet pas de créer des objets sans prototype et n'accepte pas le deuxième argument facultatif comme objet.create ().

Obtenir et modifier les propriétés

Vous pouvez obtenir la valeur de la propriété à l'aide des opérateurs du point (.) Et des crochets (). À gauche de l'opérateur doit être une expression qui renvoie l'objet. Lorsque vous utilisez l'opérateur, le point de droite doit être un identifiant simple correspondant au nom de la propriété. Lorsque vous utilisez des supports carrés entre crochets, une expression qui renvoie une chaîne contenant le nom de la propriété souhaitée doit être spécifiée:

// utilisateur d'objet simple vari \u003d (Connexion: "kot86", nom: "alexandr", âge: 26); var login \u003d user.login; // Obtenez la propriété "Login" de l'utilisateur Var Name \u003d User.Name; // Obtenir la propriété Nom de l'utilisateur Var Age \u003d User ["Age"] objet; // obtenir la propriété "Âge" de l'objet utilisateur

Pour créer une nouvelle propriété ou modifier la valeur de la propriété existante, les opérateurs du point et des crochets sont également utilisés, comme dans les opérations des valeurs de propriétés de lecture, mais l'expression elle-même est placée à gauche de l'opérateur d'affectation:

Utilisateur.age \u003d 28; // change la valeur de l'utilisateur "Âge" de la propriété ["Login"] \u003d "kot84"; // modifier la valeur de l'utilisateur "login" ["nom de famille"] \u003d "frolov"; // Créer une nouvelle propriété "Nom"

Dans l'identifiant ECMAScript 3, le point suivant ne peut pas être un mot réservé: vous ne pouvez pas enregistrer l'appel à la propriété O.Pour ou O.Class, car pour un mot clé, et la classe est un mot réservé à une utilisation future.

Si l'objet présente des propriétés dont les noms coïncident avec des mots réservés, il est nécessaire d'utiliser les enregistrements avec des supports carrés pour y accéder: O ["pour"] et O ["Classe"]. ECMAScript 5 présente cette exigence (comme cela a déjà été effectué dans certaines implémentations ECMAScript 3) et permet d'utiliser des mots réservés après l'opérateur de points.

Prototypes

Chaque objet en JavaScript comporte un deuxième objet (ou NULL, mais beaucoup moins souvent) associé à celui-ci. Ce deuxième objet s'appelle un prototype et le premier objet hérite de ses propriétés du prototype.

Tous les objets créés à l'aide de littéraux d'objets ont le même objet prototype sur lequel le programme JavaScript peut être appelé: objet.pototype.

Objets créés à l'aide du nouveau mot-clé et de l'appel constructeur, car le prototype reçoit la valeur des propriétés de prototype du concepteur. Par conséquent, l'objet créé par l'objet nouvel objet () hérite des propriétés de l'objet objet.Prototype, comme s'il a été créé à l'aide de littéraux sous-crocers (). Semblable au prototype d'un objet créé par la nouvelle expression de tableau (), est un tableau.Prototype et le prototype d'un objet créé par la nouvelle expression date () est la date.pototype.

Object.Prototype est l'un des rares objets qui n'ont pas de prototype: il n'a pas de propriétés héritées. D'autres objets prototypes sont les objets les plus courants qui ont leurs propres prototypes.

Tous les constructeurs intégrés (et la plupart des concepteurs personnalisés) héritent d'un objet prototype d'objet.Prototype. Par exemple, date.Prototype hériter des propriétés d'objet.pototype, donc l'objet de date créé par la nouvelle date () d'expression hérite des propriétés des prototypes, date.pototype et objet.pototype. Une telle séquence connectée d'objets prototypes s'appelle la chaîne prototype.

Héritage

Les objets de JavaScript ont une multitude de "propriétés propres" et peuvent également hériter de nombreuses propriétés à partir de l'objet prototype. Pour comprendre cela, vous devez examiner soigneusement le mécanisme d'accès aux propriétés. Dans les exemples de cette section, la fonction hérite (), indiquée ci-dessus, est utilisée pour créer des objets avec certains prototypes.

Supposons que le programme fait référence à la propriété de l'objet Obj. Si l'objet Obj n'a pas sa propre propriété avec un tel nom, une tentative est faite pour trouver la propriété X dans le prototype d'objets Obj. Si l'objet prototype a sa propre propriété avec ce nom, mais a son propre prototype, une tentative est faite pour trouver une propriété dans le prototype de prototype. Alors continue jusqu'à ce que la propriété X soit trouvée ou jusqu'à ce qu'un objet qui n'a pas de prototype apparaisse. Comme vous pouvez le constater, l'attribut prototype de l'objet crée une chaîne, ou liste connectée Objets à partir de quelles propriétés sont héritées.

Var obj \u003d (); // obj hérite des objets d'objet objet.Prototype obj.x \u003d 1; // et a sa propre propriété x. Var p \u003d hériter (obj); // p hériter des propriétés des objets obj et objet.Prototype p.y \u003d 2; // et a sa propre propriété Y. var q \u003d hériter (p); // q hérite des propriétés des objets P, obj et objet.Prototype q.z \u003d 3; // et a sa propre propriété z. var s \u003d q.tostring (); // Tostring est hérité de objet.Prototype var d \u003d q.x + q.y // résultat 3: x et y sont hérités de obj et p

Supposons maintenant que le programme attribue une certaine valeur de l'objet x objet obj. Si l'objet OBJ a déjà sa propre propriété (non héritée) avec le nom X, l'opération d'affectation changera simplement la valeur de la propriété existante. Sinon, une nouvelle propriété avec le nom X sera créée sur l'objet Obj. Si l'objet Obj a hérité de la propriété X, la propriété héritée sera désormais masquée la propriété nouvellement créée avec le même nom.

L'opération d'affectation de la valeur vérifiera la présence de cette propriété dans la chaîne de prototype pour vous assurer que la mission est recevable. Par exemple, si l'objet Obj hérite de la propriété X, en lecture seule, l'affectation ne sera pas exécutée. Toutefois, si l'affectation est autorisée, la propriété est toujours créée ou modifie l'objet d'origine et jamais dans la chaîne prototype. Le fait que le mécanisme d'héritage est valide lors de la lecture des propriétés, mais ne fonctionne pas lors de l'enregistrement de nouvelles valeurs, est une caractéristique clé de la langue javascript, car elle vous permet de remplacer sélectivement les propriétés héritées:

Var UnitéCircle \u003d (r: 1); // l'objet à partir duquel la propriété Var C \u003d hérite est héritée; // c hériter de la propriété r c.x \u003d 1; c.y \u003d 1; // c détermine les deux propriétés propres de C.R \u003d 2; // c remplace la propriété de la console héritée.log (unitéCircle.r); // \u003d\u003e 1: l'objet prototype n'a pas changé

Il existe une exception à cette règle lorsque l'opération d'affectation de la valeur à la propriété échoue ou conduit à la création / changement des propriétés de l'objet d'origine. Si l'objet Obj hérite de la propriété X et l'accès à cette propriété est effectué à l'aide de méthodes d'accès, au lieu de créer une nouvelle propriété X dans Obj, une nouvelle méthode d'enregistrement de valeur est appelée. Toutefois, notez que la méthode d'enregistrement est appelée relative à l'objet OBJ et non par rapport au prototype, qui définit cette propriété, par conséquent, si la méthode d'enregistrement définit toutes les propriétés, elles seront créées dans l'objet Obj et la chaîne prototype restera encore inchangé.

Erreurs d'accès Propriétés

Les expressions d'acceptation aux propriétés ne sont pas toujours retournées ou modifient la valeur de la propriété. Cette section décrit des situations dans lesquelles les opérations de lecture ou d'écriture ne parviennent pas à échouer.

Une tentative de faire appel à une propriété inexistante n'est pas considérée comme une erreur. Si la propriété X ne se trouve pas entre ses propriétés propres ou héritées de l'objet Obj, l'expression d'appel à la propriété Obj.x reviendra non définie.

Cependant, une tentative de référence à la propriété d'un objet inexistant est considérée comme une erreur. Les valeurs nulles et indéfinies n'ont pas de propriétés et les tentatives de désigner les propriétés de ces valeurs sont considérées comme une erreur:

// utilisateur d'objet simple vari \u003d (Connexion: "kot86", nom: "alexandr", âge: 26); var a \u003d utilisateur.password; // Undefined: la propriété manque // exclude à l'exception de TypeError. // la valeur non définie n'a pas les propriétés de la longueur var len \u003d user.password.length;

S'il n'y a pas de confiance que l'utilisateur et l'utilisateur.password sont des objets (ou se comporter des objets), vous ne pouvez pas utiliser l'expression utilisateur.password.length, car elle peut exciter une exception. Vous trouverez ci-dessous deux façons de protéger contre les exceptions de ce type:

// méthode plus visuelle et rectiligne var len \u003d non définie; Si (utilisateur) (si (utilisateur.password) len \u003d user.password.length;) // Chargement et caractéristique d'une alternative JavaScript // Donner la longueur de la valeur du mot de passe Var String Propriété \u003d Utilisateur && Utilisateur. mot de passe && user.password.length;

Les tentatives de définition de la valeur de la propriété pour d'autres valeurs ne se terminent pas toujours par le succès: certaines propriétés sont en lecture seule et ne vous permettent pas de modifier leurs valeurs. De plus, certains objets ne vous permettent pas d'y ajouter de nouvelles propriétés. Cependant, la chose la plus intéressante est que de tels échecs, en règle générale, ne conduisent pas à l'excitation d'exception:

// Propriétés du prototype des constructeurs intégrés est lue uniquement pour lire l'objet.Prototype \u003d 0; // mission n'excrétera pas l'exception; // objet.pototype la valeur ne changera pas

Ce manque historiquement établi de JavaScript est fixé en mode strict défini par la norme ECMAScript 5. Toutes les tentatives infructueuses de modifier la valeur de la propriété en mode strict conduit à l'exception de TypeError.

Règles qui vous permettent de déterminer lorsqu'une tentative d'exécution d'une opération d'affectation sera complétée par succès et lorsque l'échec, simple et compréhensible, mais il est difficile d'exprimer sous une forme assez brève. Une tentative d'attribution de la valeur à l'installation de l'objet de P échouera dans les cas suivants:

Obj Obj propose sa propre propriété P, en lecture seule: vous ne pouvez pas modifier la valeur de la propriété en lecture seule. (Payer, toutefois, attention à la méthode DEFINEPROPERTY (), qui vous permet de modifier les valeurs des propriétés personnalisables en lecture seule.)

Obj Obj dispose d'une propriété P héritée, une lecture seule accessible: les propriétés héritées ne sont disponibles que pour la lecture, il est impossible de remplacer ses propres propriétés avec les mêmes noms.

Obj Obj n'a pas sa propre propriété; L'objet Obj n'hérite pas à la propriété P avec des méthodes d'accès et un attribut extensible d'objet Obj est faux. Si la propriété P est manquante dans l'objet Obj et que la méthode d'enregistrement n'est pas définie pour cela, l'opération d'affectation tentera d'ajouter la propriété P à l'objet Obj. Mais comme l'objet Obj n'autorise pas l'expansion, une tentative d'ajout d'une nouvelle propriété échouera.

Propriétés de retrait

Opérateur effacer. Supprime la propriété de l'objet. Son seul opérande doit être une expression d'appel à la propriété. Cela peut sembler incroyable, mais la déclaration de suppression n'affecte pas la valeur de la propriété - elle fonctionne avec la propriété elle-même:

// utilisateur d'objet simple vari \u003d (Connexion: "kot86", nom: "alexandr", âge: 26); Supprimer User.Login; // Maintenant, l'objet utilisateur ne dispose pas des propriétés de connexion [Nom] de la suppression de connexion; // maintenant l'objet utilisateur n'a pas de propriétés de nom

L'opérateur Supprimer supprime uniquement ses propres propriétés et ne supprime pas hérité. (Pour supprimer une propriété héritée, il est nécessaire de l'éliminer dans l'objet prototype dans lequel il est défini. Une telle opération affectera tous les objets hériter de ce prototype.)

L'expression de suppression renvoie true si la propriété supprime est supprimée avec succès ou lorsque l'opération de suppression n'a pas conduit à une modification d'un objet (par exemple, lorsque vous essayez de supprimer une propriété inexistante). L'expression de suppression revient également true lorsque cet opérateur est transmis à une expression qui n'est pas exprimée par l'appel à la propriété:

Obj \u003d (x: 1); // obj a sa propre propriété x et hérite de supprimer obj.x; // Supprimer x et retourne vrai Supprimer obj.x; // rien ne fera (x n'existe pas) et retourne vrai Supprimer obj.tostring; // ne fera rien (Tostring non propre propriété) et retourne vrai Supprimer 1; // sans signification, mais retourne vrai

Supprimer l'opérateur ne supprime pas les propriétés inédigédentes, attribuer configurable qui est faux. (Cependant, il peut supprimer les propriétés personnalisées des objets non variables.) Les propriétés non liées sont les propriétés des objets intégrés, ainsi que les propriétés de l'objet global créé à l'aide des instructions de la déclaration de variables et de fonctions. Tenter de supprimer une propriété sans prétention en mode strict provoque une exception à TypeError. En mode non strict (et dans les implémentations ECMAScript 3) dans de tels cas, l'opérateur de suppression renvoie simplement fausse:

Supprimer l'objet.Prototype; // le retrait n'est pas possible - la propriété sans prétention var x \u003d 1; // Annonce de la variable globale supprime ce.x. // Cette propriété ne peut pas être supprimée Fonction F () () // Annonce de la fonction globale Supprimer cela.f; // Cette propriété peut également être supprimée

Vérification de l'existence de propriétés

Les objets de la langue JavaScript peuvent être considérés comme de nombreuses propriétés, et il est souvent utile de pouvoir vérifier l'accessoire à l'ensemble - Vérifiez la présence d'une propriété avec ce nom dans l'objet. Vous pouvez effectuer un tel chèque à l'aide de l'opérateur dANS.en utilisant des méthodes hasownProperty () et protitudesÉnumérables () Ou simplement en contactant la propriété.

La déclaration IN nécessite que dans l'opérande gauche, il ait été transféré sur le nom de propriété (sous la forme d'une chaîne) et un objet dans le bon opérande. Il retourne true si l'objet a sa propre propriété ou héritée avec ce nom:

Var obj \u003d (x: 1) "x" dans obj; // true: obj a sa propre propriété "x" "Y" à Obj; // faux: obj n'a pas les propriétés de "Y" "Tostring" dans Obj; // vrai: obj hérite de la propriété toostring

La méthode d'objet HasounProperty () vérifie si l'objet a sa propre propriété avec le nom spécifié. Pour les propriétés héritées, il retourne faux:

Var obj \u003d (x: 1) obj.hasownProperty ("x"); // true: obj a ses propres propriétés "x" Obj.hasownProperty ("Y"); // faux: obj n'a pas les propriétés de "Y" obj.hasownProperty ("Tostring"); // FAUX: TOSTRING - Propriété héritable

La méthode () de propriété () impose des restrictions supplémentaires par rapport à HasownProperty (). Il ne renvoie que si la propriété spécifiée est sa propre propriété, dont l'attribut énumérable est vrai. Les propriétés des objets incorporés ne sont pas répertoriées. Propriétés créées programme ordinaire Dans JavaScript, sont énumérés si l'une des méthodes ECMAScript 5 présentées ci-dessous n'est pas utilisée, ce qui rend les propriétés ne sont pas incompréhensibles.

Souvent, au lieu d'un interservateur, il suffit d'utiliser une simple expression d'accès à la propriété et d'utiliser l'opérateur! \u003d\u003d Pour vérifier l'inégalité, la valeur non définie:

Var obj \u003d (x: 1) obj.x! \u003d\u003d indéfini; // true: obj a la propriété "x" obj.y! \u003d\u003d indéfini; // faux: obj n'a pas les propriétés de "y" obj.tostring! \u003d\u003d indéfini; // vrai: obj hérite de la propriété toostring

Cependant, l'opérateur en distingue les situations qui ne sont indiscernables lors de l'utilisation de l'acceptation ci-dessus sur la base du traitement de la propriété. Opérateur en fonctionnalités Aucune propriété d'une propriété non définie.

Listage de propriétés

Au lieu de rechercher des propriétés individuelles, il est parfois nécessaire de contourner toutes les propriétés disponibles ou d'obtenir une liste de toutes les propriétés de l'objet. Habituellement, pour cela utilise le cycle pour / en cycle, cependant, ECMAScript 5 fournit deux alternatives pratiques.

L'instruction CYCLE FOR / IN dans le cycle effectue un corps de cycle pour chaque propriété répertoriée (propre ou hérité) objet spécifié en attribuant le nom de la propriété de cycle variable. Les méthodes intégrées héritées par des objets ne sont pas incompréhensibles et les propriétés ajoutées aux objets par votre programme sont répertoriées (sauf si les fonctions décrites ci-dessous permettant de faire des propriétés ne sont pas incompréhensibles). Par example:

// objet simple avec trois propriétés énumérées VAR utilisateur \u003d (Connexion: "kot86", nom: "alexandr", âge: 26); utilisateur.propertyisenumerable ("Tostring"); // fausse, tostring - méthode intégrée pour la console (n dans l'utilisateur ).Log (n);

Certaines bibliothèques ajoutent de nouvelles méthodes (ou d'autres propriétés) à l'objet.Prototype d'objet afin qu'ils puissent être hérités et accessibles à tous les objets. Cependant, avant que la norme ECMAScript n'apparaisse, il n'était pas possible que ces méthodes supplémentaires ne soient pas des méthodes non compliquables, elles étaient donc disponibles pour être énumérées pour / en cycles. Pour résoudre ce problème, vous devrez peut-être filtrer les propriétés renvoyées par le cycle pour / en cycle. Vous trouverez ci-dessous deux exemples de ce filtrage:

Pour (n dans l'utilisateur) (si (! User.hasownProperty (n)) continue; console.log (n);) pour (n dans l'utilisateur) (si (utilisateur typef [n] \u003d\u003d\u003d "fonction") continue; Console.log (n);)

En plus du cycle pour / en cycle, la norme ECMAScript 5 définit deux fonctions qui répertorient les noms de propriétés. Le premier d'entre eux, Objet.keys (), Retourne un tableau des noms de ses propres propriétés répertoriées de l'objet.

La deuxième fonction ECMAScript 5, qui effectue la liste des propriétés - Object.getownPropertyNames (). Il agit comme la fonction objet.Keys (), mais renvoie les noms de toutes les propriétés de l'objet spécifié et non seulement répertoriés. Dans les implémentations ECMAScript 3, il n'est pas possible de mettre en œuvre de telles fonctions, car ECMAScript 3 ne prévoit pas la possibilité d'obtenir les propriétés incomplètes de l'objet.

Les méthodes de lecture et d'écriture de propriétés

Il a déjà été dit que la propriété Objet ait un nom de nom, de valeur et d'attribute. Dans ECMAScript 5, une valeur peut être remplacée par une ou deux méthodes appelées méthodes lecteur (getter) et entrées (Setter) . Propriétés pour lesquelles les méthodes de lecture et d'écriture sont déterminées, parfois appelées propriétés avec des méthodes d'accèsPour les distinguer des propriétés avec des données représentant une valeur simple.

Lorsque le programme essaie d'obtenir la valeur de la propriété avec des méthodes d'accès, l'interprète appelle la méthode de lecture (sans arguments). La valeur renvoyée par cette méthode devient la valeur d'exprimer l'appel à la propriété. Lorsque le programme tente d'écrire une valeur à la propriété, l'interprète appelle la méthode d'enregistrement en lui transmettant la valeur à droite de l'opérateur d'affectation. Cette méthode est responsable du "paramètre" des valeurs de propriété. La valeur renvoyée par la méthode d'enregistrement est ignorée.

Contrairement aux propriétés de données, les propriétés avec des méthodes d'accès n'ont pas l'attribut inscriptible. Si la propriété a à la fois des méthodes, la lecture et l'écriture, il est accessible pour lire / écrire. Si la propriété n'a que la méthode de lecture, elle est en lecture seule. Et si la propriété n'a que la méthode d'enregistrement, elle n'est disponible que pour l'enregistrement (ceci n'est pas possible pour les propriétés avec les données) et les tentatives de lecture de la valeur de cette propriété reviendra toujours non définie.

Le moyen le plus simple de déterminer la propriété avec des méthodes d'accès consiste à utiliser la syntaxe avancée de la définition des catégories d'objets:

Var obj \u003d (// propriété conventionnelle avec données data_prop: valeur, // La propriété avec des méthodes d'accès est définie comme une paire de fonctions Obtenir accessor_prop () (/ * Fonction corporelle * /), régler Accessor_prop (valeur) (/ * Corps de fonction * /));

Les propriétés avec des méthodes d'accès sont définies comme une ou deux fonctions dont les noms coïncident avec le nom des propriétés et le remplacement de la fonction de mots-clés sur le get et / ou l'ensemble.

Veuillez noter que vous n'avez pas besoin d'utiliser un point de colon pour séparer le nom de la propriété de la fonction, accès à la commande Pour la propriété, mais vous devez toujours utiliser la virgule après le corps de la fonction pour séparer la méthode des autres méthodes ou propriétés avec des données.

Par exemple, envisagez l'objet suivant représentant les coordonnées cartésiennes du point sur l'avion. Pour représenter les coordonnées X et Y, il existe des propriétés classiques avec des données, ainsi que des propriétés avec des méthodes d'accès, permettant d'obtenir des coordonnées équivalentes de points polaires:

Var p \u003d (// x et y. propriétés conventionnelles avec données disponibles pour lecture / écriture x: 1.0, y: 1.0, // r - disponible pour une propriété de lecture / écriture avec deux méthodes d'accès. // N'oubliez pas d'ajouter des virgules après les méthodes Access Get R () (renvoyer math.sqrt (this.x * this.x + this.y * this.y);), Set r (newvalue) (var oldvalue \u003d math.sqrt (this.x * this .xxx + this.y * this.y); var.y); VAR \u003d NewValue / OldValue; this.x * \u003d rapport; this.y * \u003d le rapport;), // thêta - disponible uniquement pour lire la propriété avec la seule méthode de lecture gaiseta () (retour math.atan2 (this.y, this.x);));

Faites attention à l'utilisation de ce mot-clé en méthodes de lecture et d'écriture ci-dessus. L'interprète provoquera ces fonctions comme méthodes de l'objet dans lequel elles sont définies, c'est-à-dire La fonction corporelle fera référence au point de point. En raison de cela, la méthode de lecture R peut se référer aux propriétés X et Y comme cela.x et ce.

Les propriétés avec des méthodes d'accès sont héritées de la même manière que les propriétés classiques avec des données, de sorte que l'objet P défini ci-dessus peut être utilisé comme prototype pour d'autres points de points. Dans les nouveaux objets, vous pouvez définir vos propres propriétés X et Y, et ils hériteront des propriétés de R et THETA.

Attributs de l'objet

Tous les objets ont des prototypes, des classes et des attributs extensibles. Tous ces attributs sont décrits dans les sous-sections ci-dessous.

Attribut prototype

L'attribut d'objet prototype définit un objet à partir de quelles propriétés hériter. Il est important de comprendre que lorsque la référence de prototype est rencontrée dans le code du programme, elle dénote la propriété d'objet habituelle et non l'attribut prototype.

L'attribut prototype est défini au moment de la création d'un objet. Pour les objets créés avec l'aide de littéraux, le prototype est un objet.Prototype. Le prototype de l'objet créé à l'aide de la nouvelle instruction est la valeur des propriétés de prototype du concepteur. Un prototype d'un objet créé par objet.create () devient le premier argument de cette fonction (qui peut être null).

ECMAScript 5 Standard offre la possibilité de définir un prototype de n'importe quel objet si vous le transférez à la méthode. Objet.getPrototypeof (). Dans ECMAScript 3, il n'y a pas de fonction équivalente, mais il est souvent possible de déterminer l'objet prototype obj à l'aide d'une expression obj.constructor.pototype.

Les objets créés à l'aide du nouvel opérateur héritent généralement de la propriété. constructeurSe référant à la fonction de concepteur utilisé pour créer un objet. Et comme mentionné ci-dessus, les fonctions de conception ont la propriété prototype, qui définit le prototype d'objets créé à l'aide de ce concepteur.

Veuillez noter que les objets créés à l'aide de la littéral ou de l'objet.Create () sont obtenus par la propriété Constructor qui fait référence au constructeur d'objet (). Ainsi, Constructor.Prototype fait référence à un véritable prototype de littéraux d'objets, mais il n'est généralement pas le cas pour les objets créés par l'objet.Create ().

Pour déterminer si un objet est un prototype (ou un lien dans la chaîne de prototypes) d'un autre objet, vous devez utiliser la méthode. isprototypeof (). Pour savoir si P prototype Obj, vous devez enregistrer l'expression p.isprototypeof (Obj). Par example:

Var p \u003d (x: 1); // Déterminez l'objet prototype. var obj \u003d objet.create (p); // Créez un objet avec ce prototype. P.isprototothypeof (Obj); // \u003d\u003e true: obj hérite de p objet.pototype.ispototypeof (p); // \u003d\u003e vrai: p hérite objet.pototype

Classe d'attributs.

Un attribut de classe d'objet est une chaîne contenant des informations sur le type d'objet. Aucun dans ECMAScript 3 NOR ECMAScript 5 ne prévoit pas la possibilité de modifier cet attribut et uniquement des moyens indirects de déterminer sa valeur sont fournis. Par défaut, la méthode Tostring () (héritée à partir d'objet.pototype) renvoie une chaîne de formulaire:

Par conséquent, pour déterminer la classe d'objet, vous pouvez essayer d'appeler la méthode Tostring () de cet objet et de supprimer la sous-chaîne du huitième de l'avant-dernier symbole. Tous les rusés sont que de nombreuses méthodes héritent d'une autre mise en œuvre plus utile de la méthode de totrage (), et de la cause la version souhaitée Tostring (), vous devez effectuer un appel indirect à l'aide de la méthode Function.call ().

Dans l'exemple ci-dessous, une fonction qui renvoie la classe de tout objet transmissible est définie:

// nom de la classe de classe d'objet de la classe de classe d'objet (OBJ) (si (obj \u003d\u003d\u003d null) renvoie "null"; if (obj \u003d\u003d\u003d non défini) renvoie "indéfini"; renvoyer objet.pototype.tostring.call (obj) .Slice (8, -1);)

Cette fonction de classement () peut être transférée sur n'importe quelle valeur autorisée dans JavaScript. Les chiffres, les lignes et les valeurs logiques sont valides comme des objets lorsque la méthode TOXRING () est appelée par rapport à celle-ci, et les valeurs NULL et non définies sont traitées.

Attribut extensible

Un attribut d'objet extensible définit s'il faut ajouter de nouvelles propriétés à l'objet. Dans ECMAScript 3, tous les objets définis par l'utilisateur ont permis de déterminer la possibilité d'expansion et l'expansion des objets du temps d'exécution a été déterminée par chaque implémentation spécifique. Dans ECMAScript 5, tous les objets intégrés et définis par l'utilisateur sont extensibles si elles n'ont pas été transformées en objets inconditionnables et que l'extensibilité des objets d'exécution est toujours déterminée par chaque implémentation spécifique.

La norme ECMAScript 5 définit les fonctions d'obtention et de modification de l'expansion de l'objet. Pour déterminer s'il est autorisé à étendre l'objet, il devrait être transféré sur la méthode Objet.isextensible (). Pour faire un objet sans obstacle, il doit être transféré à la méthode Objet.prevenextensions (). Veuillez noter qu'après que l'objet est rendu immuable, il ne peut pas être élargi. Notez également que le défi EmportextXextSexsions () n'affecte que l'extensibilité de l'objet lui-même. Si de nouvelles propriétés ajoutent au prototype d'un objet insoutenable, un objet inchangé hérite de ces nouvelles propriétés.

La destination de l'attribut extensible consiste à activer les objets "fixes" dans un certain état, interdisant les modifications. Un attribut d'objet extensible est souvent utilisé conjointement avec les attributs des attributs de propriétés configurables et inscriptibles. Par conséquent, ECMAScript 5 sont des fonctions définies qui simplifient l'installation simultanée de ces attributs.

Méthode Objet.seal () Il agit comme une méthode d'objet.Prevenextensions (), mais cela rend non seulement l'objet immuable, mais rend également toutes les propriétés de cet objet inaccessibles à configurer. C'est-à-dire qu'il est impossible d'ajouter de nouvelles propriétés à l'objet et les propriétés existantes ne peuvent pas être supprimées ou configurées. Cependant, les propriétés existantes disponibles pour l'enregistrement sont toujours sujettes à modification.

Après avoir appelé un objet.seal (), l'objet ne peut pas être retourné à l'état précédent. Déterminer si la méthode Object.Seal () a été appelée à un objet, vous pouvez appeler une méthode Objet..

Méthode Objet.frez () Fournit une fixation encore plus rigide d'objets. En plus du fait que cela rend un objet immuable, et ses propriétés ne sont pas disponibles pour configurer, il rend également toutes ses propres propriétés avec des données en lecture seule. (Cela ne s'applique pas aux propriétés d'un objet avec des méthodes d'accès ayant des méthodes d'enregistrement; ces méthodes seront encore appelées instructions d'affectation.) Pour déterminer si l'objet d'objet est appelé.freeze (), vous pouvez appeler la méthode Objet.frozen ().

Il est important de comprendre cet objet.seal () et Object.freeze () affectez uniquement l'objet qui leur est transmis: ils n'affectent pas le prototype de cet objet. Si le programme doit résoudre complètement l'objet, vous devrez probablement enregistrer les deux objets de la chaîne de prototypes.

Sérialisation des objets

La sérialisation des objets est le processus de conversion d'objets en une forme de chaîne d'une représentation pouvant être utilisée ultérieurement pour les restaurer. Pour la sérialisation et la restauration des objets JavaScript, ECMAScript 5 est fourni avec des fonctions intégrées. Json.stringify () et Json.parse (). Ces fonctions utilisent le format de partage de données JSON. Le nom JSON provient de la notation d'objet JavaScript (le formulaire d'enregistrements d'objets JavaScript) et la syntaxe de ce formulaire de l'enregistrement ressemble à la syntaxe des objets d'objets et de tableaux dans JavaScript:

Var obj \u003d (x: 1, y: (z :)); // Déterminez l'objet de test Var S \u003d JSON.Stringifier (OBJ); // s \u003d\u003d "(" x ": 1," y ": (" z ":))" var p \u003d json.parse (s); // p - copie de l'objet obj

Le format JSON Syntaxe est uniquement un sous-ensemble de la syntaxe JavaScript et ne peut pas être utilisé pour représenter toutes les valeurs possibles autorisées dans JavaScript. Soutien et peut être sérialisé et restauré: objets, tableaux, chaînes, valeurs numériques finales, vraie, false et null. Les valeurs nan, infini et -infinity sont sérialisées à NULL. Les objets de date sont sérialisés dans des chaînes avec des dates au format ISO, mais JSON.PARSE () les laisse dans la vue de la chaîne et ne pas restaurer les objets de date initiaux.

La fonction, les objets de réégie et d'erreur et de la valeur non définie ne peuvent ni être sérialisés ni restaurés. La fonction JSON.Stringify () Serialise uniquement les propriétés énumérées de l'objet. Si la valeur de la propriété ne peut pas être sérialisée, cette propriété est simplement exclue de la vue de la chaîne. Les deux fonctions, json.stringify () et json.parase (), prennent un deuxième argument facultatif qui peut être utilisé pour configurer le processus de sérialisation et / ou de récupération, par exemple en définissant la liste des propriétés à sérialiser ou aux fonctions. de convertir des valeurs lors de la sérialisation.

Salutations à tous ceux qui ont lu cette publication. Aujourd'hui, je veux démonter l'outil de langue clé avec vous - des objets JavaScript. Permettez-moi de vous rappeler que JS est Crossbruster et fonctionne dans tous les OS (Windows, Mac OS, etc.). Contrairement aux langages de programmation orientés objet, en JS, la mise en œuvre d'objets est significativement différente de la fonctionnalité habituelle et des variations de l'utilisation des instances, par exemple en C #.

Par conséquent, après avoir lu l'article actuel, vous connaîtrez les principales caractéristiques distinctives des objets de script, découvrez quelles méthodes vous pouvez créer, mettre à jour et supprimer. Je gagne également le sujet concernant les propriétés, les méthodes et les concepteurs, raconter Équipes utiles Et bien sûr, un peu sur l'héritage. Je pense qu'il est temps de commencer à apprendre!

Quel est l'objet en JavaScript et quelle capacité a?

Dans JS, les objets sont des tableaux associatifs simples (ils sont également appelés hachage).

Qu'est-ce qu'un tableau associatif?

Il s'agit de la structure des données dans lesquelles une certaine quantité d'informations est stockée relative et décrivant un certain élément. Toutes les données sont structurées et liées comme "clé \u003d\u003e valeur".

Par exemple, vous devez décrire les voitures. Ensuite, vous créez un objet AVTO et décrivez ses caractéristiques dans le tableau. J'ai décidé de décrire la marque de la machine (nom), sa couleur (couleur) et coûts (prix). Ci-dessous, j'ai joint le code de mise en œuvre de la tâche décrite.

1 2 3 4 5

var avto \u003d (Nom: "BMW 116i", Couleur: "Noir", Prix: 588000);

var avto \u003d (Nom: "BMW 116i", Couleur: "Noir", Prix: 588000);

Ici, vous voyez l'un des moyens de créer un objet nommé "AVTO". Le nom, la couleur et le prix sont les clés par lesquelles lors de la rédaction de l'application sera manipulée.

Avec cet exemple, j'ai couru à l'avance, alors nous analysons tout ce que nous analyserons tout dans l'ordre.

Créer un objet peut être de plusieurs manières:

var avto \u003d (); ou var avto \u003d nouvel objet ();

Dans les deux cas, un objet vide est créé avec un nom connu, mais la première option est beaucoup plus probable, car elle est plus courte et plus commente d'écrire.

Tout sur les propriétés

Maintenant, vous devez remplir un paramètre d'objet vide. Pour ce faire, ajoutez des propriétés, qui sont également au-dessus des clés appelées. Et encore une fois, il y a deux façons de déclarer des propriétés.

Je tiens à noter que dans JavaScript, il n'y a pas de cadre strict pour la création et l'initialisation de ces paramètres. De nouvelles propriétés peuvent apparaître tout au long du code, tout comme supprimées et mises à jour.

Ainsi, vous pouvez immédiatement créer toutes les clés ou les déclarer à votre arrivée. Et même si lors de la rédaction du programme, vous consultez des clés inexistantes, il n'y aura aucune erreur. Dans ce cas, "non défini" reviendra.

La première façon.

Créer et accéder aux propriétés à travers un point. Pour mettre en œuvre une telle option, vous devez écrire le nom de l'objet, puis après le point d'attribuer le nom de la clé, puis une fois le panneau d'affecter une valeur à laquelle:

avto.name \u003d "BMW 116I"

Mais de manière à ce que les clés existantes, vous ajoutez un autre élément:

Cette méthode est utilisée lorsque le nom de la propriété est déjà connu et doit faire certaines actions avec des valeurs.

La deuxième façon.

Il ne diffère pas de la première, si vous comparez leurs destinations. Cependant, cette méthode présente un léger avantage. Pour une telle option, des crochets sont utilisés:

avto ["Nom"] \u003d "BMW 116I"

Une addition agréable est la possibilité de créer un nom de propriété sous la forme d'une chaîne. Par exemple,

avto ["Nom de la voiture"] \u003d "BMW 116I"

Travailler avec des touches via des crochets est utilisé lorsque certains paramètres sont entrés par l'utilisateur et sont stockés dans des variables ou lorsque les noms de propriété sont inconnus à l'avance. Par exemple, l'utilisateur demande le coût de la voiture choisie. L'élément appelé est écrit à la variable et le prix est transmis en réponse:

var avto \u003d (); avto.name \u003d "bmw_116i"; avto.price \u003d 588000; Var clef \u003d "prix"; // alerte (AVTO) a été demandée;

Nous passons maintenant à la suppression des propriétés. Tout est très simple ici. Une commande est utilisée pour supprimer effacer.. Donc, si le dernier exemple est le bas pour ajouter ces 2 lignes:

supprimer avto.Price;

alerte (AVTO);

Qu'avec l'appel d'alerte pour la deuxième fois, la boîte de dialogue donnera "indéfini".

Quelques mots sur la compacité

À l'étape actuelle, je vous ai dit de créer un objet et de décrire ses propriétés. Pour cela, j'ai joint des exemples de contrôle, mais les plus attentifs de vous, chers lecteurs, ont remarqué que le premier code de logiciel est quelque peu différent de tous les autres.

Et tout parce qu'il y a une présentation de données compacte. Il s'agit d'une méthode très populaire de déclarer des clés, car il est plus court lorsque l'écriture et la facilité sont perçues visuellement.

Déplacons nos propriétés

En JavaScript, vous pouvez rapidement enverrer les propriétés créées. Pour cela, un mécanisme spécial a été fourni, mieux connu sous le nom de cycle.

Si vous connaissez d'autres langages de programmation, vous savez que le plus souvent, les cycles sont créés avec le mot pourEn outre, entre parenthèses est prescrit la condition des éléments d'alésage.

Dans JS, il rappelle son cycle d'apparence pour chaque. De c #. Découvrez la vue générale de la conception:

pour (var obj dans l'objet) (// Perifing)

où obj est responsable du nom des clés énumérées,

objet - pour leurs significations.

Et maintenant voici un éclaireur spécifique.

1 2 3 4 5 6 7 8

var avto \u003d (Nom: "BMW 116i", Couleur: "Noir", Prix: 588000); Pour (var obj dans l'objet) (Alerte (Obj + ":" + objet))

var avto \u003d (Nom: "BMW 116i", Couleur: "Noir", Prix: 588000); Pour (var obj dans l'objet) (Alerte (Obj + ":" + objet))

Il est temps de se familiariser avec les méthodes

La langue scriptée prévoit la création de méthodes. Il s'agit d'un mécanisme absolument simple avec lequel à tout moment vous pouvez ajouter une méthode ou des méthodes qui développent les capacités des tableaux associatifs créés. Ils sont également appelés propriétés-fonctions.

JS elle-même est très dynamique et incroyable dans une certaine mesure. C'est ainsi que vous pouvez créer des éléments de différents types. Lors de l'étude de cette langue, il n'est pas nécessaire de mémoriser des structures complexes, car de nombreuses annonces sont très similaires les unes des autres.

Donc, pour créer une méthode, vous devez déclarer un objet et après avoir commencé à écrire une commande, exactement-à-de--à-plusieurs rappelant exactement la création de propriétés. Cependant, après "\u003d" n'écrit aucune valeur, mais mot-clé Une fonction. Et puis dans les supports bouclés est en cours de transfert.

Voici la mise en œuvre de ce mécanisme:

var avto \u003d () avto.name \u003d "BMV" AVTO.YEAR \u003d 1999 AVTO.Drive \u003d Fonction (k) (ALERT ("ALERTE (" VOITURE DROSE "+ N +" KM ")) AVTO.Drive (300) AVTO.Drive ( 450)

Comme vous pouvez le constater, cet exemple contient des propriétés et des méthodes dont l'appel est initialement identique.

Dans JS, il y a aussi des constructeurs?

Oui Monsieur! Dans cette langue, tout ce qui utilise le mot-clé " nouveau", Devient automatiquement un designer. Donc, au-dessus, vous avez vu une déclaration d'un objet vide sous la forme: AVTO \u003d nouvel objet (); C'est le constructeur.

Pour plus de clarté, tenez compte des lignes présentées ci-dessous.

var bob \u003d nouvel objet ();

bob.name \u003d "Bob Smith";

Cependant, ce n'est pas l'ensemble de l'arsenal des opportunités. Dans JS, vous pouvez créer vos propres constructeurs et après les utiliser pour déclarer de nouveaux objets.

Donc, je veux "faire" un concepteur personnalisé pour les voitures autochtones. Notez que le nom doit être écrit avec une lettre majuscule. il trait distinctif les fonctions. Pour ce faire, j'écris cette implémentation logicielle:

fonction avto (nom, prix) (

ceci.name \u003d nom;

ceci.price \u003d;

Maintenant, lors de la création d'un nombre illimité d'objets et d'appliquer ce concepteur à eux, ils se rapportent tous à une classe. Par example:

var car1 \u003d nouvel avto ("BMW", 650000);

var car2 \u003d nouvel avto ("Audi", 520000);

En plus de cela, vous pouvez créer des méthodes à l'intérieur du concepteur.

Caractéristiques de l'héritage en JavaScript

Habituellement, dans de nombreuses langues, l'héritage est basé sur des classes pouvant hériter mutuellement. Ensuite, vous pouvez entendre de telles expressions en tant que "ancêtre de classe", "classe enfant", etc.

Cependant, tout est différent dans JS. Les objets sont hérités ici.

Toute héritage est basée sur un lien interne entre les objets, qui est connu sous le nom de "prototype". Si vous attribuez à la méthode ".pototype" sur la méthode, puis enregistrez le nom de prototype, tous les objets de la méthode sélectionnés seront hérités de ce prototype.

Passons à l'exemple.

fonction Transport (nom.candrive \u003d true) Var Transport \u003d Nouveau transport ("AVTO") // Création d'un objet de vélo de fonctions de transport (nom) (nom \u003d nom \u003d nom) Bike.Prototype \u003d Transport / / Nous indiquons que tous les nouveaux objets de cette classe sera utilisé comme un prototype de transport Bike1 \u003d nouveau vélo ("For_sport") BIKE2 \u003d nouveau vélo ("FOR_CHILD") Console.log (BIKE2.NAME) CONSOLE.LOG (BIKE2.NAME) Console .log (Bike1. peut conduire)

Sur ce moi, peut-être, finissez. Je vous ai parlé des aspects fondamentaux du langage de script. Cependant, ce ne sont que des connaissances superficielles. Ensuite, nous allons approfondir. En attendant, n'oubliez pas de rejoindre mes abonnés et de partager un lien vers un article avec des amis. Bonne chance!

Bye Bye!

Sincèrement, chuechev romain

Lis: 97 fois

Les objets sont l'un des concepts de base de JavaScript. Quand je viens de commencer à les étudier, ils me semblaient assez simples: juste une paire de clés et de valeurs, comme décrit en théorie.

Ce n'est qu'après un certain temps, j'ai commencé à comprendre que le sujet est beaucoup plus compliqué que je pensais. Et puis j'ai commencé à étudier des informations provenant de différentes sources. Certains d'entre eux ont donné une bonne idée du sujet, mais je ne pouvais pas voir la photo de toute la photo.

Dans ce poste, j'ai essayé de couvrir tous les aspects du travail avec des objets dans JS, sans trop d'aller de plus en plus profondément dans des détails séparés, mais ne fondez pas non plus les détails importants qui vous aideront à comprendre le sujet et à vous sentir plus confiant au cours de son autre étude.

Alors commençons par les bases.

Un objet

Un objet en JavaScript n'est qu'un ensemble de propriétés, chacune représentant un couple de valeur clé. Vous pouvez contacter les clés à l'aide du point ( obj.a.) ou désignation bracelle ( obj ["a"]]).

N'oubliez pas que les crochets doivent être utilisés si la clé:

• ce n'est pas un identifiant JavaScript autorisé (il y a un espace, Dash, commence par des chiffres ...)
• est une variable.

L'une des propriétés qui objets dans JS sont obtenues en créant, appelée Prototype.Et c'est un concept très important.

Prototype

Chaque objet dans JavaScript a une propriété interne appelée Prototype.. Dans la plupart des navigateurs, vous pouvez vous y référer par la désignation. __proto__.

Prototype.- Ceci est un moyen d'assurer l'héritage des propriétés en JavaScript. Cela peut être une fonctionnalité divisée sans duplication de code en mémoire. La méthode fonctionne dans la création de la communication entre deux objets.

Mettez simplement, le prototype crée un pointeur d'un objet à un autre.

Prototypes de chaîne

Chaque fois que JS recherche une propriété de l'objet et ne le trouve pas directement à l'objet lui-même, il vérifie la présence d'une propriété dans l'objet prototype. S'il n'y a pas de propriétés et dedans, JS continuera à rechercher dans le prototype de l'objet associé. Donc, il continuera jusqu'à ce que JS trouve une propriété appropriée ou n'atteint pas la fin de la chaîne.

Considérons un exemple:

Var inconvénient \u003d fonction () (this.a \u003d 1; ceci.b \u003d 2;) var obj \u003d nouveau inconvénient (); Incontournable.b \u003d 3; Incontournable.c \u003d 4;
les inconvénients - Ceci est un constructeur (juste une fonction qui peut être appelée à l'aide de l'opérateur nouveau).

Sur la cinquième ligne, nous créons un nouvel objet - une nouvelle copie les inconvénients. Immédiatement après la création obj. Obtient également une propriété prototype.

Et maintenant nous ajoutons des propriétés ( "AVANT JC") Le prototype de l'objet les inconvénients.
Considérer obj.:

obj.a // 1. - Tout est vieux ici, obj.a. Toujours égal à 1.
obj.c? - W. obj.pas de propriétés c.! Cependant, comme mentionné précédemment, JS le recherchera maintenant dans le prototype obj.et retourne la valeur 4.

Et maintenant pensons à quelle est la valeur obj.b. et comment ça devient quand nous supprimons obj.b.?

Obj.b.égal à 2. Nous avons attribué une propriété b.Mais nous l'avons fait pour le prototype les inconvénients, alors quand on vérifie obj.b., alors obtenez-en encore 2. Cependant, immédiatement après le retrait obj.b. JS ne peut plus trouver b. O. bj.Et continue donc de rechercher dans le prototype et de renvoyer la valeur de 3.

Créer un objet

Objet littéral: laissez Obj \u003d (A: 1);
Nous avons créé un objet avec la chaîne de prototypes suivante: obj ---\u003e objet.pototype ---\u003e null
Comment pouvez-vous deviner objet.pototype. - Ceci est le prototype de l'objet, ainsi que la fin de la chaîne prototype.

Objet.create (): var newobj \u003d objet.create (obj);
W. newobj. Il y aura la prochaine chaîne de prototypes: nEWOBJ ---\u003e Obj ---\u003e Objet.Prototype ---\u003e NULL

Constructeur. Comme dans l'exemple ci-dessus, le concepteur est simplement une fonction JS, ce qui nous permet d'utiliser l'opérateur. nouveau Créer de nouveaux spécimens.

ES6 CLASSES:

Rectangle de classe (constructeur (hauteur, largeur) (this.height \u003d hauteur; this.width \u003d largeur;) getArea () (Retourner cela.Height * this.width;) Laisser le nouveau rectangle (2, 2);
Carré. - exemple du concepteur rectangle.et donc nous pouvons appeler square.Gettarea () // 4, square.Width., ainsi que toutes les fonctions héritées de objet.pototype..

Lequel des moyens est le meilleur? Si vous envisagez de créer plusieurs instances, vous pouvez utiliser l'ES6 ou le constructeur. Si vous envisagez de créer un objet une fois, il est préférable de demander au littéral, car c'est la voie la plus simple.

Et maintenant, quand nous avons appris à propos de prototype. Et ils ont rencontré toutes les manières de créer de nouvelles installations, nous pouvons procéder à la discussion de l'un des moments les plus déroutants liés aux objets.

Comparaison et changement d'objets

En JavaScript, les objets se réfèrent au type de référence

Quand on crée un objet laissez Obj \u003d (A: 1);, variable obj. Obtient l'adresse dans la mémoire de l'objet, mais pas sa valeur! Il est impératif de comprendre cette différence, car sinon des erreurs peuvent survenir. Quand on crée un autre objet laissez NEWOBJ \u003d OBJNous créons effectivement aiguille sur une zone de mémoire obj., pas un objet complètement nouveau.

Cela signifie que performant newobj.a \u003d 2.Nous changeons effectivement obj. de sorte que obj.a.il devient égal à 2!

Une telle approche conduit facilement à l'apparition de bugs, de nombreuses entreprises travaillent avec des objets immuables. Au lieu de changer l'objet déjà créé, vous devrez créer un nouvel objet (copie de l'original) et effectuer des modifications déjà dedans. C'est ainsi que des bibliothèques importantes semblent être Redux et, en général, c'est l'un des principaux concepts de programmation fonctionnelle. Vous pouvez lire plus.

Égalité

De ce qui précède implique également que deux objets ne peuvent jamais être égaux, même s'ils ont les mêmes propriétés. Cela est dû au fait que JS compare l'emplacement dans la mémoire d'objet, et les deux objets ne sont jamais dans la même cellule de mémoire.

// Deux objets distincts avec les mêmes propriétés ne sont pas égaux var fruit \u003d (Nom: Apple); var fruitbear \u003d (Nom: "Apple"); Fruit \u003d\u003d\u003d Fruitbear; // retourne faux // ici fruit et fruitbear pointe vers le même objet var fruit \u003d (Nom: "Apple"); var fruitbear \u003d fruit; Fruit \u003d\u003d\u003d Fruitbear; // retourne vrai.
Donc, vous vous êtes probablement déjà demandé comment vous pouvez comparer des objets ou comment produire diverses manipulations avec des objets, compte tenu de l'exigence de leur immuabilité.

Considérez quelques fonctionnalités.

Changer d'objet

Supposons qu'il soit clair que, de bonne manière, nous ne devrions pas changer d'objet, nous souhaitons donc créer une copie de l'objet correspondant et modifier ses propriétés. Il s'agit de la rescousse Objet.Assign ().

Var obj \u003d (A: 1, B: 2); var newobj \u003d objet.Assign ((), obj, (A: 2)) // (A: 2, B: 2)
Si nous voulons changer la valeur de la propriété uNE. Objet obj., vous pouvez utiliser objet.Assign. Pour créer une copie obj. et ses changements.

Dans l'exemple, on peut voir que nous créons d'abord un objet vide, puis copiez les valeurs. obj. Et nous introduisons nos changements, en définitive à obtenir un objet nouveau et prêt à l'emploi.

Veuillez noter que cette méthode ne fonctionnera pas pour une copie profonde. En parlant de copie profonde, nous voulons dire que vous devez copier un objet avec une ou plusieurs propriétés.

Const obj \u003d (A: 1, B: (A: 1)); // b propriété est un objet
Objet.Assign () Copie les propriétés de l'objet, donc si la valeur de la propriété est un pointeur sur l'objet, seul un pointeur est copié.

Pour une copie profonde nécessite une opération récursive. Ici vous pouvez écrire une fonction ou simplement utiliser la méthode _.Clonedeep De la bibliothèque Lodash.

Comparaison des objets

Il y a un travail de classe avec des objets - une transformation en minuscule. Dans l'exemple suivant, nous convertissons les deux objets dans la chaîne et les comparons:

Json.stringify (obj1) \u003d\u003d\u003d json.stringify (obj2)
Cette approche est justifiée, car, à la fin, nous comparons les chaînes représentant le pointeur sur la valeur de type. Bad News - Il ne déclenche pas toujours, principalement parce que l'une ou l'autre procédure pour les propriétés de l'objet n'est pas garantie.

Autre bonne décision - profiter de la méthode _.est égal De Lodash, effectuant une comparaison profonde des objets.

Et avant la fin de la fin, passons à certains problèmes émergents souvent sur le sujet des objets. Cela aidera plus loin à vous plonger dans le sujet et à appliquer les connaissances acquises dans la pratique.

Essayez de penser à la solution vous-même avant de lire la réponse.

Comment découvrir la longueur de l'objet?

Pour obtenir la réponse, il est nécessaire de déplacer toutes les propriétés de l'objet un après l'autre et de les calculer. Il existe plusieurs façons d'exécuter cette itération:

• pour po. Cette méthode couvre toutes les propriétés dénombrables de l'objet et la chaîne de ses prototypes. Nous avons rencontré le prototype (et, j'espère, appris le matériel), il devrait donc être clair que l'application pour po Il ne sera pas toujours vrai d'obtenir les propriétés de l'objet.
• Objet.keys.. Cette méthode renvoie un tableau avec des clés de tous propre (appartenant à l'objet spécifié) comptes Propriétés. Cette approche est meilleure car nous ne travaillons que sur les propriétés de l'objet sans faire référence aux propriétés. prototype.. Il y a cependant la situation lorsque vous avez attribué l'attribut énorme Certaines propriétés valorisent false, et objet.keys. En conséquence, la saute et vous obtenez un résultat incorrect. Cela se produit rarement, mais dans de tels cas, cela devra être très getownPropertyNames..
• getownPropertyNames. Retourne un tableau contenant tous propreles touches de clé (à la fois dénombrables et indénombrables).

Également mentionner:

• Objet.values. Efface ses propres propriétés de comptage et retourne un tableau avec approprié valeurs.
• Objet.entre. Efface ses propres propriétés de comptage et retourne un tableau. avec des clés et leurs valeurs.

Je pense que vous avez remarqué que la plupart des méthodes énumérées ci-dessus renvoient un tableau. C'est la possibilité de tirer parti de tous les avantages des méthodes JavaScript pour travailler avec des tableaux.

Une de ces méthodes - array.Longueur.. En conséquence, nous pouvons simplement écrire

Laissez Objlength \u003d Object.getownPropertyNames (Obj) .length;

Comment vérifier si l'objet est vide?

1. Json.stringify (MyOBJ) \u003d\u003d\u003d "()".. Ici, nous utilisons à nouveau l'outil de conversion de chaîne, vous permettant de vérifier facilement si l'objet est vide (comparer les lignes, non les objets).
2. ! Object.keys (myobj) .length // true?.? Comme je l'ai mentionné, la conversion des touches d'objet sur le tableau peut être très utile. Ici, nous utilisons une propriété commode. longueur.hérité de Array.Prototype.En vérifiant la longueur des touches dans le tableau avec elle. En JS. 0 se transforme en faux, alors ajoutant ! Nous le transformons en vrais. Tout autre chiffre se transformera en faux.

Pour terminer

J'espère maintenant que vous vous sentez plus confiant dans la création d'objets et travailler avec eux. Résumons:

• N'oubliez pas que les objets appartiennent au type de référence et il est donc recommandé de travailler avec eux sans changer les objets d'origine.
• Faire des amis avec la propriété prototype. et une chaîne de prototypes.
• Faites connaissance avec des outils adjoints pour travailler avec des objets. N'oubliez pas que vous pouvez activer des objets dans la chaîne, obtenir un tableau avec leurs clés ou trier simplement leurs propriétés à l'aide d'un ensemble de méthodes avec lesquelles nous nous sommes rencontrés.

Je souhaite bonne chance à apprendre des objets javascript.

Dernière mise à jour: 04/08/2018

La programmation orientée objet est aujourd'hui l'un des paradigmes dominants du développement d'applications et, dans JavaScript, nous pouvons également utiliser tous les avantages de OOP. Dans le même temps, appliqué à JavaScript, la programmation orientée objet présente certaines fonctionnalités.

Objets

Dans des sujets précédents, nous avons travaillé avec des numéros de données primitifs, des lignes, mais les données ne représentent pas toujours des types primitifs. Par exemple, si dans notre programme, nous devons décrire l'essence d'une personne qui a un nom, un âge, un sexe, etc., nous ne pourrons naturellement pas imaginer l'essence d'une personne sous la forme d'un nombre ou de chaîne. Nous avons besoin de plusieurs lignes ou chiffres pour décrire correctement une personne. À cet égard, une personne agira comme une structure complexe complexe qui aura des propriétés séparées - l'âge, la croissance, le nom, le nom de famille, etc.

Les objets sont utilisés pour fonctionner avec des structures similaires dans JavaScript. Chaque objet peut stocker des propriétés décrivant sa condition et des méthodes décrivant son comportement.

Créer une nouvelle installation

Il existe plusieurs façons de créer un nouvel objet.

Le premier moyen est d'utiliser le constructeur d'objet:

VAR utilisateur \u003d nouvel objet ();

Dans ce cas, l'objet s'appelle l'utilisateur. Il est également déterminé comme toute variable commune utilisant le mot-clé Var.

L'expression nouvel objet () représente un appel de constructeur - une fonction qui crée un nouvel objet. Un nouvel opérateur est utilisé pour appeler le concepteur. L'appel du constructeur rappelle effectivement à l'appel de la fonction habituelle.

La deuxième façon de créer un objet représente l'utilisation des crochets:

Utilisateur var \u003d ();

À ce jour, la deuxième façon est plus courante.

Propriétés de l'objet

Après avoir créé un objet, nous pouvons définir des propriétés dedans. Pour définir une propriété, après le nom de l'objet, spécifiez le nom de la propriété et attribuez-y la valeur:

Utilisateur var \u003d (); utilisateur.name \u003d "Tom"; utilisateur.age \u003d 26;

Dans ce cas, deux propriétés de nom et d'âge sont annoncées, qui sont attribuées aux valeurs correspondantes. Après cela, nous pouvons utiliser ces propriétés, par exemple, retirer leurs valeurs dans la console:

Console.log (utilisateur.name); Console.log (utilisateur.age);

Vous pouvez également définir des propriétés lors de la définition d'un objet:

Var User \u003d (Nom: "Tom", Âge: 26);

Dans ce cas, pour attribuer une valeur de la propriété, le symbole du côlon est utilisé et après avoir déterminé la propriété, la virgule (et non un point avec une virgule) est mise.

De plus, une méthode abrégée pour déterminer les propriétés est disponible:

Var Name \u003d "Tom"; Age Var \u003d 34; VAR utilisateur \u003d (nom, âge); Console.log (utilisateur.name); // tom console.log (utilisateur.age); // 34.

Dans ce cas, les noms des variables sont également les noms des propriétés de l'objet. Et ainsi vous pouvez créer des conceptions plus complexes:

Var Name \u003d "Tom"; Age Var \u003d 34; VAR utilisateur \u003d (nom, âge); Vareur de var \u003d (utilisateur, cours: "JavaScript"); Console.log (enseignant.user); // (Nom: "Tom", Âge: 34) Console.log (Enseignant.Course); // javascript.

Méthodes de l'objet

Les méthodes de l'objet déterminent son comportement ou les actions qu'elle produit. Les méthodes sont des fonctions. Par exemple, nous définissons la méthode qui apporterait le nom et l'âge d'une personne:

Utilisateur var \u003d (); utilisateur.name \u003d "Tom"; utilisateur.age \u003d 26; user.display \u003d fonction () (console.log (utilisateur.name); console.log (utilisateur.age);); // appel à l'aide de la méthode User.Display ();

Comme dans le cas des fonctions, les méthodes sont d'abord déterminées, puis causées.

En outre, des méthodes peuvent être déterminées directement lors de la détermination de l'objet:

Var utilisateur \u003d (Nom: "Tom", âge: 26, Affichage: fonction () (Console.log (ce nom); console.log (this.age);););

Comme dans le cas des propriétés, la méthode est attribuée une référence à une fonction utilisant un signe de côlon.

Pour désigner les propriétés ou les méthodes de l'objet dans cet objet, ceci est utilisé. Cela signifie un lien vers l'objet actuel.

Vous pouvez également utiliser une méthode réduite pour déterminer des méthodes lorsque le côlon et la fonction de mot sont abaissés:

Var User \u003d (Nom: "Tom", Âge: 26, Affichage () (Console.log (ce nom, ceci.age);), Déplacez-vous (Console.log (ce nom, "va à" , endroit);)); utilisateur.display (); // tom 26 user.move ("The Shop"); // Tom va au magasin

Messies de syntaxe

Il existe également une solution alternative de déterminer les propriétés et les méthodes à l'aide de la syntaxe des tableaux:

Utilisateur var \u003d (); Utilisateur ["nom"] \u003d "Tom"; Utilisateur ["Âge"] \u003d 26; utilisateur ["Affichage"] \u003d fonction () (console.log (utilisateur.name); console.log (utilisateur.age);); // appelez l'utilisateur ["Affichage" Méthode] ();

Le nom de chaque propriété ou méthode est entre guillemets et entre crochets, ils sont également affectés à la valeur. Par exemple, l'utilisateur ["Âge"] \u003d 26.

Lors de l'accès à ces propriétés et méthodes, vous pouvez utiliser ou remarquer un point (utilisateur.name) ou contacter ceci: utilisateur ["nom"]

Rangées comme propriétés et méthodes

Il convient également de noter que les noms des propriétés et des méthodes de l'objet représentent toujours des lignes. C'est-à-dire que nous pourrions définir l'objet de réécrire ceci:

Var utilisateur \u003d ("nom": "Tom", "Age": 26, "Affichage": fonction () (console.log (utilisateur.name); console.log (utilisateur.age);));););); // appel à l'aide de la méthode User.Display ();

D'une part, il n'y a pas de différence entre deux définitions. D'autre part, il y a des cas où la conclusion de titre dans la chaîne peut aider. Par exemple, si le nom de la propriété est composé de deux mots séparés par un espace:

Var User \u003d (Nom: "Tom", Âge: 26, "Nom complet": "Tom Johns", "Info Afficher": Fonction () (Console.log (utilisateur.name); console.log (utilisateur.age) ;)); Console.log (utilisateur ["nom complet"]); utilisateur ["Info Afficher"] ();

Dans ce cas seulement, pour accéder aux propriétés et méthodes similaires, nous devons utiliser la syntaxe des tableaux.

Propriétés de retrait

Au-dessus, nous avons examiné comment vous pouvez ajouter de nouvelles propriétés à l'objet. Cependant, nous pouvons également supprimer des propriétés et des méthodes à l'aide de l'opérateur Supprimer. Et comme dans le cas de l'ajout, nous pouvons supprimer des propriétés de deux manières. Méthode de suspension - Utilisation de la notation de points:

Supprimer l'objet. Logiciel

Utilisez la syntaxe des tableaux:

Supprimer l'objet ["Propriété"]

Par exemple, supprimez la propriété:

Utilisateur var \u003d (); utilisateur.name \u003d "Tom"; utilisateur.age \u003d 26; user.display \u003d fonction () (console.log (utilisateur.name); console.log (utilisateur.age);); Console.log (utilisateur.name); // TOM Supprimer l'utilisateur.Nom; Nom; // Supprimer la propriété // option alternative // \u200b\u200bSupprimer l'utilisateur ["Nom"]; Console.log (utilisateur.name); // indéfini.

Après la suppression, la propriété ne sera pas déterminée, alors en essayant de faire appel à cela, le programme reviendra à un peu défini.

Une visite à la ressource Web est une URI spécifique dans la barre d'adresse du navigateur. Le visiteur indique l'adresse de la page et démontre le navigateur sur les éléments du modèle d'objet DOM Tree - Document. Tout lien de cette page indique le navigateur de démonter une autre page et de construire un arbre d'objets différent.

Le navigateur permet au visiteur de revenir en arrière ou d'aller de l'avant le long de la chaîne de page, qui ont déjà été consultées dans la session en cours.

En fait, l'action de l'utilisateur est le mouvement entre les systèmes d'objets formés lors des visites publiques. Chaque page est votre propre arbre DOM et, outre, l'objet JavaScript est des objets de syntaxe de la langue elle-même et des descriptions de l'utilisateur.

DOM: Téléchargez, mettez à jour et changez

Il existe trois options de base qui forment les objets de la page de ressources Web, à la fois au niveau DOM et au logo lui-même, qui ont terminé la conception de la création de variables et sur la base des descriptions effectuées par le développeur:

• chargement - Le visiteur est venu sur la page du site;
• la mise à jour est un visiteur (navigateur ou bouton CTRL-F5);
• modification de l'élément de page, par exemple (Ajax, script, événement, ...).

Les trois processus diffèrent radicalement, mais distinguant les caractéristiques des deux premières sont particulièrement importantes. Il est difficile d'interdire le visiteur de mettre à jour la page - il s'agit d'un habitude de visiteur "destructeur" peu coûteux que le développeur devrait être porté.

La navigation de la page et de ses limites doit être uniquement dans la fonctionnalité de la page elle-même, et non dans l'historique des visites sur le navigateur et les fonctions de ses boutons. De nombreux sites déclarent ces exigences importantes, mais les visiteurs le violent traditionnellement.

Changer la page sans recharger au niveau de son élément distinct (par exemple, AJAX) est la solution habituelle pour les pages dynamiques. En règle générale, il est utilisé pour les transitions par éléments de page, les modifications apportées à ses objets, la gestion de dialogue avec un visiteur.

Objets fondamentaux JavaScript

JavaScript est basé sur des objets. Presque toutes les variables sont des objets. Le développeur peut formuler ses propres descriptions d'objets à l'aide d'une variété d'options de syntaxe.

Tout ce qui n'est pas une "chaîne", "numéro", vrai, faux, null ou indéfini est un objet. Dans le cadre de la syntaxe de la langue, cela ne peut pas recevoir de valeurs, comprendre uniquement les éléments DOM et vos propres descriptions d'objet JavaScript. La structure fondamentale de la langue dans la plupart des cas pour le développeur n'a pas de valeur pratique significative .

Par exemple, les fonctions mathématiques sont représentées par l'objet mathématique. Ceci est pratique dans le cadre du concept de langue, mais pour le développeur est simplement une syntaxe pratique de l'utilisation de l'arsenal nécessaire d'opérations mathématiques.

Il est important de travailler correctement avec DOM et de décrire correctement vos propres objets. La syntaxe de la fonction d'objet JavaScript et les expressions pour leur application sont une forme d'enregistrement de la logique de l'algorithme requis.

Rangées, tableaux et objets

Tous les objets JavaScript sont basés sur la règle: "Propriété" \u003d "valeur" et le concept d'une matrice associative. Dans le cas le plus simple, l'objet JavaScript est un ensemble de paires "propriété" \u003d "valeur". Dans ce cas, la "valeur" peut ne pas toujours être un nombre et la propriété n'est pas toujours écrite sans guillemets.

Ne pas abuser des propriétés. Idéalement, lorsque les noms de propriétés ne contiennent que les symboles de l'alphabet latin, répondent aux exigences relatives aux variables de dénomination et ne sont pas des mots de langue (y compris réservés).

Aucune propriété rationnelle n'est supposée, mais lors de la création ou de l'initialisation d'une matrice associative pour savoir comment ses éléments sont disposés, il est tout à fait acceptable. Utilisez cette circonstance n'est pas recommandée, mais cela est possible.

Initialisation simultanée du réseau de biens:

• créer un tableau;
• créer un objet.

Dans un contexte particulier de l'application, vous pouvez envisager un objet JavaScript - en tant que tableau associatif, et sinon un algorithme est comme un objet, attribuez-y les méthodes nécessaires, modifiez les valeurs de ses éléments.

Étant donné que les noms des propriétés et de leurs valeurs, lors de la création ou de la modification, doivent être définis au format de la chaîne, il est recommandé d'utiliser la notation minuscule et les citations.

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

Vous pouvez obtenir et modifier les valeurs des propriétés de l'objet, vous pouvez concevoir Object.Keys: JavaScript forme un tableau de toutes propriétés de l'objet. Lorsque des objets sont créés de manière dynamique, cette conception est très pratique car elle génère automatiquement une liste de toutes les propriétés disponibles dans l'objet.

Cet exemple décrit deux tableaux de manière différente. En utilisation, les deux tableaux sont équivalents, car ils contiennent les propriétés du même nom et leurs valeurs. Toutes les propriétés du deuxième tableau sont sélectionnées dans la boucle et la chaîne de toutes les valeurs est formée.

Un effet similaire peut être atteint en notation de points ou en farce:

• x1_obj .Namelast;
• x1_obj ["nomfirst"].

Les deux conceptions sont autorisées et donnent le résultat souhaité. Dans l'exemple ci-dessus, lors de la spécification d'une matrice par des supports bouclés "()", une erreur peut être faite sous la forme d'un symbole "", à la fin de la liste (marquée dans l'exemple d'un cercle rouge). Habituellement, les navigateurs ignorent un symbole supplémentaire dans la liste, mais il vaut mieux ne pas faire.

Supprimer les propriétés de l'objet

Depuis que l'objet est un tableau associatif, opération L'objet Supprimer JavaScript est effectué au niveau de l'objet actuel (dans l'héritage - il est important) et est considéré sur les collections des propriétés de cet objet.

Dans le contexte de l'exemple ci-dessus, vous pouvez utiliser de telles structures:

• supprimer x1_obj .Namelast;
• supprimer x2_obj ["nomfirst"];

Le premier design supprime le deuxième élément du premier objet, la deuxième conception est le premier élément du deuxième objet. L'opérateur de retrait ne fonctionne pas sur les propriétés du prototype et renvoie le résultat de la fausse valeur si la propriété ne peut pas être supprimée.

Propriétés et méthodes d'objets

Les propriétés d'objet JavaScript et les fonctions (méthodes) La syntaxe est similaire aux canons de syntaxe générale et à la sémantique de la langue. En fait, la situation est exactement le contraire.

Les propriétés et les méthodes d'un objet sont une variante de la description des informations et admissibles de le faire via un paradigme JavaScript orienté objet.

Cet exemple décrit un objet x3_obj, qui n'a que deux propriétés: article et pos. Ensuite, la méthode Hello () a été ajoutée sous la forme d'une fonction. En conséquence, l'interprétation de cette description dans le contexte des valeurs de propriétés, les valeurs d'objet JavaScript feront comme indiqué dans la fenêtre de résultat, c'est-à-dire placé le corps de la fonction (1) comme valeur.

Si vous appelez directement les propriétés Hello (), il est interprété comme une méthode (fonction) et le résultat (2) sera l'exécution du code de cette méthode.

Le mot clé de ceci dans l'objet

Pour l'orientation dans les propriétés des propriétés de l'objet, le développeur peut utiliser ce mot-clé et se reporter aux propriétés décrites par eux pour obtenir ou modifier leurs valeurs.

Ce n'est que le début de la description de l'objet avec le corps de seul le designer. Cet exemple décrit l'objet de travailler avec des cookies. L'objet est initialisé au moment du chargement de la page avec la conception:

• var ocokie \u003d nouvelles scookies (Cownercode);
• ocokie .init ();

Dans cet exemple, Cownercercode - code unique visiteur. Sinon, un nouveau code sera créé dans le concepteur d'objet ocokie. Peu importe ce que le développeur de cet objet signifiait sous l'autorisation du visiteur, il est important car le mot clé est utilisé ici pour décrire les méthodes d'objet et leur appel à d'autres méthodes d'objet:

• cette .getcookie \u003d fonction (cname) (...);
• cette .Setcookie \u003d fonction (CNAME, CVALUE) (...).

Ceci décrit les méthodes d'objet pour lire des cookies par son nom et écrire des valeurs de cuisson avec un nom spécifique.

• ce .getcookie ("COWNER");
• ce .Setcookie ("COWNER", COWER);

Donc, ils sont utilisés si la première valeur sera représentée à la suite de la première conception, la deuxième conception le définit.

Un exemple d'objet pour travailler avec des cookies

Vous pouvez discuter, des objets »et un paradigme d'une approche linguistique orientée objet travaillant dans un environnement de navigateur. C'est intéressant, mais dans la réalité, j'ai besoin de pratique et non la théorie. Servir des pages DOM, fournir des outils pour manipuler des objets et bouger Sur les objets d'objets - c'est un javascript latéral fort.

Une autre pratique orientée objet est importante. Travailler avec des cookies presque toutes les ressources Web de l'ordre des choses. Mettre en œuvre cela dans le format de l'objet est une bonne idée. Dans ce contexte, l'initialisation de l'objet se produit au moment de l'ouverture de la page: la page est chargée \u003d l'objet Cook existe et lisez tout, et qui n'a pas été créé.

En cours de travail avec la page, le visiteur fait certaines actions et le navigateur doit changer ou créer des cookies. Il existe deux méthodes d'objet (désignées ci-dessus) qui le rendent.

En fait, l'objet Cook se produit immédiatement après que le navigateur construit DOM et complète le système d'objets JavaScript avec une nouvelle fonctionnalité: lire et créer (changer) des cookies.

Sur cet exemple simple est considéré comme une procédure de création d'objets réels qui possèdent des propriétés et des fonctionnalités exceptionnellement propres (méthodes). Chaque objet fait son travail et ne participe pas à un algorithme général, ne modifie pas les données d'autres objets ni l'espace de noms commun.

Avec cette approche, le développeur fournit la création d'un système d'objets uniques suffisant pour décrire et maintenir un problème solide.

Pages d'événements et objets

Un élément important du fonctionnement de DOM et JavaScript: Evénement d'objet "S - Vous permet d'obtenir des informations sur un événement dans son gestionnaire. Presque chaque élément de page peut être attribué à un ou plusieurs événements.

En fait, le développeur JavaScript ne crée pas un gros code "pièce", mais de nombreuses descriptions de fonctions, d'objets, de structures de données et attribuent des éléments spécifiques des gestionnaires de pages.

L'événement Objet est une information d'événement qui a provoqué un gestionnaire et la capacité d'effectuer une réponse adéquate à cet événement. Chaque événement se distingue non seulement par le nom et le lieu d'occurrence, mais également par de nombreux autres paramètres.

En particulier, les événements de clavier sont un ensemble de paramètres, les événements de la souris sont un spectre de données complètement différent, et la réponse du serveur via Ajax planifie le développeur lui-même à travers Ajax.

Dans chaque cas, l'image des événements pouvant survenir sur la page est transformée dans le spectre des gestionnaires incluse, en dehors des options fournies pour traiter une page de jeu d'événements spécifique n'entre aucune action.

Création et travail d'objets

Le navigateur "transforme" URI, l'adresse de la ressource Web spécifiée par le visiteur à l'arborescence DOM - le système des objets de page de cette ressource Web. Lorsque vous déplacez le visiteur sur les liens de la page, le navigateur passe aux arbres correspondants d'autres pages.

Cette circonstance permet au développeur de créer son système d'objets comme fondement de la ressource Web, répondant de manière adéquate au comportement du visiteur. Si vous calculez la fonctionnalité globale, par exemple:

• travailler avec des cookies;
• réception / transfert de données (AJAX);
• conseils pop-up;
• messages internes (site de discussion);
• autres tâches;

ceci créé une fois, les systèmes d'objet peuvent être utilisés lors du développement d'autres sites. C'est l'avantage essentiel de l'approche objet de l'utilisation habituelle de JavaScript que le langage de navigateur qui assure le fonctionnement de la page et la réponse aux événements.

Les objets sont des composants complets pouvant être fabriqués sous la forme de fichiers individuels et utilisés à l'avenir. Une caractéristique caractéristique de cette approche est la possibilité de rétroaction, lorsqu'une mise à jour, un objet amélioré peut être utilisé dans le développement précédent, à la mise à jour automatiquement de ses fonctionnalités sans raffinement du site.