มีวิธีให้พารามิเตอร์ที่มีชื่อในการเรียกใช้ฟังก์ชันใน JavaScript หรือไม่

ฉันพบว่าคุณสมบัติพารามิเตอร์ที่มีชื่อใน C # ค่อนข้างมีประโยชน์ในบางกรณี

calculateBMI(70, height: 175);

ฉันจะใช้อะไรได้ถ้าฉันต้องการสิ่งนี้ใน JavaScript

สิ่งที่ฉันไม่ต้องการคือ:

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
}

วิธีการที่ฉันใช้ไปแล้ว มีวิธีอื่นอีกไหม?

ฉันโอเคที่จะใช้ห้องสมุดเพื่อทำสิ่งนี้

ES2015 และใหม่กว่า

ใน ES2015 การทำลายโครงสร้างพารามิเตอร์สามารถใช้เพื่อจำลองพารามิเตอร์ที่มีชื่อ มันจะต้องมีผู้โทรผ่านวัตถุ แต่คุณสามารถหลีกเลี่ยงการตรวจสอบทั้งหมดภายในฟังก์ชั่นถ้าคุณยังใช้พารามิเตอร์เริ่มต้น:

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

มีวิธีที่จะเข้าใกล้สิ่งที่คุณต้องการ แต่มันขึ้นอยู่กับเอาท์พุทของFunction.prototype.toString ^[ES5]ซึ่งเป็นการนำไปใช้งานขึ้นอยู่กับระดับดังนั้นมันอาจไม่เข้ากันข้ามเบราว์เซอร์

แนวคิดคือการแยกชื่อพารามิเตอร์จากการแสดงสตริงของฟังก์ชันเพื่อให้คุณสามารถเชื่อมโยงคุณสมบัติของวัตถุกับพารามิเตอร์ที่เกี่ยวข้อง

การเรียกใช้ฟังก์ชันอาจมีลักษณะเช่นนั้น

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

โดยที่aและbเป็นอาร์กิวเมนต์ตำแหน่งและอาร์กิวเมนต์สุดท้ายเป็นวัตถุที่มีอาร์กิวเมนต์ที่มีชื่อ

ตัวอย่างเช่น:

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

ซึ่งคุณจะใช้เป็น:

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 

การสาธิต

มีข้อเสียบางอย่างสำหรับวิธีการนี้ (คุณได้รับคำเตือน!):

• หากอาร์กิวเมนต์สุดท้ายเป็นวัตถุจะถือว่าเป็น "วัตถุอาร์กิวเมนต์ที่ระบุชื่อ"
• คุณจะได้รับอาร์กิวเมนต์มากที่สุดเท่าที่คุณกำหนดไว้ในฟังก์ชัน แต่บางข้ออาจมีค่าundefined(ซึ่งแตกต่างจากการไม่มีค่าเลย) นั่นหมายความว่าคุณไม่สามารถใช้arguments.lengthเพื่อทดสอบว่ามีการส่งผ่านอาร์กิวเมนต์จำนวนเท่าใด

แทนที่จะมีฟังก์ชั่นในการสร้างเสื้อคลุมคุณสามารถมีฟังก์ชั่นที่รับฟังก์ชั่นและค่าต่าง ๆ เป็นอาร์กิวเมนต์เช่น

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

หรือยืดออกFunction.prototypeเพื่อที่คุณจะได้ทำ:

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

ไม่ - วิธีการของวัตถุคือคำตอบของ JavaScript สำหรับสิ่งนี้ ไม่มีปัญหากับสิ่งนี้หากฟังก์ชั่นของคุณคาดว่าจะเป็นวัตถุแทนที่จะเป็นพารามิเตอร์แยกต่างหาก

ปัญหานี้ได้กลายเป็นสัตว์เลี้ยงที่โกรธแค้นของฉันมาระยะหนึ่งแล้ว ฉันเป็นโปรแกรมเมอร์ที่มีประสบการณ์หลายภาษาภายใต้การดูแลของฉัน หนึ่งในภาษาที่ฉันชอบที่ฉันมีความยินดีที่จะใช้คือ Python Python สนับสนุนพารามิเตอร์ที่กำหนดชื่อโดยไม่มีการใช้เล่ห์อุบายใด ๆ .... ตั้งแต่ฉันเริ่มใช้ Python (บางเวลาที่ผ่านมา) ทุกอย่างกลายเป็นง่ายขึ้น ฉันเชื่อว่าทุกภาษาควรสนับสนุนพารามิเตอร์ที่มีชื่อ แต่นั่นไม่ใช่กรณี

ผู้คนจำนวนมากพูดเพียงแค่ใช้เคล็ดลับ "ส่งต่อวัตถุ" เพื่อให้คุณได้ตั้งชื่อพารามิเตอร์

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

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

