Ubuntu-fr

DonutMan75

[RESOLU] JS comportement de fonction.bind() ?

Bonjour à tous,
je suis le tuto de javascript.info et je bloque sur le chapitre dédié au binding.

Le code ci-dessous écrit 6 fois "John" dans la console du navigateur (ce qui est selon moi attendu) :

let user = {
  firstName: "John",
};

let func = function(){
  console.log(this.firstName);
  console.log(this.firstName);  
}

let f = func.bind(user);

f();
f();
f();

SOLUTION : le nombre d’occurrence d'un même message apparaît tout à droite, je ne l'avais pas vu... ^^'

En revanche, si je commente un seul console.log() alors il ne m'affiche plus qu'un seul "John" alors que je m'attendais à en voir 3...

let func = function(){
  console.log(this.firstName);
  //console.log(this.firstName);  
}

Je ne comprends pas ce comportement...
Avez-vous une explication ?

Merci par avance

Donut

Dernière modification par DonutMan75 (Le 08/06/2022, à 23:12)

DonutMan75

Re : [RESOLU] JS comportement de fonction.bind() ?

Plus curieux, si je rajoute des console.log() avant chaque appel de la fonction f, comme ceci :

let user = {
  firstName: "John",
};

let func = function(){
  //console.log(this.firstName);
  console.log(this.firstName);  
}

let f = func.bind(user);


console.log('un');
f();

console.log('deux');
f();

console.log('trois');
f();

Alors je récupère bien de nouveau mes trois John :

un
John
deux
John
trois
John

Curieux...
Il y a une subtilité qui m'échappe.

Merci par avance !

Donut

DonutMan75

Re : [RESOLU] JS comportement de fonction.bind() ?

Bon de toute évidence, le binding n'est pas en cause et ça semble être une spécificité de console.log() puisque même le simple code suivante ne m'affiche qu'un seul "John" :

let f = function(){
  console.log('John');
}

f();
f();
f();

Peut-être est-ce une spécificité du navigateur (en l’occurrence Firefox) pour éviter que les logs ne soient remplis du même message en boucle ?

En tout cas, la doc de console.log n'indique rien à ce sujet...

Je crois bien que c'est ça. Mais j'aimerais bien en avoir la confirmation.

Merci par avance si vous avez une explication

D.

LeoMajor

Re : [RESOLU] JS comportement de fonction.bind() ?

salut,
sur la console chromium,

d = function(){console.log('John');}; 
d(); d(); d();

 John
 John
 John
undefined

delete d; 
true

d(); 
 Uncaught ReferenceError: d is not defined

console.log  n'est pas toujours disponible selon le contexte applicatif. Remplacer par alert() ; équivalence  messagebox
d = function(){alert('John');};

soshy

Re : [RESOLU] JS comportement de fonction.bind() ?

Salut,

console.log  n'est pas toujours disponible selon le contexte applicatif.

A moins que tu ais un exemple qui prouve ce que tu dis, je suis à peu près certain que c'est faux. console.log est tout aussi disponible que alert

Je ne comprends pas ce comportement...
Avez-vous une explication ?
[...]
Alors je récupère bien de nouveau mes trois John
[...]
Curieux...
Il y a une subtilité qui m'échappe.

L'explication est simple, tu as mal regardé
Il y a bien 6 puis 3 john d'affiché. La subtilité, c'est que le navigateur essaye d'être malin. Il voit que tu affiches le même texte, et qu'en plus, c'est la même ligne qui déclenche l'affichage. Donc, si c'est même texte, depuis la même ligne qui s'affiche plusieurs fois de suite, il y a juste une bulle avec le nombre de répétition de l'occurrence. (En tout cas, ça fonctionne comme ça sur chrome/edge et il est probable que firefox ait un fonctionnement similaire)
Lorsque tu mets 2 fois le console.log , tu te retrouves avec le même texte, mais c'est jamais 2 fois le même numéro de ligne qui déclenche l'affichage. Donc pas de mutualisation, et donc il y a bien 6 lignes dans la console.

Tu verras que si tu fais :

let user = {
  firstName: "John",
};

let func = function(num){
  // console.log(this.firstName);
  console.log(this.firstName + num);  
}

let f = func.bind(user);

f(1);
f(2);
f(3);

Alors tu verras :
John1
John2
John3

Même si c'est la même ligne qui déclenche l'affichage, le texte à afficher n'est plus le même et donc la mutualisation des lignes du navigateur ne sera pas effective

Dernière modification par soshy (Le 08/06/2022, à 21:45)

DonutMan75

Re : [RESOLU] JS comportement de fonction.bind() ?

Oh effectivement, j'ai un petit (3) affiché tout à droite de l'écran !!
Je ne l'avais pas vu...

Merci beaucoup !!!

Bonne soirée

D.

LeoMajor

Re : [RESOLU] JS comportement de fonction.bind() ?

variante wrapper javascript webkit  gb.qt4.webkit   3.17.2  i.e  python webkit

Private wb As WebView
...
wb = New WebView(FMain) As "wb"
...
Dim wt As Variant = wb.Eval("b=\'bonjour\';")
 Print "wt1", wt
 wt = wb.Eval("function copy(n,str) { output=\'\'; for(i=0;i<n;i++) {output+=str} return output;}; copy(2,\'john \'); ") 
 Print "wt2", wt
 wt = wb.Eval("alert(copy(5,\'chocolat \')); copy=undefined;") 
 Print "wt3", "affiche 1 boîte dialogue avec n fois le mot choisi"
 wt = wb.Eval("const obj={hello: function h(){return \'bonjour\';}}; obj.hello(); ")
 Print "wt4", wt
 wt = wb.Eval("delete obj.hello; obj.hello(); copy(2,\'noexist\');")  
 Print "wt5", wt, "rien de s'affiche"

-> retourne

wt1     bonjour
wt2     john john 
wt3     affiche 1 boîte dialogue avec n fois le mot choisi
wt4     bonjour
wt5             rien de s'affiche