Discussion :

[Sharcoux]

D'accord. Bon ben c'est parfait. Merci à tous !
pour la peine je vais vous mettre plein de bons points

[sekaijin]

les portée en javascript son à la fois simple et difficiles.

simple parce qu'il n'y a qu'une seule et unique règle
un objet est visible de tout contexte d'exécution descendant du contexte dans lequel il a été créé.


j'ai bien écrit objet que ce soit une variable un objet js une fonction la règle est toujours la même.

maintenant quelque complication.
lorsqu'on crée une variable dans une fonction sans utiliser le mot clef var
celle-ci est crée dans le contexte global.
si on utilise le mot clef var elle est crée dans le contexte d’exécution de la dite fonction.

si le code de cette fonction créé lui-même d'autre fonction (locales) les contextes d’exécution de ces fonctions étant fils du précédent la variable leur sera connue.

un détail d'importance.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
fn1 = function() {
  fn2 = function() {
  };
  var fn3 = function() {
  };
  function fn4() {
  }
}

en javascript on peut définir une fonction soit en

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

function fn  (){}

soir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fn = function (){}

les deux sont équivalente pour la définition mais pas pour la portée.
dans l'exemple ci dessus lors de l'exécution de fn1 les fonction fn2 fn3 et fn4 sont crées.
fn2 est un nom définit sans le mot clef var la fonction est donc globale.
fn3 l'est avec var c'est une fonction locale.
fn4 est toujours locale.

la référence this à un fonctionnement identique à celui que l'on trouve dans java. la seule différence avec java est qu'il n'est pas implicite en javascript.
donc this.toto est toujours différent de toto

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var a = {
  toto:45,
  show: function () {
    alert(this.toto); //ici this c'est l'objet a
  }
};

pour les développeur java la notion de fonction n'existe pas seule les méthodes pleuvent l'être.
en javascript une fonction est un objet this dans le corps de la fonction représente l'objet lui-même soit donc la fonction.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var fn = function() {
  this.toto =45; 
  alert(this.toto);
};
fn(); //ici dans le corps de la fonction this c'est l'objet fonction : fn
alert(fn.toto);

le piège est que si j'utilise fn comme constructeur d'objet alors this n'est plus la fonction mais l'objet construit.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var fn = function() {
  this.toto =45; 
  alert(this.toto);
};
var b = new fn(); //ici dans le corps de la fonction this c'est l'objet construit b
alert(b.toto);

les closures :
l'utilisation de corps de fonction pour isoler des espace d'objet se nome closure le plus souvent on utilise des fonctions anonymes

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fn() {...}

Le pb est que pour pouvoir invoquer une fonction il faut en avoir une référence (un non en général mais là elle est anonyme). On indique à l'interprète qu'on va utiliser le résultat de cette définition en le plaçant entre ()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(fn() {...})

ceci est une référence à la fonction anonyme définie dans les (). pour l'invoquer il suffit donc comme avec tout référence de faire un appel.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

(fn() {var a = 45; ...})()

ainsi le code entre {} est exécuté et les objets définit à l’intérieur sont détruit
dès qu'il n'existe plus de référence à ce bloc.


A+JYT

[Bovino]

Excellentes explications !

Mais à un détail près selon moi :

en javascript une fonction est un objet this dans le corps de la fonction représente l'objet lui-même soit donc la fonction.

Non, this représente toujours l'objet qui l'a appelé, donc, dans le cadre d'une fonction comme dans ton exemple, this représente l'objet window :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var fn = function() {
  this.toto =45; 
  alert(this);    // affiche [object Window]
};
fn(); //ici dans le corps de la fonction this c'est l'objet fonction : fn
alert(fn.toto+' - ' + toto);    // affiche undefined - 45 => toto a bien été défini pour l'objet window ;)

en revanche, si l'on se sert de la fonction comme constructeur, this représentera bien l'instance de l'objet puisque c'est elle qui a appelé le constructeur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var fn = function() {
  this.toto =45; 
  alert(this);    // différent selon l'appel
};
fn(); //ici dans le corps de la fonction this c'est l'objet fonction : fn
alert(fn.toto+' - ' + toto);
var inst = new fn();
alert(inst.toto);    // 45

[Sharcoux]

Merci Bovino et sekajin. C'était des super explications ! Hésitez pas à faire un tuto à partir de ce topic. Je suis sûr que ça peut aider bcp de monde, parce que ces subtilités constituent justement le point du javascript que je trouve le plus obscure et sur lequel ont ne trouve généralement que des informations confuses, partielles et même parfois carrément FAUSSES !

[sekaijin]

oui sorry pour window

je réfléchissais en pensant à js hors du navigateur

Meaculpa

A+JYT