และมันใช้งานได้ดียกเว้น ..... เมื่อพูดถึง IDEs ส่วนใหญ่แล้วนักพัฒนาของเราจำนวนมากพึ่งพาคำแนะนำประเภท / อาร์กิวเมนต์ภายใน IDE ของเรา ฉันใช้ PHP Storm เป็นการส่วนตัว (พร้อมกับ JetBrains IDEs อื่น ๆ เช่น PyCharm สำหรับ python และ AppCode สำหรับ Objective C)

และปัญหาที่ใหญ่ที่สุดในการใช้เคล็ดลับ "ส่งผ่านวัตถุ" คือเมื่อคุณเรียกใช้ฟังก์ชัน IDE จะให้คำแนะนำประเภทเดียวและนั่นคือ ... เราจะทราบได้อย่างไรว่าพารามิเตอร์และประเภทใดควรเข้าสู่ วัตถุ arg1?

ดังนั้น ... เคล็ดลับ "ส่งต่อวัตถุ" ไม่เหมาะกับฉัน ... มันทำให้เกิดอาการปวดหัวมากขึ้นโดยไม่ต้องดูที่ docblock ของแต่ละฟังก์ชั่นก่อนที่ฉันจะรู้ว่าฟังก์ชันคาดหวังว่าพารามิเตอร์ใด เมื่อคุณรักษารหัสที่มีอยู่ แต่มันน่ากลัวสำหรับการเขียนรหัสใหม่

นี่เป็นเทคนิคที่ฉันใช้ .... ตอนนี้อาจมีปัญหาบางอย่างกับมันและนักพัฒนาบางคนอาจบอกฉันว่าฉันทำผิดและฉันมีใจที่เปิดกว้างเมื่อพูดถึงสิ่งเหล่านี้ ... ฉันยินดีที่จะมองหาวิธีที่ดีกว่าในการทำงานให้สำเร็จ ... ดังนั้นหากมีปัญหากับเทคนิคนี้ความคิดเห็นก็ยินดีต้อนรับ

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

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

ด้วยวิธีนี้ฉันมีสิ่งที่ดีที่สุดของทั้งสองโลก ... รหัสใหม่ง่ายต่อการเขียนเนื่องจาก IDE ของฉันให้คำแนะนำอาร์กิวเมนต์ที่เหมาะสมทั้งหมดแก่ฉัน ... และในขณะที่รักษารหัสไว้ในภายหลังฉันสามารถเห็นได้ทันทีไม่เพียง ค่าที่ส่งผ่านไปยังฟังก์ชั่น แต่ยังชื่อของอาร์กิวเมนต์ ค่าใช้จ่ายเพียงอย่างเดียวที่ฉันเห็นคือการประกาศชื่ออาร์กิวเมนต์ของคุณเป็นตัวแปรท้องถิ่นเพื่อไม่ให้เกิดมลภาวะต่อเนมสเปซส่วนกลาง แน่นอนว่ามันเป็นงานพิมพ์ที่พิเศษ แต่เล็กน้อยเมื่อเทียบกับเวลาที่ใช้ในการค้นหา docblock ในขณะที่เขียนรหัสใหม่หรือรักษารหัสที่มีอยู่

หากคุณต้องการให้ชัดเจนว่าแต่ละพารามิเตอร์คืออะไรแทนที่จะแค่เรียก

someFunction(70, 115);

ทำไมไม่ทำต่อไปนี้

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

แน่นอนว่ามันเป็นรหัสพิเศษ แต่สามารถอ่านได้

อีกวิธีหนึ่งคือการใช้คุณสมบัติของวัตถุที่เหมาะสมเช่นเช่น:

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

แน่นอนสำหรับตัวอย่างนี้มันค่อนข้างไร้ความหมาย แต่ในกรณีที่ฟังก์ชั่นมีหน้าตาเป็นอย่างไร

do_something(some_connection_handle, some_context_parameter, some_value)

มันอาจมีประโยชน์มากกว่า นอกจากนี้ยังสามารถใช้ร่วมกับแนวคิด "parameterfy" เพื่อสร้างวัตถุดังกล่าวจากฟังก์ชันที่มีอยู่ในวิธีทั่วไป นั่นคือสำหรับแต่ละพารามิเตอร์มันจะสร้างสมาชิกที่สามารถประเมินเป็นฟังก์ชันการประเมินรุ่นบางส่วน

ความคิดนี้แน่นอนว่าเกี่ยวข้องกับSchönfinkeling aka Currying

