Apakah ada cara untuk memberikan parameter bernama dalam pemanggilan fungsi dalam JavaScript?

Saya menemukan fitur parameter bernama di C # cukup berguna dalam beberapa kasus.

calculateBMI(70, height: 175);

Apa yang dapat saya gunakan jika saya menginginkan ini dalam JavaScript?

Yang tidak saya inginkan adalah ini:

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
}

Pendekatan itu sudah saya gunakan. Apakah ada cara lain?

Saya baik-baik saja menggunakan perpustakaan apa pun untuk melakukan ini.

ES2015 dan yang lebih baru

Dalam ES2015, perusakan parameter dapat digunakan untuk mensimulasikan parameter bernama. Ini akan meminta penelepon untuk melewati objek, tetapi Anda dapat menghindari semua pemeriksaan di dalam fungsi jika Anda juga menggunakan parameter default:

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

Ada cara untuk mendekati apa yang Anda inginkan, tetapi didasarkan pada output Function.prototype.toString ^[ES5] , yang implementasinya tergantung pada tingkat tertentu, sehingga mungkin tidak kompatibel dengan browser.

Idenya adalah untuk mem-parsing nama parameter dari representasi string dari fungsi sehingga Anda dapat mengaitkan properti suatu objek dengan parameter yang sesuai.

Panggilan fungsi kemudian bisa terlihat seperti

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

di mana adan badalah argumen posisi dan argumen terakhir adalah objek dengan argumen bernama.

Sebagai contoh:

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);
        };
    };
}());

Yang akan Anda gunakan sebagai:

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

Ada beberapa kelemahan dari pendekatan ini (Anda telah diperingatkan!):

• Jika argumen terakhir adalah objek, itu diperlakukan sebagai "objek argumen bernama"
• Anda akan selalu mendapatkan argumen sebanyak yang Anda tetapkan dalam fungsi, tetapi beberapa dari mereka mungkin memiliki nilai undefined(yang berbeda dari tidak memiliki nilai sama sekali). Itu berarti Anda tidak dapat menggunakan arguments.lengthuntuk menguji berapa banyak argumen yang telah diajukan.

Alih-alih memiliki fungsi membuat wrapper, Anda juga bisa memiliki fungsi yang menerima fungsi dan berbagai nilai sebagai argumen, seperti

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

atau bahkan meluas Function.prototypesehingga Anda bisa melakukan:

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

Tidak - pendekatan objek adalah jawaban JavaScript untuk ini. Tidak ada masalah dengan ini asalkan fungsi Anda mengharapkan objek daripada params terpisah.

Masalah ini telah membuat saya kesal hewan peliharaan selama beberapa waktu. Saya seorang programmer berpengalaman dengan banyak bahasa di bawah ikat pinggang saya. Salah satu bahasa favorit saya yang senang saya gunakan adalah Python. Python mendukung parameter bernama tanpa tipuan .... Karena saya mulai menggunakan Python (beberapa waktu lalu) semuanya menjadi lebih mudah. Saya percaya bahwa setiap bahasa harus mendukung parameter bernama, tetapi itu tidak terjadi.

Banyak orang mengatakan untuk hanya menggunakan trik "Lulus objek" sehingga Anda telah menetapkan parameter.

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

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

Dan itu bekerja dengan baik, kecuali ..... ketika datang ke sebagian besar IDE di luar sana, banyak dari kita pengembang bergantung pada tipe / petunjuk petunjuk dalam IDE kami. Saya pribadi menggunakan PHP Storm (Bersama dengan JetBrains IDE lainnya seperti PyCharm untuk python dan AppCode untuk Objective C)

Dan masalah terbesar dengan menggunakan trik "Lulus objek" adalah bahwa ketika Anda memanggil fungsi, IDE memberi Anda petunjuk jenis tunggal dan hanya itu ... Bagaimana kita bisa tahu parameter dan tipe apa yang harus dimasukkan ke dalam objek arg1?

Jadi ... trik "Lewati sebuah objek" tidak berfungsi untuk saya ... Itu sebenarnya menyebabkan lebih banyak sakit kepala karena harus melihat setiap fungsi docblock sebelum saya tahu parameter apa yang diharapkan fungsi tersebut .... Tentu, itu bagus untuk ketika Anda mempertahankan kode yang ada, tetapi mengerikan untuk menulis kode baru.

Nah, ini adalah teknik yang saya gunakan .... Sekarang, mungkin ada beberapa masalah dengan itu, dan beberapa pengembang mungkin mengatakan saya salah, dan saya memiliki pikiran terbuka mengenai hal-hal ini ... Saya selalu ingin melihat cara yang lebih baik untuk menyelesaikan tugas ... Jadi, jika ada masalah dengan teknik ini, maka komentar dipersilahkan.

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

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

