如何不通过争论，仍然使功能的工作？

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

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

另一种选择是将单个对象与要定义的属性一起传递，例如

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

Answer 3

当你不传递任何参数，undefined值传递代替，所以只检查函数的参数是否已经通过与否：

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

所以不会穿lWidth，只需通过undefined作为其值

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

Answer 4

不能在JavaScript中使用“函数重载”，但这里是一个方式来实现你想要什么：

How to overload functions in javascript?

Answer 5

什么你想要的是部分评估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); 

这就是所谓专业化，是一个非常有用的模式。阅读更多关于它：A Neighborhood of Infinity: The Three Projections of Doctor Futamura