关于javascript:在调用函数时到底可以传多少个参数

在创立一个函数并调用时能够传入一些参数或变量，不过函数到底能够有多少可用的参数呢？？

函数中的变量

以下通过一个例子来查看在调用函数时会有哪些变量和参数，在这里能够在浏览器的“无痕窗口”中间接运行这段代码（无痕窗口能防止浏览器插件影响运行）。

留神：这里仅仅针对传统函数，箭头函数的运行变量与传统函数不同，在此不做探讨。

var globalVariable = '全局变量';
var obj = {aFunction: function (para) {
    var localVariables = '局部变量';
    console.log(para, localVariables, arguments, this, globalVariable);
    // 蕴含传入的参数
  }
}
obj.aFunction('我是一段形容', 2, 3);

在运行时切换到 Source 页，并用 Chrome 的 JavaScript 调试模式来进行验证。

接下来进入到 aFunction 的函数中时，能够切换到 console.log(...) 一这行停下来，后果如下：

接下来会看到 Scope 示意以后 函数的作用域，作用域中可调用的变量也会按程序列出，在这里能够看到的变量和参数蕴含：

• para: 调用时传入的参数。
• arguments: 传统函数默认会带入的内部参数，这个参数来自于内部所传入的参数，就算函数自身没有传入也能够在这里取值，本文前方会有更具体的介绍。
• this: 函数运行时传入的变量，调用函数的形式将会影响它的指向，当前我会另外再写一篇文章进行介绍。
• localVariables: 局部变量，仅在此函数内的作用域才能够调用。
• Global: 全局变量

以上五个变量中，前两个就属于在调用时传入的变量，本文也会着重介绍它们的特点。

参数的性质

参数是由主调函数传入的变量，绝对于其它编程语言来说，JS 传递参数的限度更少，任何值都能够作为参数，也正是因为如此，首次接触或从其它语言转过来的会有许多不相熟的中央，以下是一些常见的问题：

参数名称是在函数申明时定义的

这是一个十分根底的问题，刚开始学编程的老手常常会把参数名搞混，误以为调用时传入的参数名就是在函数内应用的名称，比方上面的例子输入的值是什么？

A. 'a', 'b', 'c', undefined
B. 'd', 'c', 'b', 'a'

function callMore(d, c, b, a) {console.log(d, c, b, a);
}
var a = 'a';
var b = 'b';
var c = 'c';
callMore(a, b, c);

函数参数的名称是在定义函数时就曾经确定了的，如下图：参数取值是按程序带入，并且 不会受到调用时名称的影响。

简略的论断：

• 参数名称不会受到调用名的影响
• 如果遇到申明了却 没有传入 值的参数，那么是 undefined
• 如果未定义，但有 更多的参数传入 则须要应用其它形式取值

ES6 的参数默认值

如果曾经定义了参数，但却没有传入，那么函数内取到的值为 undefined，如果遇到这样的状况，代码就必须退出许多的容错机制，以防止 undefined 造的谬误。

ES6 中新增了“参数默认值”可事后给特定参数设置默认值，除了防止 undefined 所造成的谬误外，还能够减少应用函数的弹性。

上面的例子通过简略的语法就可加上“参数默认值”，当内部没有传入值时就会应用默认值。

function getMoney(money = 1000) {console.log(` 我有 ${ money}`);
}
getMoney(); // 不须要传入参数

arguments

如果无奈确认所传入参数的数量该怎么办？

这种状况在我的项目开发中比拟少见，但在开发框架、函数库时却很常见，后面所提到的“如果未定义，但有 更多的参数传入 则须要应用其它形式取值”的状况，就会用到上面将要介绍的 arguments 参数（ES6 中有更好的办法）。

function callMore(d, c, b, a) {
  // 留神：在此并没有用到定义的 d, c, b, a 参数
  console.log(arguments);
}
var a = 'a';
var b = 'b';
var c = 'c';
callMore(a, b, c);

所有的传统函数都有 arguments 参数（留神：箭头函数没有），不须要另外定义即可间接调用，且作用域仅限于本函数中。

arguments 的构造实质上是一个数组，其中会蕴含调用时 传入的所有值，在不确定传入参数的数量时，是一个很好用的办法。

ES6 残余参数

因为 arguments 有一些毛病，如：

• 构造相似数组，然而无奈间接应用大部分的数组办法
• 与曾经定义的参数内容重叠，无奈仅用于额定传入的参数

所以 ES6 新增了残余参数语法，可在定义参数时 间接传入残余的未定的参数，语法如下：

const callMore = (a, ...args) => {console.log(args);
}
var a = 'a';
var b = 'b';
var c = 'c';
callMore(a, b, c);

后果和后面的例子相似，但会是纯数组的形式展示，并且只会获取未定义的参数内容（a 会被跳过）。另外，箭头函数是能够应用残余参数的。

函数也可作为参数

函数除了能够传入纯值、数组和对象外，还能够把函数作为参数，使函数运行时更加丰盛而且——呃。。。简单。

上面的例子中，在调用 functionB 时，还能够传入另一个函数作为参数，这种伎俩叫回调函数（callback function）。

function functionB(fn) {fn('小明');
}
functionB(function(name) {console.log(name + '您好');
});

你本人能够试着看看其中的参数是如何传递的

JavaScript 可将函数作为参数传递这样的个性也称为“一级函数”（First-class Function），在当前的文章中我会更深刻的介绍。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

• 深刻了解 Shadow DOM v1
• 一步步教你用 WebVR 实现虚拟现实游戏
• 13 个帮你进步开发效率的古代 CSS 框架
• 疾速上手 BootstrapVue
• JavaScript 引擎是如何工作的？从调用栈到 Promise 你须要晓得的所有
• WebSocket 实战：在 Node 和 React 之间进行实时通信
• 对于 Git 的 20 个面试题
• 深刻解析 Node.js 的 console.log
• Node.js 到底是什么？
• 30 分钟用 Node.js 构建一个 API 服务器
• Javascript 的对象拷贝
• 程序员 30 岁前月薪达不到 30K，该何去何从
• 14 个最好的 JavaScript 数据可视化库
• 8 个给前端的顶级 VS Code 扩大插件
• Node.js 多线程齐全指南
• 把 HTML 转成 PDF 的 4 个计划及实现

• 更多文章 …