如何不通過爭論仍然使功能工作？

Question

function drawLine(ctx, sX, sY, eX, eY, sRGB, fRGB, lWidth, capStyle)
{
    ctx.beginPath();
    ctx.moveTo(sX, sY);
    ctx.lineTo(eX, eY);
    ctx.lineWidth = lWidth||5;
    ctx.strokeStyle = 'rgb(49, 129, 48)';
    ctx.lineCap = 'round';
    ctx.stroke();
    ctx.closePath();
}

然后我想調用這樣的函數：

drawLine(ctx, 50, 50, 100, 100, someStrokeStyle, someFillStyle, someCapStyle);

如您所見，我跳過了lWidth參數。 我希望函數仍然有效，即使lWidth沒有作為參數傳遞。 我該怎么做？ Atm，它可能會認為someCapStyle是lwidth 。

Answer 1

當你有大量的參數傳遞給你的函數時，使用一個對象：

function foo({param1: val1, parma2: val2}) {}

在這種情況下，你不會依賴於參數的數量和它們的表示順序。

所以你可以重寫你的功能：

 function drawLine(drawObj)
{
    ctx.beginPath();
    ctx.moveTo(drawObj.sX, drawObj.sY);
    ctx.lineTo(drawObj.eX, drawObj.eY);
    ctx.lineWidth = drawObj.lWidth||5;
    ctx.strokeStyle = drawObj.sRGB;
    ctx.lineCap = drawObj.capStyle;
    ctx.stroke();
    ctx.closePath();
}

Answer 2

當你沒有傳遞任何參數時，會傳遞undefined值，所以只需檢查函數是否已經傳遞參數：

if(typeof argument == "undefined") 
{ 
   argument = "default value";
}

因此，為了不傳遞lWidth ，只需將undefined作為其值傳遞

PS最好的方法是使用單個參數args ，它將包含所有當前參數作為屬性的對象。

Answer 3

你想要的是部分評估drawLine函數，為lWidth分配一個常量值。 有一個名為Jeene的JavaScript庫就是這樣做的。 這是你如何使用它：

function drawLine(ctx, sX, sY, eX, eY, sRGB, fRGB, lWidth, capStyle) {
    ctx.beginPath();
    ctx.moveTo(sX, sY);
    ctx.lineTo(eX, eY);
    ctx.lineWidth = lWidth || 5;
    ctx.strokeStyle = "rgb(49, 129, 48)";
    ctx.lineCap = "round";
    ctx.stroke();
    ctx.closePath();
}

Function.prototype.specialize = net.higherorder.jeene.Jeene.make();

var drawLine2 = drawLine.specialize({
    lWidth: null // or whatever value you want
});

然后使用drawLine2 ，如下所示：

drawLine2(ctx, 50, 50, 100, 100, someStrokeStyle, someFillStyle, someCapStyle);

這稱為特化，是一種非常有用的模式。 閱讀更多相關信息： 無限鄰居：Futamura醫生的三個預測

Answer 4

您可以將可選參數放在參數列表的末尾。 這樣，如果你把它留下，其他參數不會受到影響。

另一種選擇是傳遞具有您想要定義的屬性的單個對象，例如

function drawLine(options) {
    options.ctx.beginPath();
    options.ctx.moveTo(options.sX, options.sY);
    options.ctx.lineTo(options.eX, options.eY);
    // etc.
 }

Answer 5

你不能在Javascript中使用“函數重載”，但這是一種實現你想要的方法：

如何在javascript中重載函數？