Pour comprendre les objets JavaScript, nous pouvons commencer à partir de la création d'objets, des opérations de propriété et des méthodes d'objets. Pour résumer, il comprend les modules suivants:
1. Créez un objet
1.1 Mesure directe des objets
La quantité directe d'un objet est le moyen le plus simple de créer un objet, et il se compose de plusieurs paires de nom / valeur:
var point = {x: 0, y: 0};Il n'y a pas de limite pour attribuer les noms. Il peut s'agir de mots clés JS ou de toute chaîne. Si ces deux situations, les attributs doivent être enfermés en doubles citations:
var vide = {}; VA Point = {x: 0, y: 0}; var book = {"Title principal": "javascript", "sous-title": "The Definitive Guide", "For": "All Audience", auteur: {FirstName: "Davide", LastName: "Flanagan"}};Il est très simple de créer des objets directement, mais il n'est généralement pas utilisé de cette manière. Le code est faible réutilisable. Si vous souhaitez utiliser l'objet ailleurs et que les valeurs d'attribut sont différentes, alors faites-le? Devez-vous recréer un autre code?
1.2 Créez un objet à travers de nouveaux
Avant de créer un objet à travers un nouveau, vous devez d'abord créer une fonction et nouveau traite cette fonction comme un constructeur. Par exemple, créez un objet de personne à travers un nouveau:
fonction personne () {// constructeur} var personne = new personne ();Les types primitifs dans le cœur de la langue JavaScript contiennent tous des constructeurs intégrés:
var a = new Array (); var d = new Date (); var r = new regexp ("js");1.3 Object.Create ()
Avant de comprendre la méthode de création de l'objet, nous voulons voir ce qu'est un prototype. Chaque objet JavaScript (sauf null) est associé à un autre objet. L'objet "un autre" est ce que nous appelons un prototype. Chaque objet hérite des attributs du prototype.
Tous les objets créés via l'objet Direct Quantity ont le même prototype objet objet.prototype. Le prototype d'objet créé par le mot-clé nouveau et le constructeur est la valeur de la propriété Prototype du constructeur. Le prototype de l'objet créé via New Array () est Array.Prototype, et le prototype de l'objet créé via New Date () est Date.prototype. Le prototype a été introduit ici.
La méthode Object.Create contient deux paramètres. Le premier paramètre est le prototype de l'objet et le deuxième paramètre est facultatif pour décrire les propriétés de l'objet. Il est facile à utiliser, passez simplement dans l'objet prototype requis:
var o1 = object.create ({x: 1, y: 2}); // Le prototype est objet.prototypeSi vous souhaitez créer un objet sans prototype, vous pouvez passer null en tant que paramètre. Les objets créés de cette manière n'héritent aucune propriété, et il n'y a pas de méthode comme ToString:
var o2 = object.create (null); // pas de prototype
Si vous souhaitez créer un objet vide normal, passez-le directement dans objet.prototype:
var o3 = object.create (object.prototype);
S'il s'agit d'un objet personnalisé, c'est la même chose que la création d'un objet vide. Passer directement le nom de l'objet.prototype:
fonction personne () {} var o4 = object.create (personne.prototype);2. Gestion des attributs
2.1 Requête et paramètres de propriété
Les propriétés d'un objet peuvent être obtenues via l'opérateur DOT (.) Ou Square Bracket ([]). Si vous utilisez des points pour obtenir l'attribut, le nom d'attribut doit être un indicateur simple. Il ne peut pas être un mot réservé, comme O.for ou O.Class.
AR auteur = book.author; // Correct var name = Author.Surname; // correct var title = book ["Titre principal"]; // Correct var className = book.class; //Erreur
La syntaxe de l'objet ["propriété"] ressemble plus à un tableau, sauf que les éléments de ce tableau sont indexés par des chaînes plutôt que par les nombres. Ce type de tableau est ce que nous appelons un tableau associatif, également appelé hachage, carte ou dictionnaire. Les objets JavaScript sont des tableaux associatifs.
Étant donné que l'objet est un tableau associatif, JavaScript nous fournit également une méthode pour / in pour traverser les propriétés. L'exemple suivant utilise pour / in pour calculer la valeur totale du portefeuille:
fonction getValue (portfolio) {var total = 0,0; pour (actions dans Portolio) {var actions = Portolio [stock]; var prix = getquote (stock); Total + = actions * Prix; } retour total;}Héritage: les objets JavaScript ont leurs propres propriétés et certaines propriétés sont héritées des objets prototypes. Regardons d'abord un héritage de fonction qui met en œuvre l'héritage:
fonction inhérent (p) {if (p == null) throw typeError (); // p est un objet, il ne peut pas être null if (object.create) {return object.create (p); // utilise directement la méthode objet.Create} var t = typeof p; if (t! == "objet" && t! == "fonction") throw typeError (); fonction f () {}; f.prototype = p; // Définit son prototype d'attribut à P renvoie nouveau f ();}Supposons que vous souhaitiez interroger l'attribut x de l'objet o. Si x n'existe pas dans O, vous continuerez à interroger l'attribut x dans l'objet prototype de O. S'il n'y a pas de X dans l'objet Prototype, mais que l'objet Prototype a également un prototype, continuez à exécuter la requête sur le prototype de l'objet Prototype jusqu'à ce que X soit trouvé ou qu'un objet nul est trouvé.
var o = {}; // Attribut objet Oinherit ox = 1 de object.prototype; // définir x attributs pour o var p = héritage (o); // pinherit o et object.prototypep.y = 2; // attribut pdefine yvar q = héritage (p); // qinherit p, o et objet.prototypeq.z = 3; // définir l'attribut zvar s = q.toString (); // toString hérite de l'objet.prototypeq.x + qy // => 3: x et y héritent respectivement d'o et p2.2 Supprimer les attributs
L'opérateur de suppression peut supprimer les propriétés de l'objet:
supprimer le livre.author; supprimer le livre ["titre principal"];
Delete ne peut supprimer ses propres attributs et ne peut pas supprimer les attributs hérités. Pour supprimer une propriété héritée, il doit être supprimé de l'objet Prototype qui définit la propriété, ce qui affecte tous les objets hérités du prototype. La suppression reviendra vrai.
ar o = {x: 1}; supprimer ox; // Supprimer X et retourner Trededelete Ox; // x n'existe plus, rien n'est fait, retourne vrai. Supprimer O.Tostring; // ne faites rien, revenez vrai. Supprimer ne peut pas supprimer les attributs avec un type configurable false. Les propriétés de certains objets intégrés ne sont pas configurables, telles que les propriétés de l'objet global créé via des déclarations de variables et des déclarations de fonction: supprimer objet.prototype // Il ne peut pas être supprimé, les propriétés ne sont pas configurables var x = 1; supprimer this.x; // Cette propriété ne peut pas être supprimée Fonction f () {} Supprimer this.f; // La fonction globale ne peut pas être supprimée2.3 Détecter les propriétés
Pour déterminer si une propriété existe dans un objet, il peut être détecté par l'opérateur, HasownProperty () et PropertyIsenumerable ().
Dans l'opérateur: l'opérateur est le nom de propriété à gauche et l'objet à droite. Return true si l'attribut ou l'attribut héréditaire de l'objet contient des attributs:
var o = {x: 1}; "x" dans o; // true: x est l'attribut "y" dans o; // false: y n'est pas l'attribut "toString" dans o; // vrai: o hérite de l'attribut toStringHasownProperty () Méthode: détecte si le nom donné est la propriété de l'objet. Pour l'attribut hérité, il renverra false:
var o = {x: 1}; o.hasownproperty ("x"); // Vrai: O a une propriété gratuite xo.hasownproperty ("y"); // false: pas de propriété yo.hasoenproperty ("toString"); // FAUX: Tostring est une propriété d'héritagePropertyIsEnumerable () Méthode: est une version améliorée de HasownProperty. Il ne reviendra que si la propre propriété est détectée et que cette propriété est considérée comme vraie:
var o = hériter ({y: 2}); ox = 1; o.propertyiSenumable ("x"); // vrai: o a une propriété énumérable xo.propertyisenumable ("y"); // false: y est l'objet héréditaire.prototype.propertyisenumable ("toString"); // faux: ne peut pas être énumérable2.4 Propriétés d'énumération
Habituellement, pour / in est utilisé pour faire bouclez à travers les propriétés des objets, et les propriétés traversées incluent leurs propres propriétés et propriétés héréditaires. Les méthodes intégrées de l'héritage des objets ne sont pas énumérées, mais les propriétés ajoutées aux objets du code sont énumérées. Par exemple:
var o = {x: 1, y: 2, z: 3}; // trois propriétés énumérées o.propertyisenuable ("toString"); // false, ne peut pas être énuméré pour (p dans o) // transfert la propriété console.log (p); // Sortie x, y et z, pas de sortie toStringParfois, nous voulons simplement parcourir nos propres propriétés, et les propriétés ne sont pas des fonctions:
pour (p dans o) {if (! o.hasownproperty (p)) continue; if (typeof o [p] === "fonction") continue;}Nous pouvons copier des attributs énumérés via la fonction de traversée d'énumération:
/ ** Copiez les attributs énumérables en p en o et renvoyer o * Si o et p contiennent des attributs du même nom, écrasez les attributs dans o * Cette fonction ne gère pas les getters et les setters et les attributs de copie * / fonction extension (o, p) {for (prop dans p) {// transfèrent tous les attributs dans p o [prop] = p [project]; // ajouter des attributs à o} return o;}ES5 définit deux fonctions qui énumèrent les noms d'attribut. Le premier est object.keys (), qui renvoie un tableau composé de noms d'attribut énumérés dans l'objet. La deuxième fonction d'énumération est object.getownpropertyNames (), qui est similaire à object.Keys (), qui renvoie toutes les propriétés de l'objet, pas seulement des propriétés énumérables.
3. Encapsulation d'attribut
3.1 Attributs Getter et Setter
Les attributs d'objet sont composés de noms, de valeurs et d'un ensemble d'attributs. Dans ES5, les valeurs d'attribut peuvent être remplacées par une ou deux méthodes, qui sont des getters et des setters. Les attributs définis par les getters et les setters sont appelés "attributs d'accessoires". Contrairement aux "attributs de données", les attributs de données n'ont qu'une seule valeur simple.
Contrairement aux attributs de données, l'attribut accessor n'est pas inscrite. Si la propriété a à la fois des méthodes Getter et Setter, il s'agit d'une propriété de lecture / écriture. S'il n'a que des méthodes Getter, il s'agit d'une propriété en lecture seule, s'il n'a que des méthodes de setter, alors c'est une propriété en écriture uniquement. La lecture des attributs d'écriture uniquement renvoie toujours indéfini.
La syntaxe de définition de l'attribut accessor est également relativement simple. La définition de la fonction n'utilise pas le mot clé de la fonction, mais utilise Get ou SET:
var o = {// Attribut de données ordinaire Data_Prop: 1, // Les attributs accessoires sont tous des fonctions définies par paire Get Accessor_Prop () {/ * Voici le corps de fonction * /}, se définir Accessor_Prop (valeur) {}};Pensez à l'objet suivant qui représente les coordonnées des points cartésiens 2D. Il a deux propriétés normales X et Y représentent respectivement les coordonnées x et les coordonnées Y. Il dispose également de deux propriétés d'accessoires équivalents pour représenter les coordonnées polaires des points:
var p = {// x et y sont des attributs de données de lecture ordinaires x: 1.0, y: 1.0, // r est un attribut d'accessoire en lecture-écriture, qui a Getter et Setter get r () {return math.sqrt (this.x * this.x + this.y * this.y); }, set r (newValue) {var oldvalue = math.sqrt (this.x * this.x + this.y * this); Ratio var = newValue / OldValue; this.x * = ratio; this.y * = ratio; }, // theta est un attribut d'accessoire en lecture seule, seule la méthode Getter get theta () {return math.atan2 (this.y, this.x); }};Comme les attributs de données, les attributs d'accessoires sont héritables, de sorte que l'objet P dans le code ci-dessus peut être considéré comme un prototype d'un autre "point". Il peut définir ses propriétés x et y pour un objet sexuel, mais les propriétés R et Theta héritent de:
var q = hériter (p); qx = 1, qy = 1; console.log (qr); cosole.log (q.theta);
3.2 Fonctions d'attribut
Nous pouvons considérer les méthodes Getter et Setter de l'attribut Accessor comme caractéristiques d'attribut. Selon cette logique, nous pouvons également examiner les caractéristiques des propriétés des propriétés. Par conséquent, on peut considérer qu'une propriété contient un nom et 4 attributs.
Les quatre caractéristiques d'une propriété numérique sont sa valeur, inscriptible, énumérable et configurable.
Les attributs d'accessoires n'ont pas de caractéristiques de valeur et d'écriture, ils incluent donc: lire (get), écrire (set), énumération et configurabilité.
ES5 définit un objet nommé "Attribut Descriptor", qui représente ces 4 attributs. Les attributs de l'objet descripteur de l'attribut de données incluent la valeur, écrivable, énumérable et configurable. L'objet descripteur de l'attribut accessor est remplacé par l'attribut get et l'attribut set. Parmi eux, les valeurs booléennes, et l'attribut Get Attribut et Set, sont parmi eux, et l'attribut Get Attribut et Set sont des valeurs de fonction.
Vous pouvez obtenir le descripteur de propriété pour une propriété spécifique d'un objet en appelant objet.getownProperTyDescriptor ():
Cette "octet"); // Pour les attributs héréditaires et les attributs inexistants, renvoyez undefinedObject.getownProperTyDesciptor ({}, "x"); object.getownpropertyDescipt ({}, "toString");Comme vous pouvez le voir sur le nom de la fonction, object.getownpropertyDesciptor () ne peut obtenir que le descripteur de ses propres propriétés. Pour obtenir les caractéristiques des attributs héréditaires, vous devez traverser la chaîne prototype (object.getPrototypeOf ()).
Si vous souhaitez définir les propriétés des propriétés ou faire que les propriétés nouvellement créées ont certaines propriétés, vous devez appeler object.defineProperty (), qui contient trois paramètres: objet, nom de propriété et objet de descripteur de propriété:
// des propriétés existent, mais le bœuf ne peut pas être énuméré; // => 1Object.keys (o) // => [] // Modifiez maintenant la propriété x pour le faire en lecture seule // l'opération échoue, mais aucune erreur n'est signalée, et une exception d'erreur de type est lancée en mode strict // les propriétés sont toujours configurables, de sorte qu'elle peut être modifiée de cette manière: object.defineproperty (o, "x", {valeur: 2}); ox // => 2 // Modifiez maintenant x de la propriété de données à la propriété accessoire. 0;}}); ox // => 0Si vous souhaitez modifier ou créer plusieurs propriétés en même temps, vous devez utiliser object.defineProperties (). Le premier paramètre est l'objet à modifier et le deuxième paramètre est une table de mappage. Par exemple:
var p = object.defineProperties ({}, {x: {valeur: 1, withing: true, énumérable: true, configurable: true}, y: {value: 2, writeable: true, énuable: true, configurable: true}, r: {get: function () {return math.sqrt (this.x * this.x + this.y * this.y); configurable: true}});API à l'ancienne pour Getters et Setters: Avant ES5, la plupart des implémentations JavaScript pourraient déjà prendre en charge la syntaxe Get et Définir la syntaxe de la quantité directe d'objet. Ces implémentations fournissent des API à l'ancienne non standard pour interroger et définir les getters et les setters. Ces API sont composées de quatre méthodes, et tous les objets ont ces méthodes.
__lookupgetter __ () et __lookupSetter __ () sont utilisés pour renvoyer une méthode d'attribut nommé et de setter nommé.
__definegetter __ () et __defineSetter __ () sont utilisés pour définir les getters et les setters. Le premier paramètre est le nom d'attribut, et le deuxième paramètre est les méthodes Getter et Setter.
var o = {}; o .__ DefineGetter __ ("x", function () {return 0;}); o .__ DefineSetter __ ("y", function (valeur) {console.log ("set value:" + value);});4. Trois propriétés d'un objet
Chaque objet a un prototype, une classe et un attribut extensible qui lui est lié. Ensuite, parlons de ce que font ces attributs.
4.1 Propriétés du prototype
Les attributs prototypes d'un objet sont utilisés pour hériter des attributs. Nous appelons souvent les attributs du prototype d'O "directement" O's Prototype ". Auparavant, "Créer des objets" a introduit trois façons de créer des objets. Les objets créés par les objets sont utilisés comme prototype à l'aide d'objet.prototype. Les objets créés par New Utilisent l'attribut prototype du constructeur comme prototype. Objets créés avec object.create () utilisent le premier paramètre comme prototype.
Dans ES5, le prototype d'objet peut être interrogé via object.getPrototypeOf (). Dans ES3, il n'y a pas de fonction équivalente, mais à la place, l'expression O.Contructor.prototype est utilisée pour vérifier le prototype de l'objet.
Pour détecter si un objet est un prototype d'un autre objet (ou se trouve dans la chaîne prototype), utilisez la méthode isPrototypeOf (). Par exemple, vous pouvez détecter si P est un prototype de O par P.SprototypeOf (O):
var p = {x: 1}; // définir un prototype objet var o = object.create (p); // utilise ce prototype pour créer un objet p.sprototypeof (o); // => true, o hérite de Pobject.prototype.isprototypeof (o) // => true, p hérite de l'objet.prototypeJavaScript implémenté par Mozilla expose un attribut spécifiquement nommé __proto__ pour interroger / définir directement le prototype d'objet. Cependant, IE et Opera ne prennent pas en charge l'attribut __proto__, il n'est donc pas recommandé d'utiliser directement l'attribut __proto__.
4.2 Attributs de classe
L'attribut de classe d'un objet est une chaîne pour représenter les informations de type de l'objet. ES3 et ES5 fournissent des méthodes pour définir cette propriété, et il n'y a qu'un seul moyen indirect de l'interroger. La méthode ToString () par défaut renvoie une chaîne dans ce format: [classe d'objets].
Vous pouvez appeler la méthode toString (), puis extraire les caractères entre le huitième et l'avant-dernière position de la chaîne retournée. Mais il y a un problème que de nombreux objets ont été réécrits par des méthodes toString (). Afin de pouvoir appeler la version ToString () correcte, la méthode function.call () doit être appelée indirectement. La fonction de classe dans l'exemple suivant peut renvoyer la classe de n'importe quel objet:
fonction classof (o) {if (o === null) return "null"; if (o === Undefined) renvoie "Undefined"; return object.prototype.tostring.call (o) .slice (8, -1);}4.3 Évolutivité
L'extensibilité de l'objet est utilisée pour indiquer si de nouvelles propriétés peuvent être ajoutées à l'objet. Tous les objets intégrés et personnalisés sont explicitement extensibles. Dans ES5, les objets peuvent être convertis en non de mise à l'échelle.
En plus de définir l'objet non extensible, la méthode objet.seal () peut également définir toutes les propriétés de l'objet à être non configurables. C'est-à-dire que de nouveaux attributs ne peuvent pas être ajoutés à l'objet, et les attributs existants ne peuvent pas être supprimés et configurés.
La méthode object.isaled () est utilisée pour détecter si l'objet est enfermé.
La méthode object.freeze () verrouillera les objets plus strictement. En plus d'avoir la fonction de la méthode object.seal (), il peut également définir tous ses propres attributs de données en lecture seule (si l'attribut accessor de l'objet a une méthode de setter, l'attribut accessor n'est pas affecté et vous pouvez toujours les appeler en attribuant des valeurs aux attributs).
Object.isfrozen () est utilisé pour détecter si l'objet est gelé.
5. sérialiser les objets
La sérialisation des objets fait référence à la conversion de l'état d'un objet en une chaîne, ou vous pouvez restaurer la chaîne en un objet. ES5 fournit des fonctions intégrées JSON.StRINFIFY () et JSON.Parse () pour sérialiser et restaurer les objets JavaScript. Ces méthodes utilisent toutes JSON comme format d'échange de données. Par exemple:
o = {x: 1, y: {z: [false, null, ""]}}; // définir un objet de test s = json.stringify (o); // {"x": 1, "y": {"z": [false, null, ""]}} p = json.parse (s); // p est une copie profonde de OLa syntaxe de JSON est un sous-ensemble de la syntaxe JavaScript, et il ne peut pas représenter toutes les valeurs dans JavaScript. Les objets, les tableaux, les chaînes, les nombres infinis, true, false et null sont pris en charge, et ils peuvent être sérialisés et restaurés. Les résultats de la sérialisation NAN, Infinity et -Infinity sont tous nuls. Les fonctions, regexp, objets d'erreur et valeurs non définies ne peuvent pas être sérialisées et restaurées.
Ici, j'ajouterai la méthode de l'objet:
Méthode toString (): il renverra une chaîne représentant la valeur de l'objet qui appelle cette méthode. De nombreux objets ont réécrit la méthode toString (), telle que array.toString (), date.toString () et function.toString ().
TOJSON () Méthode: Object.prototype ne définit pas réellement la méthode Tojson (), mais en raison de la nécessité d'effectuer la sérialisation, la méthode json.strifify () appellera la méthode tojson (). Si cette méthode existe dans l'objet sérialisé, on l'appelle.
Méthode Value Of (): La méthode Value Of () est très similaire à la méthode TOSTRING (), mais JavaScript l'appelle souvent lorsqu'il convertit un objet en une certaine valeur d'origine plutôt qu'une chaîne, en particulier lorsqu'elle est convertie en nombre. Certaines classes intégrées personnalisent la méthode de valeur de () telle que date.valueof ().
L'article ci-dessus comprend de manière globale que l'avancement des objets JavaScript est tout le contenu que je partage avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.