4
votes

Appel d'une fonction sans réaffecter l'argument nommé

J'ai une fonction qui a des arguments nommés.

J'essaie d'appeler la même fonction à partir de différents événements sans écraser les valeurs des autres précédemment attribuées.

J'ai essayé de stocker les valeurs des boutons précédemment cliqués dans des variables mais cela ne fonctionne pas.

Y a-t-il un moyen d'appeler les fonctions et d'attribuer un seul argument à la fois sans écraser les autres?

<button onclick="mainFun({val1 : 'Caller 1'})">First Event</button>
<button onclick="mainFun({val2 : 'Caller 2'})">Second Event</button>
<button onclick="mainFun({val3 : 'Caller 3'})">Third Event</button>

function mainFun({
  val1,
  val2,
  val3
}) {
  var value1 = val1,
    value2 = val2,
    value3 = val3;
  // console.log(value1, value2, value3);
  console.log(val1, val2, val3);
}

Essayer de réaliser:

Lors du premier événement> Appelant 1 non défini non défini

Lors du deuxième événement> Appelant 1 Appelant 2 non défini

Lors du troisième événement> Appelant 1 Appelant 2 Appelant 3

Merci d'avance!

javascript function arguments parameter-passing

2 commentaires

L'implémentation de votre fonction devrait être significativement différente; il faudrait que ces valeurs persistent quelque part. Les paramètres sont en fait des variables locales d'une fonction, ils sont donc nouvellement créés à chaque appel de fonction.

Y a-t-il une question similaire sur la façon de conserver ces valeurs? @Pointy

3 Réponses :

5
votes

Vous pouvez stocker les valeurs en tant que propriété de la fonction.

<button onclick="work({ val1: 'Caller 1' })">First Event</button>
<button onclick="work({ val2: 'Caller 2' })">Second Event</button>
<button onclick="work({ val3: 'Caller 3' })">Third Event</button>

function mainFun(defaults = {}) {
    return function({ val1 = defaults.val1, val2 = defaults.val2, val3 = defaults.val3 }) {
        defaults.val1 = val1;
        defaults.val2 = val2;
        defaults.val3 = val3;

        console.log(val1, val2, val3);
    };
}

var work = mainFun();

Si vous n'aimez pas stocker les valeurs en tant que propriétés de la fonction, vous pouvez utiliser une fermeture et renvoyer une fonction pour le même groupe de cas d'utilisation.

<button onclick="mainFun({ val1: 'Caller 1' })">First Event</button>
<button onclick="mainFun({ val2: 'Caller 2' })">Second Event</button>
<button onclick="mainFun({ val3: 'Caller 3' })">Third Event</button>

function mainFun({ val1 = mainFun.val1, val2 = mainFun.val2, val3 = mainFun.val3 }) {
    mainFun.val1 = val1;
    mainFun.val2 = val2;
    mainFun.val3 = val3;

    console.log(val1, val2, val3);
}

3 commentaires

Pas ma question, juste par curiosité: comment / pourquoi ça marche? Chaque onclick ne crée-t-il pas une nouvelle instance de mainFunc? (modifier: cette question faisait référence à votre réponse avant la modification)

@Frank, non c'est toujours la même fonction. les valeurs sont stockées dans les propriétés de la fonction, car les sont des objets de première classe < / a>.

Exactement ce dont j'avais besoin, c'était d'éviter d'utiliser des variables à l'intérieur ou à l'extérieur de la portée de la fonction.

1
votes

Les variables

value1 , value2 et value3 sont locales à votre fonction mainFun . Ils sont récupérés après chaque exécution de mainFun .

Pour réaliser ce que vous voulez réaliser, vous devrez stocker les paramètres précédents quelque part.

Il existe de nombreuses possibilités:

L'une d'elles concerne les variables globales:

<button onclick="mainFun({val1 : 'Caller 1'})">First Event</button>
<button onclick="mainFun({val2 : 'Caller 2'})">Second Event</button>
<button onclick="mainFun({val3 : 'Caller 3'})">Third Event</button>

let value1, value2, value3;

function mainFun({
  val1,
  val2,
  val3
}) {
    value1 = val1 || value1;
    value2 = val2 || value2;
    value3 = val3 || value3;
   console.log(value1, value2, value3);
  //console.log(val1, val2, val3);
}

Une autre solution serait de les stocker en tant que propriétés des fonctions (comme l'a suggéré Nina Scholz)

0 commentaires

1
votes

Veuillez me corriger si je ne comprends pas bien votre question. Mais si vous souhaitez stocker les valeurs, vous devrez les déclarer en dehors de votre fonction. Actuellement, vos valeurs ne sont vivantes que dans votre fonction. Lorsque la fonction est appelée, elles seront recréées et une fois la fonction terminée, elles seront à nouveau supprimées.

Vous pouvez essayer de déclarer vos valeurs en dehors de votre fonction et empêcher le remplacement comme ceci:

if (value1 === undefined) {
   value1 = val1;
} else { // obviously not needed
   value1 = value1;
}

ce que la value1 || val1 dit essentiellement 'hé, si value1 a déjà une valeur, utilisez-la. Sinon, utilisez val1 . Agit de la même manière que value1 = value1! == undefined? val1: valeur1 ou plus simple:

var value1, value2, value3;
function mainFun({
  val1,
  val2,
  val3
}) {
   value1 = value1 || val1,
    value2 = value2 || val2,
    value3 = value3 || val3;
  console.log(value1, value2, value3);
}

1 commentaires

Merci! Et point valide mais essayait d'éviter complètement la var .