4 
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.

4

5 回答 5

3

当您有大量参数要传递给您的函数时，请使用对象：

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();
}
于 2013-03-19T11:09:32.767 回答
2

当您不传递任何参数时，undefined将传递值，因此只需在函数中检查参数是否已传递：

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

所以不通过lWidth，只是undefined作为它的价值通过

PS 最好的方法是使用单个参数args，它将是包含所有当前参数作为属性的对象。

于 2013-03-19T11:07:26.177 回答
2

您想要的是对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 博士的三个投影

于 2013-03-19T11:26:21.067 回答
1

您可以将可选参数放在参数列表的末尾。这样，如果您将其省略，其他参数将不会受到影响。

另一种选择是传递具有您要定义的属性的单个对象，例如

function drawLine(options) {
    options.ctx.beginPath();
    options.ctx.moveTo(options.sX, options.sY);
    options.ctx.lineTo(options.eX, options.eY);
    // etc.
 }
于 2013-03-19T11:07:04.203 回答
1

您不能在 Javascript 中使用“函数重载”，但这里有一种方法可以实现您想要的：

如何在javascript中重载函数？

于 2013-03-19T11:09:32.927 回答