函数调用模式跟函数的定义方式有关。有名函数的调用方法是：在需要执行函数的地方直接使用“函数名(参数列表）”的形式。相比于函数定义时的参数没有具体值，函数调用时的参数具有具体的值，因而称函数调用的参数为实参。实参在内存中分配了对应的空间。
此时，函数调用的基本语法如下：
函数名([实参列表]);
实参列表可缺省。调用函数时，实参列表将会对应地传给参数列表，实参缺省时，将会传 undefined 值给对应虚参。
当把函数表达式变量看成是匿名函数的函数名时，函数表达式定义的匿名函数和有名函数的调用方法完全一样，在此不再赘述。而事件注册方式定义的匿名函数则会在绑定的事件触发时调用执行。如果绑定的事件永远不触发，则该匿名函数将永远不会被调用。
有名函数的调用语句可以在脚本程序中不同的地方重复出现。在函数执行前，会把函数调用语句中的实参传给虚参。实参列表可以包含任意类型的数据，实参个数和虚参个数可以相同，也可以不同：
- 如果参数个数相同，实参会对应传给虚参，即把实参赋值给虚参（变量）；
- 如果实参个数少于虚参个数，实参首先按顺序一一对应传给虚参，没有实参对应的虚参，将会对应传 undefined 值；
- 如果实参个数多于虚参个数，则多余的实参无效。
【例 1】函数调用及传参示例。
<script>
alert(getMax(3,7));//在函数定义的前面调用函数
function getMax(a,b){//定义函数
if(a > b){
return a;
}else{
return b;
}
}
//alert(getMax(3,7));//在函数定义的后面调用函数
</script>
上述代码中的第二行 getMax(3,7) 就是函数调用代码，()中的 3 和 7 就是两个实参，它们分别对应传给虚参 a 和 b，即 a=3、b=7。在程序解析完后，将执行第二条语句调用函数将7输出到警告对话框中。
【例 2】实参与虚参个数不一致时的有名函数的调用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>实参与虚参个数不一致时的有名函数的调用</title>
<script>
function add(a,b,c){//定义函数
return a + b + c;
}
//调用函数
console.log("实参为两个的结果=" + add(3,6)); //实参少于虚参
console.log("实参为三个的结果=" + add(3,6,7)); //实参和虚参个数一样
console.log("实参为四个的结果=" + add(3,6,7,9));//实参多于虚参
</script>
</head>
<body>
</body>
</html>
上述代码调用了 3 次 add 函数，第一次调用时传了 2 个实参，使虚参 a=3、b=6，虚参 c 由于没有实参传递，因而其值为 undefined，所以函数调用执行后返回的表达式是：3+6+undefined，因而最终结果为 NaN。第二次调用时传了 3 个实参，使虚参 a=3、b=6、c=7，因而函数调用执行后的结果返回 3+6+7=16。
第三次调用时传了 4 个参数，由于实参和虚参是一一对应传值的，所以前面的 3 个实参分别传给了虚参 a、b 和 c，最后一个实参由于没有虚参接受而被忽略了，所以函数调用执行的结果和第二次调用完全一样。程序在 Chrome 浏览器中的运行结果如图 1 所示。
图 1：实参与虚参个数不一致时的结果
【例 3】调用函数表达式定义的匿名函数。
<script>
//console.log("实参为三个的结果=" + add(3,6,7));//在这里调用，将出现类型错误
var add = function(a,b,c){//定义函数
return a + b + c;
}
//调用函数
console.log("实参为两个的结果=" + add(3,6));
console.log("实参为三个的结果=" + add(3,6,7));
console.log("实参为四个的结果=" + add(3,6,7,9));
</script>
上述代码将匿名函数定义赋给了变量 add，这样就可以通过 add 来调用匿名函数了。调用时需要注意的是，函数的调用语句必须放在函数定义语句的后面，否则将出错。例如，如果在上述代码的第二行中调用匿名函数，将出现图 2 所示的类型异常错误。
图 2：函数表达式在定义前调用时出现类型异常错误
而放在函数定义语句后面调用的 3 行代码都能正常运行，运行结果和例 2 的结果完全一样。函数表达式在定义前、后调用出现不同情况的原因就是因为函数表达式作用域不会提升，因而只有定义后才可以使用。
【例 4】事件注册函数的调用。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件注册函数的调用</title>
</head>
<body>
<form>
<select name="bg" id="bg">
<option value="red">红色</option>
<option value="blue">蓝色</option>
<option value="green">绿色</option>
</select>
<input type="button" id="btn" value="使用选择的颜色更改页面背景颜色"
</form>
<script>
var oBtn = document.getElementById("btn");
var oBg = document.getElementById("bg");
oBtn.onclick = function(){
document.body.style.backgroundColor = oBg.value;
};
</script>
</body>
</html>
上述代码将匿名函数绑定到按钮的单击事件上，这样，每次单击按钮时，就会调用一次匿名函数，使用从下拉列表中选择的颜色更改页面背景颜色。图 3 和图 4 所示就是分别从下拉列表中选择红色和绿色后再单击按钮后的结果。
图 3：使用红色更改页面背景
图 4：使用绿色更改页面背景
原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/23978.html