skip to main | skip to sidebar
Code 18
Manuel du savoir-faire à l'usage des geeks et des curieux
RSS
  • Accueil
  • Le web au Québec
  • Liens
  • Twitter
  • Facebook
  • À propos

mardi 26 octobre 2010

Piège JavaScript no. 5

Publié par Infinite Loop, à 19 h 17 1 commentaire

Nous voilà enfin au dernier piège de cette série de 5 astuces JavaScript. Après, je pourrai décortiquer une par une les 14 questions du Quiz que j'ai si bien réussi (3/14).

Dans cet exemple, savez-vous ce qu'affichera alert(this) ?

function a(){
alert(this);
}
a.call(null);
Est-ce que this fait référence à la fonction elle-même ? À sa portée locale ? Pourquoi appeler call() sur la fonction a() si on peut tout simplement appeler a() directement ? Pour ma part, j'ignorais la réponse. Mieux valait tester.

Réponse : alert(this) affichera [object Window] dans Firefox (object DOMWindow dans Chrome et object dans IE8).

Celle-là, je n'étais pas certain de la comprendre. Surtout parce que je ne connaissais pas le mécanisme de la fonction call appliqué à une fonction. Regardons de plus près son comportement.
a(); // affiche object Window
a.call(); // encore object Window
a.call(null); // toujours object Window
Alors c'est quoi le piège ? La fonction a() ne prend pas d'argument en entrée. Par contre, l'appel à call() avec null comme argument laisse sous-entendre qu'on peut lui passer quelque chose. Mais à quoi ça peut servir ?
var x = 18;
a.call(x); // affiche 18

var obj = { label : 'Code 18', value : 18 }
a.call(obj); // affiche object Object
Donc à l'intérieur de la fonction, this prend en référence l'objet qu'on passe en paramètre à call().

Si j'ai une fonction b(x, y) qui accepte 2 arguments :
function b(x,y){
console.log(x);
console.log(y);
}

b(10, 20); // affichera 10 et 20
b.call(10, 20); // affichera 20 et undefined
Si on change la fonction b() pour imprimer la valeur de this :
function b(x,y){
console.log(this); // 10 {}, un objet sans propriétés ?
console.log(x); // 20
console.log(y); // undefined
}
En utilisant le mécanisme de call(), le premier paramètre sera la référence à l'objet à utiliser, les suivants seront les arguments de la fonction. Pour obtenir le même résultat, il aurait fallu faire l'appel ainsi :
b(10, 20);
b.call(null, 10, 20);
Un exemple simple sur la référence :
var obj = { label : 'Code', value : 18 }
c.call(obj, 10, 20, 30);

function c(x, y, z){
console.log(this.label); // Code
console.log(this.value); // 18
console.log(x); // 10
console.log(y); // 20
console.log(z); // 30
}
À l'intérieur de c(), this n'égalera pas object Window mais bien l'objet obj avec ses propriétés. Si la valeur est omise ou nulle, this sera par défaut le plus proche parent.
var z = {
x : function(){
console.log(this);
}
}

var obj = { label : 'Code 18', value : 18 };

z.x(); // Object {}, Object étant z
z.x.call(obj); // Object { label="Code 18", more...}
Maintenant qu'on comprend l'astuce, je ne veux pas que vous restiez sur votre appétit et je vous suggère une lecture complémentaire qui présente de bons exemples sur l'utilisation de call(). J'ai adapté cet exemple de l'article call and apply que je vous recommande fortement :
var Character1 = {
name: "Itchy"
}

var Character2 = {
name: "Scratchy"
};

var friendlyGreet = function(somebody) {
console.log("Bonjour " + somebody.name + ", je suis " + this.name);
};

friendlyGreet.call(Character1, Character2); // Bonjour Scratchy, je suis Itchy
friendlyGreet.call(Character2, Character1); // Bonjour Itchy, je suis Scratchy


Tags: JavaScript

1 réponse à "Piège JavaScript no. 5"

  1. Nico a dit...
    27 octobre 2010 à 04 h 22

    C'était très intéressant. Par contre, je n'ai pas eu la patience de lire tout l'article sur trephine.org.
    J'ai trouvé une explication assez claire ici : http://www.coursweb.ch/javascript/apply-call.html


Publier un commentaire