Dengan cara ini, saya memiliki yang terbaik dari kedua dunia ... kode baru mudah untuk ditulis karena IDE saya memberi saya semua argumen argumen yang tepat ... Dan, sambil mempertahankan kode nanti, saya bisa melihat sekilas, tidak hanya nilai diteruskan ke fungsi, tetapi juga nama argumen. Satu-satunya overhead yang saya lihat adalah mendeklarasikan nama argumen Anda sebagai variabel lokal agar tidak mencemari namespace global. Tentu, ini sedikit mengetik ekstra, tetapi sepele dibandingkan dengan waktu yang diperlukan untuk mencari dokumen saat menulis kode baru atau mempertahankan kode yang ada.

Jika Anda ingin memperjelas masing-masing parameter, bukan hanya menelepon

someFunction(70, 115);

mengapa tidak melakukan yang berikut ini

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

tentu saja, ini merupakan baris kode tambahan, tetapi menang pada keterbacaan.

Cara lain adalah dengan menggunakan atribut dari objek yang sesuai, misalnya seperti:

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);

Tentu saja untuk contoh yang dibuat ini agak tidak berarti. Tetapi dalam kasus-kasus di mana fungsinya terlihat

do_something(some_connection_handle, some_context_parameter, some_value)

mungkin lebih bermanfaat. Itu juga dapat dikombinasikan dengan ide "parameterfy" untuk membuat objek seperti itu dari fungsi yang ada dengan cara yang umum. Itu untuk setiap parameter itu akan membuat anggota yang dapat mengevaluasi ke versi fungsi yang dievaluasi parsial.

Ide ini tentu saja terkait dengan Schonfinkeling alias Currying.

Ada cara lain. Jika Anda melewati objek dengan referensi, properti objek itu akan muncul di lingkup lokal fungsi. Saya tahu ini berfungsi untuk Safari (belum memeriksa peramban lain) dan saya tidak tahu apakah fitur ini memiliki nama, tetapi contoh di bawah ini menggambarkan penggunaannya.

Meskipun dalam praktiknya saya tidak berpikir bahwa ini menawarkan nilai fungsional di luar teknik yang sudah Anda gunakan, ini sedikit lebih bersih secara semantik. Dan itu masih membutuhkan melewati referensi objek atau objek literal.

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));

Mencoba Node-6.4.0 (process.versions.v8 = '5.0.71.60') dan Node Chakracore-v7.0.0-pre8 dan kemudian Chrome-52 (V8 = 5.2.361.49), saya perhatikan bahwa parameter bernama hampir diimplementasikan, tetapi urutan itu masih diutamakan. Saya tidak dapat menemukan apa yang dikatakan standar 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

Tapi pesanan diperlukan !! Apakah itu perilaku standar?

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

Fungsi panggilan fdengan parameter bernama dilewatkan sebagai objek

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

pada dasarnya memanggil komposisinya di f(...g(o))mana saya menggunakan sintaks spread dang merupakan "mengikat" peta yang menghubungkan nilai objek dengan posisi parameter mereka.

Peta pengikat justru merupakan bahan yang hilang, yang bisa direpresentasikan dengan susunan kuncinya:

// 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}))

Perhatikan tiga bahan yang dipisahkan: fungsi, objek dengan argumen bernama dan pengikatan. Decoupling ini memungkinkan banyak fleksibilitas untuk menggunakan konstruksi ini, di mana pengikatan dapat disesuaikan secara sewenang-wenang dalam definisi fungsi dan diperpanjang secara sewenang-wenang pada waktu pemanggilan fungsi.

Misalnya, Anda mungkin ingin menyingkat heightdan widthsebagai hdan wdi dalam definisi fungsi Anda, untuk membuatnya lebih pendek dan lebih bersih, sementara Anda masih ingin menyebutnya dengan nama lengkap untuk kejelasan:

// 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})

Fleksibilitas ini juga lebih berguna untuk pemrograman fungsional, di mana fungsi dapat diubah secara sewenang-wenang dengan nama param aslinya hilang.

Berasal dari Python, ini menyadap saya. Saya menulis pembungkus sederhana / Proxy untuk node yang akan menerima objek posisi dan kata kunci.

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

Berlawanan dengan apa yang umumnya diyakini, parameter bernama dapat diimplementasikan dalam JavaScript standar, old-school (hanya untuk parameter boolean) melalui konvensi pengkodean yang rapi dan sederhana, seperti yang ditunjukkan di bawah ini.

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

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

Peringatan:

• Urutan argumen harus dipertahankan - tetapi polanya masih berguna, karena memperjelas argumen aktual mana yang dimaksudkan untuk parameter formal mana tanpa harus memahami fungsi tanda tangan atau menggunakan IDE.

• Ini hanya berfungsi untuk boolean. Namun, saya yakin pola yang sama dapat dikembangkan untuk jenis lain menggunakan semantik jenis paksaan JavaScript.