#1 Le 05/06/2022, à 10:44
- 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, à 22:12)
Hors ligne
#2 Le 05/06/2022, à 10:49
- 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
Hors ligne
#3 Le 05/06/2022, à 11:51
- 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.
Hors ligne
#4 Le 07/06/2022, à 22:42
- 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');};
Hors ligne
#5 Le 08/06/2022, à 20:29
- 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, à 20:45)
Hors ligne
#6 Le 08/06/2022, à 22:11
- 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.
Hors ligne
#7 Le 11/06/2022, à 10:44
- 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
Hors ligne