What is this ?

What is this ? (Qu’est ce que “this” ?)

Objet window Le contenu de toute pag Web est placé dans un objet window, tel qu’il est décrit dans http://www.w3schools.com/htmldom/dom_obj_window.asp Cet objet possède des attributs (décrits dans le lien ci-dessus) tels que document outerHeight name window (une référence à lui-même) . . . et des fonctions telles que setTimeout(...) alert(...)

Objet window On désigne normalement l’attribut d’un objet au moyen d’un point: objet.attribut Les instructions placées à l’intérieur d’un objet, ne pouvant pas connaître le nom de la variable dans laquelle elles sont contenues, elles ne peuvent donc pas utiliser le point comme ci-dessus. Par convention, on peut alors aussi écrire (comme dans Java ou C++) this.document this.outerHeight this.name this.setTimeout(...) this.alert(...) Puisqu’il y a dans window un attribut appelé window qui référence l’objet lui-même, on donc a l’équivalence this.window == this,

Objets HTML Le symbole this est en fait défini dans tous les objets HTML ou Javascript. Par exemple, dans l’élément input. Si l’on veut appeler la même fonction f( ) depuis plusieurs input, on peut le faire de la manière suivante: <inputid='a'onclick=“f(event, this)"/><inputid='b'onkeypress="f(event, this)"/> <input/>est un objet possédant les attributs id, onclick et de nombreux autres. A l’intérieur de l’élément input dont l’id vaut ‘a’, this est équivalent à $(‘a’)

Objet HTML En mettant this dans les arguments des appels placés dans les objets HTML, on peut reporter les tests et actions à faire sur l’objet dans la fonction commune. <scripttype="text/javascript">functionf(event,caller){alert(caller.id+""+caller.value)}</script></head><body><inputid='a'onclick=“f(event, this)"/><br><inputid='b'onkeypress="if (event.keyCode==13) f(event, this)"/></body> Par exemple, en testant caller.id dans la fonction x, on peut déterminer quel objet a été activé.

Première façon de construire un objet Javascript var monVin = null monVin = { ‘idv’:0, ‘region’:‘Valais’, ‘cepage’:‘chasselas‘, ‘annee’:2004 } On écrit monVin.idv pour accéder à la valeur placée dans cet attribut • Toutes les façons de construire présentées produisent exactement le même objet • Les fonctions contenues dans les objets seront vues dans une autre série de transparents • Les objets HTML sont des objets Javascript, on pourrait leur ajouter des attributs

Deuxième façon de construire un objet Javascript var vin = { } vin.idv = 0 vin.region = ‘Valais’ vin.cepage = ‘chasselas‘ vin.annee = 2004 var monVin monVin = { ‘idv’:12 } monVin.region = ‘Villette’

Autre façon de construire le même objet Javascript var monVin = [ ] monVin[‘idv’] = 0 monVin[‘region’] = ‘Valais’ monVin[‘cepage’] = ‘chasselas‘ monVin[‘annee’] = 2004 Pour accéder aux attributs de monVin on peut écrire soit monVin.idv soit monVin[‘idv’] mais on ne peut pas connaître la longueur de monVin: typeof monVin.length == ‘undefined’

Quatrième façon de construire un objet Javascript function Vin() { this.region = ‘Chablais’ this.cepage = ‘gamaret’ } vin1 = new Vin() Crée un objet équivalent à { ‘region’:‘Chablais’, ‘cepage’:‘gamaret’ } Vin est une fonction qui n’a de spécial que le fait qu’elle utilise this. Elle est appelée au moyen de new, pour créer l’objet, pas directement.

Appels d’une fonction function Vin() { this.id = 0 } var x1 = Vin // affecte la même définition de Vin à une autre variable // on pourrait maintenant écrire new x1() var x2 = Vin() // appelle la fonction, mais comme elle ne retourne rien // (elle n’a pas d’instruction return), x2 restera ‘undefined’ // si l’instruction ci-contre est exécutée dans window (la page), // this.idv=0 va créer le nouvel attribut dans window // si elle est appelée depuis onclick dans input, elle créera // logiquement le nouvel attribut dans input, c’est-à-dire // que son id sera changé var x3 = new Vin // création d’un objet selon les règles précédentes x3 = new Vin() // idem

Définition d’une fonction (normale ou pour créer un objet) Les deux formes de définitions ci-dessous sont absolument équivalentes. Vin est en fait une variable qui contient une définition de fonction. function Vin() { this.idv = 0 } Vin = function() { this.idv = 0; }

Constructeur d’objet avec arguments function Vin(r, c) { this.idv = 0 this.cepage = c this.region = r } v1 = new (‘Neuchâtel’, ‘chasselas’) v2 = new (‘Rhône’, ‘pinot noir’)

Parcours des attributs d’un objet var result = [ {'a':2, 'b':3} ] var key for ( key in result [0] ) { alert ( result [0] [key] ) } Les variables en rouge sont définies par l’utilisateur L’ordre de parcours est non-déterministe

What is this ?

What is this ?

Presentation Transcript