Message plus récent Messages plus anciens Accueil
S'abonner à : Publier des commentaires (Atom)
    Suivre @code18 sur Twitter

    Catégories

    • Apache (21)
    • Citations (167)
    • Club Vidéo (24)
    • Coffre à outils (56)
    • CSS (8)
    • Curiosités (117)
    • Design Pattern (2)
    • Drupal (8)
    • Easter Eggs (22)
    • Extensions Firefox (20)
    • GIMP (7)
    • Histoire (21)
    • HTML (32)
    • Humour (57)
    • Intégration (34)
    • iPod (12)
    • JavaScript (110)
    • Jeu de combat (6)
    • Le coin du geek (128)
    • Liens (12)
    • Linux (56)
    • Livres (78)
    • Lois et principes (46)
    • Marché des saveurs (26)
    • Mathématique (18)
    • Mobile (5)
    • Montréal (32)
    • Musique (112)
    • Pancartes et écriteaux (16)
    • Perl (8)
    • Pérou (1)
    • PHP (130)
    • PostgreSQL (44)
    • Programmation (105)
    • Saviez-vous que (55)
    • Sécurité (22)
    • SEO (5)
    • SQL Server (22)
    • Vieilles publicités (6)
    • Virtualisation (8)
    • Voyages (1)
    • Zend Framework (26)

    Divers

    Archives

    • ►  2015 (6)
      • ►  août 2015 (1)
      • ►  juillet 2015 (1)
      • ►  février 2015 (3)
      • ►  janvier 2015 (1)
    • ►  2014 (8)
      • ►  décembre 2014 (1)
      • ►  novembre 2014 (1)
      • ►  octobre 2014 (1)
      • ►  août 2014 (2)
      • ►  juillet 2014 (2)
      • ►  janvier 2014 (1)
    • ►  2013 (53)
      • ►  décembre 2013 (2)
      • ►  novembre 2013 (1)
      • ►  octobre 2013 (3)
      • ►  septembre 2013 (2)
      • ►  août 2013 (5)
      • ►  juillet 2013 (3)
      • ►  juin 2013 (5)
      • ►  mai 2013 (3)
      • ►  avril 2013 (7)
      • ►  mars 2013 (7)
      • ►  février 2013 (11)
      • ►  janvier 2013 (4)
    • ►  2012 (105)
      • ►  décembre 2012 (8)
      • ►  novembre 2012 (5)
      • ►  octobre 2012 (4)
      • ►  septembre 2012 (1)
      • ►  août 2012 (8)
      • ►  juillet 2012 (7)
      • ►  juin 2012 (7)
      • ►  mai 2012 (10)
      • ►  avril 2012 (13)
      • ►  mars 2012 (15)
      • ►  février 2012 (15)
      • ►  janvier 2012 (12)
    • ►  2011 (146)
      • ►  décembre 2011 (14)
      • ►  novembre 2011 (11)
      • ►  octobre 2011 (12)
      • ►  septembre 2011 (13)
      • ►  août 2011 (15)
      • ►  juillet 2011 (17)
      • ►  juin 2011 (18)
      • ►  mai 2011 (15)
      • ►  avril 2011 (9)
      • ►  mars 2011 (7)
      • ►  février 2011 (3)
      • ►  janvier 2011 (12)
    • ▼  2010 (398)
      • ►  décembre 2010 (29)
      • ►  novembre 2010 (28)
      • ▼  octobre 2010 (32)
        • On est tous des attention whores
        • Citation no. 105 sur le cannibalisme
        • Réseaux sans fil de mes voisins
        • Piège JavaScript no. 7
        • Piège JavaScript no. 6
        • Piège JavaScript no. 5
        • Le plus vieil homme du monde avait 174 ans
        • Détruire le web, un site à la fois
        • Citation no. 104 sur la vie
        • Parce que vous n'avez pas eu le temps de tout voir...
        • Piège JavaScript no. 4
        • Piège JavaScript no. 3
        • Piège JavaScript no. 2
        • Quelques pièges JavaScript
        • Citation no. 103 sur le déjeuner
        • Quand le heavy metal ne se prend pas au sérieux
        • 23 sites pour explorer le HTML5
        • Jouer à Snake sur un vidéo YouTube
        • Faire du son par programmation C++, partie 2
        • Le secret de l'inclinaison de la tour de Pise
        • Barre de progression HTML5
        • 3 façons de charger une librairie JavaScript popul...
        • Citation no. 102 sur les discussions
        • Composer de la musique par programmation avec C++
        • Outlook en mode sans échec qui ne répond pas
        • La tête du banquet de Salomé
        • La disparition de la lettre E
        • Paradis sur mesure
        • Éviter de perdre le contenu rédigé sur le web, rev...
        • Le stockage local HTML5 remplacera-t-il les cookies ?
        • Citation no. 101 sur les mets chinois
        • Où il est question de Bandcamp, Unwoman et d'une p...
      • ►  septembre 2010 (34)
      • ►  août 2010 (22)
      • ►  juillet 2010 (35)
      • ►  juin 2010 (42)
      • ►  mai 2010 (36)
      • ►  avril 2010 (37)
      • ►  mars 2010 (34)
      • ►  février 2010 (32)
      • ►  janvier 2010 (37)
    • ►  2009 (430)
      • ►  décembre 2009 (32)
      • ►  novembre 2009 (34)
      • ►  octobre 2009 (33)
      • ►  septembre 2009 (37)
      • ►  août 2009 (37)
      • ►  juillet 2009 (39)
      • ►  juin 2009 (38)
      • ►  mai 2009 (37)
      • ►  avril 2009 (35)
      • ►  mars 2009 (37)
      • ►  février 2009 (32)
      • ►  janvier 2009 (39)
    • ►  2008 (84)
      • ►  décembre 2008 (34)
      • ►  novembre 2008 (39)
      • ►  octobre 2008 (11)

    Abonnés

Copyright © All Rights Reserved. Code 18 | Converted into Blogger Templates by Theme Craft