Esiste un modo per fornire parametri denominati in una chiamata di funzione in JavaScript?

Trovo la funzionalità dei parametri nominati in C # abbastanza utile in alcuni casi.

calculateBMI(70, height: 175);

Cosa posso usare se lo voglio in JavaScript?

Quello che non voglio è questo:

myFunction({ param1: 70, param2: 175 });

function myFunction(params){
  // Check if params is an object
  // Check if the parameters I need are non-null
  // Blah blah
}

Quell'approccio che ho già usato. C'è un altro modo?

Sto bene usando qualsiasi libreria per farlo.

ES2015 e versioni successive

In ES2015, la destrutturazione dei parametri può essere utilizzata per simulare parametri denominati. Richiederebbe al chiamante di passare un oggetto, ma è possibile evitare tutti i controlli all'interno della funzione se si utilizzano anche i parametri predefiniti:

myFunction({ param1 : 70, param2 : 175});

function myFunction({param1, param2}={}){
  // ...function body...
}

// Or with defaults, 
function myFunc({
  name = 'Default user',
  age = 'N/A'
}={}) {
  // ...function body...
}

ES5

Esiste un modo per avvicinarsi a ciò che si desidera, ma si basa sull'output di Function.prototype.toString ^[ES5] , che dipende in una certa misura dall'implementazione, quindi potrebbe non essere compatibile con più browser.

L'idea è di analizzare i nomi dei parametri dalla rappresentazione di stringa della funzione in modo da poter associare le proprietà di un oggetto al parametro corrispondente.

Potrebbe quindi apparire una chiamata di funzione

func(a, b, {someArg: ..., someOtherArg: ...});

dove ae bsono argomenti posizionali e l'ultimo argomento è un oggetto con argomenti denominati.

Per esempio:

var parameterfy = (function() {
    var pattern = /function[^(]*\(([^)]*)\)/;

    return function(func) {
        // fails horribly for parameterless functions ;)
        var args = func.toString().match(pattern)[1].split(/,\s*/);

        return function() {
            var named_params = arguments[arguments.length - 1];
            if (typeof named_params === 'object') {
                var params = [].slice.call(arguments, 0, -1);
                if (params.length < args.length) {
                    for (var i = params.length, l = args.length; i < l; i++) {
                        params.push(named_params[args[i]]);
                    }
                    return func.apply(this, params);
                }
            }
            return func.apply(null, arguments);
        };
    };
}());

Che useresti come:

var foo = parameterfy(function(a, b, c) {
    console.log('a is ' + a, ' | b is ' + b, ' | c is ' + c);     
});

foo(1, 2, 3); // a is 1  | b is 2  | c is 3
foo(1, {b:2, c:3}); // a is 1  | b is 2  | c is 3
foo(1, {c:3}); // a is 1  | b is undefined  | c is 3
foo({a: 1, c:3}); // a is 1  | b is undefined  | c is 3 

DEMO

Ci sono alcuni svantaggi di questo approccio (sei stato avvertito!):

• Se l'ultimo argomento è un oggetto, viene trattato come un "oggetto argomento denominato"
• Otterrai sempre quanti argomenti hai definito nella funzione, ma alcuni di essi potrebbero avere il valore undefined(che è diverso dal non avere alcun valore). Ciò significa che non è possibile utilizzare arguments.lengthper verificare quanti argomenti sono stati passati.

Invece di avere una funzione che crea il wrapper, potresti anche avere una funzione che accetta una funzione e vari valori come argomenti, come

call(func, a, b, {posArg: ... });

o addirittura estenderti in Function.prototypemodo da poter fare:

foo.execute(a, b, {posArg: ...});

No - l'approccio oggetto è la risposta di JavaScript a questo. Non vi è alcun problema con questo, a condizione che la funzione preveda un oggetto anziché parametri separati.

Questo problema è stato un mio peeve pet per qualche tempo. Sono un programmatore esperto con molte lingue al mio attivo. Una delle mie lingue preferite che ho avuto il piacere di usare è Python. Python supporta i parametri nominati senza alcun trucco ... Da quando ho iniziato a usare Python (qualche tempo fa) tutto è diventato più semplice. Credo che ogni lingua dovrebbe supportare parametri nominati, ma non è così.