มีวิธีอื่น หากคุณกำลังส่งวัตถุโดยการอ้างอิงคุณสมบัติของวัตถุนั้นจะปรากฏในขอบเขตภายในของฟังก์ชัน ฉันรู้ว่าใช้งานได้กับ Safari (ยังไม่ได้ตรวจสอบเบราว์เซอร์อื่น) และฉันไม่รู้ว่าคุณลักษณะนี้มีชื่อหรือไม่ แต่ตัวอย่างด้านล่างแสดงให้เห็นถึงการใช้งาน

แม้ว่าในทางปฏิบัติฉันไม่คิดว่าสิ่งนี้จะมอบคุณค่าการทำงานใด ๆ ที่เกินกว่าเทคนิคที่คุณใช้อยู่ แต่ก็สะอาดกว่าความหมายเล็กน้อย และมันยังต้องผ่านการอ้างอิงวัตถุหรือวัตถุตามตัวอักษร

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

ลองใช้ Node-6.4.0 (process.versions.v8 = '5.0.71.60') และ Node Chakracore-v7.0.0-pre8 แล้ว Chrome-52 (V8 = 5.2.361.49) ฉันสังเกตว่าพารามิเตอร์ที่ตั้งชื่อนั้นเกือบจะแล้วดำเนินการแล้ว แต่คำสั่งนั้นยังคงมีความสำคัญกว่า ฉันไม่พบสิ่งที่มาตรฐาน 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

แต่ต้องสั่งซื้อ !! มันเป็นพฤติกรรมมาตรฐานหรือไม่?

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

ฟังก์ชั่นการโทรfด้วยพารามิเตอร์ที่ตั้งชื่อส่งผ่านเป็นวัตถุ

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

เป็นพื้นเรียกองค์ประกอบของf(...g(o))ที่ฉันใช้ไวยากรณ์การแพร่กระจายและgเป็นแผนที่ "ผูกพัน" เชื่อมต่อค่าวัตถุที่มีตำแหน่งพารามิเตอร์ของพวกเขา

แผนผังการโยงเป็นส่วนประกอบที่ขาดหายไปอย่างแม่นยำซึ่งสามารถแสดงได้ด้วยอาร์เรย์ของคีย์:

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

สังเกตส่วนผสมที่แยกออกได้สามอย่าง:ฟังก์ชันวัตถุที่มีอาร์กิวเมนต์ที่มีชื่อและการเชื่อมโยง การแยก decoupling นี้ช่วยให้มีความยืดหยุ่นมากในการใช้โครงสร้างนี้ซึ่งการผูกสามารถกำหนดเองโดยพลการในนิยามของฟังก์ชันและขยายโดยพลการในเวลาเรียกฟังก์ชัน

ตัวอย่างเช่นคุณอาจต้องการย่อheightและwidthตามhและwภายในนิยามฟังก์ชันของคุณเพื่อทำให้สั้นลงและสะอาดขึ้นในขณะที่คุณยังคงต้องการเรียกมันด้วยชื่อเต็มเพื่อความชัดเจน:

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

ความยืดหยุ่นนี้ยังมีประโยชน์มากขึ้นสำหรับการตั้งโปรแกรมการใช้งานซึ่งฟังก์ชั่นสามารถเปลี่ยนได้โดยพลการด้วยชื่อพารามิเตอร์ดั้งเดิมที่หายไป

มาจาก Python ทำให้ฉันรู้สึกแย่ ฉันเขียน wrapper / Proxy อย่างง่ายสำหรับโหนดที่จะยอมรับทั้งตำแหน่งและวัตถุคำหลัก

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

ตรงกันข้ามกับสิ่งที่เชื่อกันโดยทั่วไปพารามิเตอร์ที่มีชื่อสามารถนำไปใช้ในมาตรฐานจาวาสคริปต์โรงเรียนเก่า (สำหรับพารามิเตอร์บูลีนเท่านั้น) โดยใช้วิธีการเข้ารหัสที่เรียบง่ายและเรียบร้อยดังที่แสดงด้านล่าง

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

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

คำเตือน:

• การเรียงลำดับของอาร์กิวเมนต์ต้องได้รับการเก็บรักษาไว้ - แต่รูปแบบยังคงมีประโยชน์เนื่องจากมันทำให้เห็นได้ชัดว่าอาร์กิวเมนต์ที่แท้จริงนั้นมีความหมายสำหรับพารามิเตอร์ทางการใด ๆ โดยไม่ต้อง grep สำหรับฟังก์ชันลายเซ็นหรือใช้ IDE

• ใช้งานได้กับ booleans เท่านั้น อย่างไรก็ตามฉันแน่ใจว่ารูปแบบที่คล้ายกันนี้สามารถพัฒนาสำหรับประเภทอื่น ๆ ได้โดยใช้ความหมายประเภทบังคับเฉพาะของ JavaScript