Javascript 'ce' comme paramètre

Je suis en train de copier la valeur de "DE" dans les champs "À" champs. Ma première tentative a été ceci:

function updateToField(toField,fromField)
{
    toField.value = fromField.value}
}

function verifyFromToFields()
{
var inputs = getElementsByTagName("input");
for (var j = 0; j < inputs.length; j++)
{
    if (inputs[j].name.indexOf('FROM') != -1 && if (inputs[j+1].name.indexOf('TO') != -1)
        {
            var fromField = inputs[j];
            var toField   = inputs[j+1];
            fromField.onchange = function(){updateToField(toField,fromField)};
        }
}

Le site a plusieurs DE paires, et cela ne semble pas fonctionner pour la dernière paire dans les "entrées" de la matrice.

Puis j'ai essayé ceci:

function updateToField(toField,fromField)
{
    toField.value = fromField.value}
}

function verifyFromToFields()
{
var inputs = getElementsByTagName("input");
for (var j = 0; j < inputs.length; j++)
{
    if (inputs[j].name.indexOf('FROM') != -1 && if (inputs[j+1].name.indexOf('TO') != -1)
        {
            var fromField = inputs[j];
            var toField   = inputs[j+1];
            fromField.onchange = function(){updateToField(toField,this)};
        }
 }

Avec ce, lorsque l'un quelconque DU champ de la page est modifié, il est copié dans le dernier champ dans la page. Je pense que c'est l'une de ces questions que j'ai lu sur des paramètres comme la valeur de référence ou, mais je ne peux pas le comprendre.
Aussi c'est une version TRÈS simplifiée du code, j'ai fait remplir la liste entrées avec un getElementsByClass fonction et doit rechercher à travers childnodes.
Quelqu'un a une idée sur ce qui se passe?

  • De moins en moins à voir avec cela et de passer-by-reference: Plus à faire avec des fermetures.
  • que de bons conseils, mais, par pure chance, fermetures (et pas cela) sont exactement ce qui est le vissage de lui maintenant!
  • c'est ce que je disais. 🙂
  • J'ai complètement mal compris ce que tu veux dire: je pensais que vous étiez ce qui suggère qu'il devrait utiliser des fermetures au lieu de this, qui, je pense, est de bon conseil, bien qu'ici, il aurait fait qu'empirer les choses au lieu de s'améliorer.
  • Si il y avait une façon saine de joindre la relation entre les champs ($(fromfield).data("tofield", tofield)) sans l'aide de jQuery, à l'aide de this deviendra simple.
InformationsquelleAutor varrtto | 2013-01-23
  1. 1

    Fermeture, je ne pense pas que cela signifie que vous pensez qu'il signifie.

    Cette ligne ici:

         fromField.onchange = function(){updateToField(toField,this)};

    signifie "attribuer à onchange une fonction qui attribue le contenu de ce champs à ce que toField est au moment de le changer!

    Puisque vous n'avez qu'une seule variable toField tous les champs modifiables sera affecté.

    Ce serait le travail:

    var setOnChange = function(fromField, toField) {    
   fromField.onchange = function(){updateToField(toField,this)};
};

for (var j = 0; j < inputs.length; j++)
{
    if (inputs[j].name.indexOf('FROM') != -1 && if (inputs[j+1].name.indexOf('TO') != -1)
        {
            setOnChange(inputs[j], inputs[j+1]);
        }
 }

    MODIFIER: Isaac peut-être une meilleure explication du problème (bien que je n'aime pas vraiment sa solution).

    • Merci! Vous êtes un génie!
    • Et vous, @varrtto, sont un excellent juge de caractère.
    InformationsquelleAutor Malvolio
  2. 1

    C'est parce que de la façon dont les fermetures de travail. Lorsque vous affectez la onchange fonction vous créez (pour chaque boucle) une nouvelle fonction anonyme qui appelle updateToField, mais la valeur de la toField et this paramètres (ou tout autre vous êtes de passage) ne sont pas lier le "en cours" de la boucle, au lieu que les paramètres sont liés à la dernière valeur de la boucle (c'est pourquoi est seulement en travaillant avec votre dernier "À").

    Au lieu d'attribuer une nouvelle fonction à onchange bien essayer d'appeler le Function.bind si vous êtes en cours d'exécution dans un environnement qui a qui ou écrivez-en un si vous n'en avez pas.

    Voici la documentation de bind

    De sorte que vous pouvez aller comme ceci:

    fromField.onchange = updateToField.bind(this, fromField, toField);

    Ou vous pouvez utiliser l'autre approche qui Malvolio écrit.

    • ce que vous avez dit au sujet d'être liée à la valeur actuelle est vrai à propos de toField mais il n'est pas vrai sur this. this n'est jamais lexicalement étendue, il est toujours (efficacement) locale à la fonction.
    • oui, vous avez tout à fait raison, mais les paramètres fromField et toField sont "liées" à une nouvelle fonction, et il n'utilise que des paramètres.
    • le passé-participe de bind est lié. toField est la seule variable liée; this ne peut pas être lié et fromField arrive de ne pas être lié dans ce cas.
    • et que dire de updateToField.bind(null, fromField, toField);? pourquoi n'est pas fromField lié? PS: désolé pour mon (mauvais) anglais, je ne suis pas un anglais personne qui parle.
    • Dans la version originale du code, fromField n'est pas utilisé dans la fermeture; au lieu de cela this est utilisé (ce qui à changer de temps est égale à ce fromField était à déclarer en temps). Les variables ne sont pas liés.
    InformationsquelleAutor Lucas Gabriel Sánchez
  3. 1

    Le problème a à voir avec la portée. Ce qui se passe, c'est que vos fonctions (celles que vous avez attribué à onchange) sont en train de capturer les variables toField et fromField et leurs valeurs ne cessent de changer. Je sais on dirait que vous avez déclarés à chaque fois dans la boucle, mais ce n'est pas comment JS fonctionne; consécutifs voyages à travers une boucle de partager une portée, de sorte fromField est la même variable à chaque fois à travers et vous êtes simplement d'assigner une nouvelle valeur à chaque itération. Donc au final, l'ensemble de vos fonctions, reportez-vous à la même fromField variable. Et que fromField variable, naturellement, contient la dernière valeur affectée.

    Alors, quand on finit par appeler la totalité de ces fonctions, ils font tous la même chose, parce que tous leurs fromFields (et, par la même logique, toFields) sont à la même variable. Cela explique pourquoi seules les dernières entrées travaillé; ils sont ce fromField et toField contenues lorsque vous avez exécuté les fonctions.

    Vous pouvez résoudre ce problème par l'introduction d'un intermédiaire de la fonction, car les fonctions ne créer de nouvelles étendues. De cette façon, à chaque fois dans la boucle, vous obtenez de la marque de nouvelles variables.

    function updateToField(toField,fromField)
{
   toField.value = fromField.value;
}

function verifyFromToFields()
{
  var inputs = getElementsByTagName("input");
  for (var j = 0; j < inputs.length; j++)
  {
    function(){
      if (inputs[j].name.indexOf('FROM') != -1 && if (inputs[j+1].name.indexOf('TO') != -1)
      {
          var fromField = inputs[j];
          var toField   = inputs[j+1];
          fromField.onchange = function(){updateToField(toField,fromField)};
      }
   }();
}
    InformationsquelleAutor