[javascript] portée du this

[Ter Rowan]

Plop
je suis sur que la réponse est toute bête mais mes quelques recherches non rien donné (je pourrais pousser plus loin mais c est un jour ou j ai pas le moral, si ca peut tomber tout cru c est top)

je m essaie à la programation objet en javascript, en croisant avec du jquery, et j'ai un souci avec la portée du this.toto

 

function av( av_select, av_container, av_components)

{

	this.select = av_select;

	this.container = av_container;

	this.components = av_components;

	

	var new_selector = $('<select>',{name : this.select+"_select"});

	$.each(this.components, function(key, component) 

	{

		alert(this.container);

mon alert(this.container) me renvoie undefined alors que le simple av_container me renvoie ce qu'il faut

bon je pense que le fait d être rentré dans une autre fonction me fait péter le this mais comment faire pour appeler les données de "av" ?

merci de votre aide

[Sephi-Chan]

En l'occurence, la méthode $.each donne une nouvelle valeur à this dans la fonction de callback (on dit alors qu'on bind la fonction avec une valeur donnée). Si je ne m'abuse, il s'agit ici de l'élément itéré (la même chose que component).

Si tu veux accéder à container, il faut faire quelque chose comme var me = this quelque part au dessus de l'appel à $.each. Ainsi, dans le callback tu pourras faire me.container.

[Ter Rowan]

oki, merci

je laisse ouvert, je vais surement revenir, avec les événements (et le this...)

a+

[srm]

$.each(this.components, function(key, component)
{
alert(this.container);
}).bind(this)

bind permet d'affecter une variable dans le scope.

[Maks]

C'est un classique du JS, t'as vraiment pas beaucoup cherché en effet ^^

Tu peux faire de la conservation de contexte comme Sephi et oxman l'ont proposé, je rajouterais _.bind et _.bindAll de la librairie underscore, qui est cross-browser et plus complet que Function::bind et peut être plus propre que me/that/self = this.

Aussi tu devrais respecter les conventions Javascript : UpperCamelCase pour le nom d'une classe, camelCase pour le reste (et non snake_case).

Enfin je déclarerais une classe façon coffeescript :

void function() {

  var Foo;



  Foo = (function() {



    function Foo() {}



    return Foo;



  })();

}.call(this);

[Ter Rowan]

$.each(this.components, function(key, component)
{
alert(this.container);
}).bind(this)

bind permet d'affecter une variable dans le scope.

autant appeler la variable (version Sephi) marche, autant (et j'aurais trouvé ça plus sympa) en mettant le bind là, j'ai une erreur dans la console :

TypeError: $.each(...).bind is not a function

C'est un classique du JS, t'as vraiment pas beaucoup cherché en effet ^^

ben pas longtemps non mais quand même, le plus frustrant, c est que j'avais vu des articles intéressants à ce sujet, mais incapable de les retrouver (et google pas au top aujourd'hui, ou bien c est moi, je suis tombé que sur des sujets plus cons que moi, et pourtant je suis au taquet, question conneries sur js)

Aussi tu devrais respecter les conventions Javascript : UpperCamelCase pour le nom d'une classe, camelCase pour le reste (et non snake_case).

oui c'était un peu pourri, je suis d'habitude en camel (les deux comme tu dis), la le snake était uniquement pour les tests

Enfin je déclarerais une classe façon coffeescript :

void function() {

  var Foo;



  Foo = (function() {



    function Foo() {}



    return Foo;



  })();

}.call(this);

pff... là ça me parle pas du tout comme syntaxe, je comprends rien, c'est fou comme javascript ne me parle pas beaucoup alors que c++ et compagnie me semblent "naturels" (en syntaxe, je suis pas une star loin de là)

sinon, j'essaie de partie de code existant pour m'imprégner

est ce que ce type de code vous semble propre ? (peu importe l'intéret de la fonctionnalité, c'est la manière de coder que je regarde)

[srm]

J'ai dit }).bind(this) pas })).bind(this)
Donc en gros c'est : }).bind(this)) si tu mets tout le code

[Maks]

Fais une recherche genre "understanding this in javascript" sur google

Dans le procédural il n'y a pas beaucoup de différence de syntaxe entre c++ et JS. Il faut juste connaître quelques points : conservation de contexte, closures, fonctionnement des prototypes...

J'ai pas regardé le code en détails mais mis à part le non emploi du triple égal, ce code m'a l'air correct. Mais bon ça n'est pas un code objet ^^

[Ter Rowan]

J'ai dit }).bind(this) pas })).bind(this)
Donc en gros c'est : }).bind(this)) si tu mets tout le code

tin j'avais pas de ( devant function

toi non plus d'ailleurs :p

effectivement ça marche comme cela... merci

$.each(this.components, (function(key, component)

{

alert(this.container);

}).bind(this));	

---

Fais une recherche genre "understanding this in javascript" sur google

Dans le procédural il n'y a pas beaucoup de différence de syntaxe entre c++ et JS. Il faut juste connaître quelques points : conservation de contexte, closures, fonctionnement des prototypes...

J'ai pas regardé le code en détails mais mis à part le non emploi du triple égal, ce code m'a l'air correct. Mais bon ça n'est pas un code objet ^^

oui dans le procédural c'est "facile", du moins j'y arrive, mais dès que je passe en objet, je pars dans les choux.

Maintenant rien ne m empêche de faire du procédural, si j'obtiens le résultat

merci pour la lecture

[Angelblade]

Bien que ce soit le comportement commun en javascript, jQuery ne propose par de passer le contexte en tant qu'argument

var myThis = window;



// en javascript natif tu peux passer un contexte

[0,1].forEach(function(){

     // this == myThis

}, myThis);

// comme indiqué plus haut avec jQuery tu dois écrire

$.each([0,1], function(){

     // this == myThis

}.bind(myThis));