Molte persone dicono di usare semplicemente il trucco "Passa un oggetto" in modo da avere dei parametri nominati.

/**
 * My Function
 *
 * @param {Object} arg1 Named arguments
 */
function myFunc(arg1) { }

myFunc({ param1 : 70, param2 : 175});

E funziona benissimo, tranne ..... quando si tratta della maggior parte degli IDE là fuori, molti di noi sviluppatori fanno affidamento su suggerimenti di tipo / argomento all'interno del nostro IDE. Uso personalmente PHP Storm (insieme ad altri IDE JetBrains come PyCharm per python e AppCode per Objective C)

E il problema più grande con l'utilizzo del trucco "Passa un oggetto" è che quando chiami la funzione, l'IDE ti dà un singolo suggerimento di tipo e basta ... Come dovremmo sapere quali parametri e tipi dovrebbero andare nel oggetto arg1?

Quindi ... il trucco "Passa un oggetto" non funziona per me ... In realtà provoca più mal di testa nel dover guardare il blocco documenti di ogni funzione prima di sapere quali parametri si aspetta la funzione .... Certo, è ottimo per quando stai mantenendo il codice esistente, ma è orribile per scrivere nuovo codice.

Bene, questa è la tecnica che uso .... Ora, potrebbero esserci dei problemi con esso, e alcuni sviluppatori potrebbero dirmi che sto sbagliando, e ho una mente aperta quando si tratta di queste cose ... Sono sempre disposto a cercare modi migliori per eseguire un'attività ... Quindi, se c'è un problema con questa tecnica, allora i commenti sono benvenuti.

/**
 * My Function
 *
 * @param {string} arg1 Argument 1
 * @param {string} arg2 Argument 2
 */
function myFunc(arg1, arg2) { }

var arg1, arg2;
myFunc(arg1='Param1', arg2='Param2');

In questo modo, ho il meglio di entrambi i mondi ... il nuovo codice è facile da scrivere poiché il mio IDE mi dà tutti i suggerimenti sull'argomento corretto ... E, mantenendo il codice in seguito, posso vedere a colpo d'occhio, non solo il valore passato alla funzione, ma anche il nome dell'argomento. L'unico sovraccarico che vedo è dichiarare i nomi dei tuoi argomenti come variabili locali per evitare di inquinare lo spazio dei nomi globale. Certo, è un po 'di digitazione extra, ma banale rispetto al tempo impiegato per cercare i blocchi di documenti mentre si scrive nuovo codice o si mantiene il codice esistente.

Se vuoi chiarire quali sono ciascuno dei parametri, piuttosto che semplicemente chiamare

someFunction(70, 115);

perché non fare quanto segue

var width = 70, height = 115;
someFunction(width, height);

certo, è una riga di codice aggiuntiva, ma vince sulla leggibilità.

Un altro modo sarebbe quello di utilizzare gli attributi di un oggetto adatto, ad esempio in questo modo:

function plus(a,b) { return a+b; };

Plus = { a: function(x) { return { b: function(y) { return plus(x,y) }}}, 
         b: function(y) { return { a: function(x) { return plus(x,y) }}}};

sum = Plus.a(3).b(5);

Naturalmente per questo esempio inventato è in qualche modo insignificante. Ma nei casi in cui appare la funzione

do_something(some_connection_handle, some_context_parameter, some_value)

potrebbe essere più utile. Potrebbe anche essere combinato con l'idea di "parametrizzazione" per creare un tale oggetto da una funzione esistente in modo generico. Cioè per ogni parametro creerebbe un membro che può valutare una versione valutata parzialmente della funzione.

Questa idea è ovviamente legata a Schönfinkeling aka Currying.

C'è un altro modo. Se si passa un oggetto per riferimento, le proprietà dell'oggetto verranno visualizzate nell'ambito locale della funzione. So che funziona per Safari (non ho controllato altri browser) e non so se questa funzione abbia un nome, ma l'esempio seguente ne illustra l'utilizzo.

