Share
C'est un bon moment pour JavaScript. Non seulement il est en train de devenir un langage beaucoup plus respecté, mais il progresse également à pas de géant - à la fois en popularité et en fonctionnalités. Alors que de plus en plus de navigateurs commencent à mettre en œuvre les fonctionnalités du standard ECMAScript 5ème édition, JavaScript devient une plate-forme encore plus puissante sur laquelle vous pourrez développer. Dans ce tutoriel, nous allons parler des nouvelles méthodes à votre disposition..
ECMAScript est le nom officiel de ce que nous appelons tous JavaScript. Cela ne signifie pas que nous avons tort. c'est simplement que le nom "JavaScript" est une marque commerciale d'Oracle; Ecma International (à l'origine l'Association européenne des constructeurs d'ordinateurs, d'où l'ECMA) utilise le terme "ECMAScript" pour faire référence à la norme JavaScript. La dernière version de cette norme est la cinquième édition et a été approuvée il y a un peu plus d'un an (le 3 décembre 2009). Il englobe une vaste gamme d’excellents ajouts, et plusieurs d’entre eux commencent à apparaître dans les navigateurs. La mise en œuvre de ECMAScript 5 s'appelle JavaScript 1.8.5..
Dans ce tutoriel, nous allons examiner les fonctions JavaScript 1.8.5 disponibles dans les versions bêta de Firefox 4. Vous serez heureux de découvrir que la plupart des dernières versions des autres navigateurs en ont aussi… sauf un. Cette fois-ci, c’est Opera, IE9 en ayant inclus beaucoup.
Cette méthode est très importante. il nettoie vraiment l'héritage prototypique. Auparavant (dans ECMAScript 3ème édition), pour créer un objet et définir son prototype, procédez comme suit:
fonction Cat (nom) this.name = nom; this.paws = 4; this.hungry = false; this.eaten = []; Cat.prototype = constructeur: Cat, play: function () this.hungry = true; retournez "jouer!"; , nourrir: fonction (nourriture) this.eaten.push (nourriture); this.hungry = false; , parle: function () return "Meow";
Suis-je le seul à penser que le prototype a l'air bizarre? à l'extérieur la fonction constructeur? Et hériter devient encore plus salissant. Avec Object.create, les choses deviennent beaucoup plus faciles. Ce qui précède pourrait être codé comme ceci:
var chien = nom: "chien", pattes: 4, faim: faux, mangé: nul, jeu: fonction () this.hungry = true; retournez "jouer!"; , nourrir: fonction (nourriture) if (! this.eaten) this.eaten = []; this.eaten.push (nourriture); this.hungry = false; , parle: function () retourne "Woof!" ; var my_dog = Object.create (chien);
Qu'est-ce qui se passe ici est la suivante: j'appelle object.create, en passant un objet à utiliser comme prototype du nouvel objet Object.create est de retour. Lors de l'utilisation Object.create, Je n'ai pas à m'inquiéter de la définition du prototype séparément. En fait, j'ai beaucoup plus de flexibilité pour décider comment créer et hériter des objets. Par exemple, je ne peux pas mettre le mangé tableau sur le prototype, car un tableau est une valeur de référence, de sorte que chaque objet créé à partir de chien partagera ce tableau. J'ai décidé de le vérifier avant de l'utiliser ici, mais si je voulais envelopper Object.create (chien) dans un make_dog fonction, je pourrais y assigner tout aussi facilement.
C'est ce qui est génial Object.create; vous pouvez choisir comment le faire.
Il y a un deuxième paramètre qui Object.create prend; c'est un objet descripteur de propriétés. C'est un peu compliqué, mais c'est aussi une partie de la prochaine fonction que nous allons examiner, alors vérifions cela.
Si vous souhaitez définir une propriété sur un objet, procédez comme suit:
my_dog.age = 2;
Cela fonctionne toujours bien dans ES5, mais si vous voulez un contrôle plus fin, vous pouvez l’avoir avec Object.defineProperty. Le premier paramètre est l'objet sur lequel vous attribuez la propriété. Le deuxième paramètre est le nom de la propriété, sous forme de chaîne. La propriété finale est l'objet descripteur. Voici comment cela fonctionne. C'est (évidemment) un objet et il peut avoir une combinaison des propriétés suivantes, décrivant toutes la propriété que nous ajoutons:
Accentsconagua
indéfini.vrai. Par défaut à faux.vrai. Par défaut à faux.faux.indéfini.indéfini.Notez que les valeurs par défaut pour les options booléennes ci-dessus sont l’inverse de l’ancien obj.prop = val normes. En outre, sachez que vous ne pouvez pas définir valeur ou en écriture quand obtenir ou ensemble sont définis et inversement.
Alors, comment utiliseriez-vous cela? Essaye ça:
// suppose que my_dog est situé au-dessus de Object.defineProperty (my_dog, "age", set: function (age) this.human_years = age * 7;, get: function () return this.human_years / 7;, enumerable : vrai ); my_dog.age = 2; my_dog.human_years; // 14
Mis à part le fait que les années-chien ne sont pas vraiment 7 années humaines, vous remarquerez que nous n'avons pas défini valeur ou en écriture ici, parce que nous utilisons obtenir et ensemble. Ces fonctions ne sont jamais accessibles directement. Ils sont "magiquement" exécutés dans les coulisses lorsque vous attribuez ou demandez une propriété. Dans cet exemple, j'utilise ces fonctions pour garder âge et human_years in “sync.” Si vous ne voulez pas que l’autre valeur soit accessible, vous pouvez utiliser une fonction anonyme invoquant elle-même pour la masquer avec la fermeture:
Object.defineProperty (my_dog, "age", (function () var human_years; return ensemble: function (age) human_years = age * 7;, get: function () return human_years / 7;, énumérable: vrai ; ()));
Bien sûr, rien ne vous empêche de faire quelque chose de stupide à l'intérieur obtenir ou ensemble, alors utilisez-le à bon escient.
Vous pouvez utiliser un formulaire de l’objet descripteur de propriété pour ajouter des propriétés aux objets avec Object.create. Faites-le comme suit:
var your_dog = Object.create (dog, age: get: function () / *… * /, set: function () / *… * /, enumerable: true, sexe: valeur: " femelle" );
Utilisez simplement le nom de la propriété en tant que propriété de l’objet descripteur; puis définissez les attributs via un objet dans la valeur.
Si vous souhaitez définir plusieurs propriétés à la fois, vous pouvez utiliser un objet descripteur de propriété comme avec Object.create pour les définir, en utilisant Object.defineProperties.
Object.defineProperties (my_dog, age: get: function () / *… * /, set: function () / *… * /, énumérable: true, sexe: valeur: "femme" );
Vous voudrez noter - dans les rares cas où vous n'utilisez pas d'objet littéral en tant que second paramètre - que seules les propriétés énumérables de l'objet propriétés seront utilisées.
Si vous souhaitez connaître les spécificités d'une propriété, vous pouvez utiliser cette fonction., Object.getOwnPropertyDescriptor. Prenez note de la "Propre"; cela ne fonctionne qu'avec des propriétés sur l'objet lui-même, pas dans sa chaîne de prototypes.
var person = name: "Joe"; Object.getOwnPropertyDescriptor (personne, "nom"); // configurable: true, enumerable: true, valeur: "Joe", accessible en écriture: true
Comme vous pouvez le constater, cela fonctionne avec les propriétés définies à l'ancienne et à la nouvelle. Object.getOwnPropertyDescriptor prend deux paramètres: l'objet et le nom de la propriété sous forme de chaîne.
Vous avez toujours voulu obtenir toutes les clés d'un objet? Maintenant, vous pouvez le faire facilement avec Object.keys. Transmettez à cette fonction un objet et elle renverra un tableau de toutes les propriétés énumérables de cet objet. Vous pouvez également lui passer un tableau, et vous récupérerez un tableau des indices.
var horse = name: "Ed", age: 4, travail: "jumping", propriétaire: "Jim"; var horse_keys = Object.keys (cheval); // ["nom", "age", "travail", "propriétaire"];
Celui-ci est juste comme Object.keys, sauf qu'il inclut toutes les propriétés, même celles qui ne sont pas énumérable. Par le nom de fonction plus long, vous pouvez dire qu'ils découragent son utilisation. Habituellement, vous voudrez clés au lieu.
Si vous avez toujours voulu créer une fonction qui n'accepte pas de nouveaux paramètres, vous pouvez le faire maintenant. Exécuter votre objet à travers Object.preventExtensions, et il décline toutes les tentatives d’ajout de nouveaux paramètres. Cette fonction va de pair avec Object.isExtensible, qui retourne vrai si vous pouvez étendre l'objet et faux si vous ne pouvez pas.
var produit = nom: "Foobar", note: 3,5; Object.isExtensible (produit); // true Object.preventExtentions (product); Object.isExtensible (produit); // false product.price = "10,00 $"; // ne fonctionne pas product.price; // indéfini
Notez que toutes les propriétés de l'objet au moment de l'exécution Object.preventExtensions peut toujours être modifié ou supprimé (en supposant que leurs attributs le permettent).
Sceller un objet est un pas en avant pour empêcher les extensions. Un objet scellé ne vous permet pas d'ajouter ou de supprimer des propriétés, ni de modifier les propriétés d'une valeur (comme une chaîne) en un accesseur (une méthode) ou inversement. Vous pourrez toujours lire et écrire des propriétés, bien sûr. Vous pouvez savoir si un objet est scellé en utilisant Object.isSealed.
var animal = nom: "navigateur", tapez: "chien"; Object.seal (animal domestique); pet.name = "Oreo"; pet.age = 2; // ne fonctionne pas pet.type = function () / ** /; // ne fonctionne pas delete pet.name; // ne fonctionne pas
Geler encore un pas de plus. Un objet gelé ne peut en aucun cas être changé. c'est en lecture seule. Vous pouvez vérifier le frozennisme d'un objet avec, vous l'avez deviné, Object.isFrozen.
var obj = salut: "Salut!" ; Object.freeze (obj); Object.isFrozen (obj); // vrai
Vous penseriez qu'il ne serait pas trop difficile de déterminer qu'une variable donnée est un tableau. Après tout, tout le reste fonctionne bien avec le Type de opérateur. Cependant, les tableaux JavaScript sont de type incohérent. Ce sont en fait des objets de type tableau plus proches (même si nous utilisons habituellement ce terme pour faire référence à des choses comme arguments et NodeLists). Cette fonction vous permet de vous assurer à 100% que vous travaillez avec un tableau. Transmettez-lui une variable et retourne le booléen.
var names = ["Collis", "Cyan"]; Array.isArray (noms); // vrai
Pour en savoir plus sur les raisons pour lesquelles nous avons besoin de cette fonction, consultez la documentation ci-dessous..
Ce n'est pas trop gros, mais si vous souhaitez un jour stocker des dates au format JSON, vous trouverez peut-être cela utile. Les objets de date ont maintenant un toJSON fonction qui convertira la date en date de chaîne JSON.
new Date (). toJSON (); // "2010-12-06T16: 25: 40.040Z"
Vous êtes probablement familier avec l'utilisation appel et appliquer réaffecter la valeur de ce dans une fonction.
var arr1 = ["1", "2", "3"], arr2 = ["4", "5", "6"]; Array.prototype.push.apply (arr1, arr2);
Ces méthodes vous permettent de modifier la valeur de ce dans une fonction. Si vous voulez faire quelque chose comme ça souvent, Function.prototype.bind renvoie une nouvelle fonction avec ce lié à tout ce que vous passez, vous pouvez donc l'enregistrer dans une variable.
var tooltip = text: "Cliquez ici pour…", superposition = text: "Veuillez saisir le nombre de participants"; function show_text () // vraiment, faites quelque chose de plus utile ici console.log (this.text); tooltip.show = show_text.bind (tooltip); tooltip.show (); overlay.show = show_text.bind (superposition); superposition.show ();
Bien sûr, ce n’est peut-être pas l’exemple le plus pratique, mais il vous donne l’idée!
Ce sont les fonctions ECMAScript 5ème édition (ou JavaScript 1.8.5) qui ont été ajoutées aux versions bêta de Firefox 4. Il y a quelques autres changements à JavaScript qu'ils implémentent également, que vous pouvez vérifier dans les notes de publication.
Cependant, il existe de nombreuses fonctions ECMAScipt 5 déjà prises en charge dans Firefox 3 et plusieurs autres navigateurs. Avez-vous joué avec l'un de ces?
Note: ceux-ci sont liés à leur documentation MDN.
Si vous voulez voir quels navigateurs et versions prennent en charge ces fonctions, vous pouvez consulter ce tableau de compatibilité, créé par Juriy Zaytsev (Kangax). La bonne chose à propos de la plupart de ces fonctions est que si un navigateur ne le supporte pas, vous pouvez généralement ajouter un support, avec quelque chose comme ceci:
if (typeof Object.create! == 'fonction') Object.create = fonction (o) fonction F () F.prototype = o; retourne un nouveau F (); ; // Avec l'aimable autorisation de Douglas Crockford: http://javascript.crockford.com/prototypal.html
La multitude de nouvelles fonctions que nous avons examinées n’est en réalité qu’une petite partie de la qualité ajoutée au standard ECMAScript de la 5e édition. Y a-t-il d'autres fonctionnalités que vous souhaitez utiliser, ou peut-être même utiliser maintenant? Allons-y dans les commentaires!
