2
votes

Javascript .bind () ne fonctionne pas dans cet exemple?

Voici le code:

var num = 0
window.onload = function() {
    var button = document.getElementById('button')
    button.onclick = function() {
        addNum.bind(this)
  }
}
function addNum() {
    num++
    this.textContent = `hit ${num} times`
}

addNum.apply (this) et addNum.call (this) fonctionnent tous les deux. Je suis confus. Quelqu'un peut-il aider? Merci beaucoup!

javascript bind

2 commentaires

ça marche. Mais bind () n'appelle pas de fonction, il renvoie une fonction liée que vous n'utilisez pas.

Call and apply appelle la fonction avec le contexte différent où bind renvoie une fonction à appeler. Vous pouvez appeler la fonction immédiatement dans JavaScript addNum.bind (this) ();

3 Réponses :

4
votes

bind crée une nouvelle fonction, avec une cette valeur liée (et éventuellement des arguments). Si vous voulez exécuter la fonction, appelez-la avec ():

button.onclick = function() {
  const someFn = () => console.log('foo');
}

Mais c'est assez idiot de faire quand . call accomplit la même chose, sans nécessiter un ():

button.onclick = function() {
  addNum.call(this);
}

Appeler .bind sans l'exécution de la fonction créée est similaire à:

button.onclick = function() {
  addNum.bind(this)();
}

Ici, vous avez créé une fonction nommée someFn , mais ne l'avez jamais appelée. À moins que vous appeliez la fonction résultante, elle restera inutilisée.

0 commentaires

0
votes

Bien que vous puissiez voir les effets de addNum.call () et addNum.apply () (la fonction addNum () est exécutée et cela change quelque chose sur la page), addNum.bind (this) n'a aucun effet secondaire.

Function.bind () n'appelle pas les fonctions utilisées pour l'invoquer, il crée et renvoie une autre fonction. Mais votre code ignore simplement la valeur renvoyée.

Votre code doit être le suivant:

window.onload = function() {
    var button = document.getElementById('button')
    var boundAddNum = addNum.bind(this);
    button.onclick = function() {
        boundAddNum();
  }
}

0 commentaires

0
votes

var num = 0;
$(function() {
var button = document.getElementById('button');
button.onclick = function() {
var addNumX  = addNum.bind(this);
addNumX();
}
var addNum = function() {
num++;
alert("OK");
this.textContent = 'hit ${num} times';
}
});

1 commentaires

Il est préférable de bien indenter le code et d'ajouter quelques explications.