Anche se in pratica non penso che questo offra alcun valore funzionale oltre la tecnica che stai già utilizzando, è un po 'più pulito semanticamente. E richiede ancora il passaggio di un riferimento a un oggetto o di un oggetto letterale.

function sum({ a:a, b:b}) {
    console.log(a+'+'+b);
    if(a==undefined) a=0;
    if(b==undefined) b=0;
    return (a+b);
}

// will work (returns 9 and 3 respectively)
console.log(sum({a:4,b:5}));
console.log(sum({a:3}));

// will not work (returns 0)
console.log(sum(4,5));
console.log(sum(4));

Provando Node-6.4.0 (process.versions.v8 = '5.0.71.60') e Node Chakracore-v7.0.0-pre8 e poi Chrome-52 (V8 = 5.2.361.49), ho notato che i parametri nominati sono quasi implementato, ma quell'ordine ha ancora la precedenza. Non riesco a trovare ciò che dice lo standard ECMA.

>function f(a=1, b=2){ console.log(`a=${a} + b=${b} = ${a+b}`) }

> f()
a=1 + b=2 = 3
> f(a=5)
a=5 + b=2 = 7
> f(a=7, b=10)
a=7 + b=10 = 17

Ma l'ordine è richiesto !! È il comportamento standard?

> f(b=10)
a=10 + b=2 = 12

Funzione fdi chiamata con parametri denominati passati come oggetto

o = {height: 1, width: 5, ...}

sta fondamentalmente chiamando la sua composizione f(...g(o))dove sto usando la sintassi di diffusione ed gè una mappa "vincolante" che collega i valori degli oggetti con le loro posizioni dei parametri.

La mappa vincolante è precisamente l'ingrediente mancante, che può essere rappresentato dalla matrice delle sue chiavi:

// map 'height' to the first and 'width' to the second param
binding = ['height', 'width']

// take binding and arg object and return aray of args
withNamed = (bnd, o) => bnd.map(param => o[param])

// call f with named args via binding
f(...withNamed(binding, {hight: 1, width: 5}))

Nota i tre ingredienti disaccoppiati: la funzione, l'oggetto con argomenti denominati e l'associazione. Questo disaccoppiamento consente molta flessibilità nell'uso di questo costrutto, in cui l'associazione può essere arbitrariamente personalizzata nella definizione della funzione e arbitrariamente estesa al momento della chiamata della funzione.

Ad esempio, potresti voler abbreviare heighte widthcome he wall'interno della definizione della tua funzione, per renderlo più breve e più pulito, mentre vuoi ancora chiamarlo con nomi completi per chiarezza:

// use short params
f = (h, w) => ...

// modify f to be called with named args
ff = o => f(...withNamed(['height', 'width'], o))

// now call with real more descriptive names
ff({height: 1, width: 5})

Questa flessibilità è anche più utile per la programmazione funzionale, in cui le funzioni possono essere arbitrariamente trasformate perdendo i nomi dei parametri originali.

Venendo da Python questo mi ha infastidito. Ho scritto un semplice wrapper / proxy per nodo che accetterà sia oggetti posizionali che parole chiave.

https://github.com/vinces1979/node-def/blob/master/README.md

Contrariamente a quanto si crede comunemente, i parametri con nome possono essere implementati in JavaScript standard di vecchia scuola (solo per parametri booleani) mediante una convenzione di codifica semplice e accurata, come mostrato di seguito.

function f(p1=true, p2=false) {
    ...
}

f(!!"p1"==false, !!"p2"==true); // call f(p1=false, p2=true)

Avvertenze:

• L'ordinamento degli argomenti deve essere preservato, ma il modello è ancora utile, poiché rende ovvio quale argomento reale è inteso per quale parametro formale senza dover grep per la firma della funzione o utilizzare un IDE.

• Questo funziona solo per i booleani. Tuttavia, sono sicuro che un modello simile potrebbe essere sviluppato per altri tipi utilizzando la semantica di coercizione del tipo univoco di JavaScript.