javascript定义函数的方法 javascript函数如何定义及其作用

JavaScript函数

什么是函数

MDN函数解释：函数是 JavaScript 中的基本组件之一。一个函数是 JavaScript过程（即一组执行任务或计算值的语句）。要使用一个函数，你必须将其定义在你希望调用它的作用域内。
菜鸟教程函数解释：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

从定义上概括：JavaScript函数就是一段被封装的 、具有某些功能的、可重复使用的 代码块。

函数封装：就是根据需求将具有某些功能的代码块放在一起，对外提供一个函数调用接口。
函数作用过程：输入参数-内部处理-返回结果

函数的声明和调用

函数的使用方法

声明函数 + 调用函数

（1）自定义函数（命名函数）

// 声明函数:
function 函数名() {
    函数体
    return 返回值;
}
// 调用函数:
函数名();

自定义一个getSum函数：

// 声明一个getSum函数，计算两个数值的和
function getSum(num1,num2) {
    var sum = 0;
    sum = num1 + num2;
    return sum;
}
//调用函数：
var res = getSum(1,2);
console.log(res);
// 控制台结果： 3

（2）利用函数表达式声明一个函数（匿名函数）：

// 声明函数
var 变量名 = function() {
                函数体
                return 返回值;
            }
// 调用函数：
变量名();

匿名函数使用简单举例：

var sum = function(num1,num2) {
    return num1+num2;
}
console.log(sum(3,4));
// 控制台结果为： 7

可以看出匿名函数这个结构，就是声明了一个变量 sum ，赋给这个变量 sum 的不是一个具体的数值或字符串，而是一个函数。赋给 sum

预解析 的过程。

（3）可以在一个函数内调用另一个函数

function getNum1() {
    console.log(333);
}
var Num2 = function() {
    console.log(111);
    getNum1();
}
Num2();

（4）小结

对于自定义函数的调用有3种方式：

• 使用函数名调用函数
• 在HTML中用超链接的方式来调用
• 在事件中与事件结合来调用函数

在本文中我只是对使用函数名调用函数举例，另外两种方法会在以后进一步学习中总结其使用方法。

行参实参

实参个数 ≤ 形参个数

function getSum(num1,num2,num3) {
    var sum = 0;      
    sum = num1 + num2 + num3;
    return sum; 
}          
console.log(getSum(1,2));
console.log(getSum(1,2,3));

形参可看做是一个没有声明的变量，变量没有接收值，在JavaScript中默认结果显示为 undefined

1+2+undefined 结果显示为 NaN (Not a Number)。控制台结果：

实参个数 ＞ 形参个数

参数传递时，会根据形参的个数接收，多余的实参则储存在arguments空间中，可以通过调用arguments对象调用其他实参。

function getSum(num1,num2,num3) {
    var sum = 0;      
    sum = num1 + num2 + num3;
    console.log('未参与计算的数为：'+arguments[3]);
    return sum; 
}          
console.log(getSum(1,2,3,4));

小结

形参和实参个数匹配总结：实参个数 ≥ 形参个数

利用arguments获取函数参数

什么是arguments

MDN解释：arguments 是一个对应于传递给函数的参数的类数组对象。arguments对象是所有（非箭头）函数中都可用的局部变量。你可以使用arguments对象在函数中引用函数的参数。此对象包含传递给函数的每个参数，第一个参数在索引 0 处。

定义概括：arguments 是一个伪数组 对象 ，数组里面放的是所传递的实参，每个函数都内置了一个arguments对象。

伪数组：属于object类型，具有数组length属性、按照索引方式存储。但不具有真正数组的一些内置方法。

function getSum() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++){
         sum += arguments[i];
    }
    console.log('arguments数据类型：'+typeof arguments );
    return sum;
}
console.log('计算结果：'+getSum(1,2,3,4));

扩展：伪数组和数组的区别

伪数组类型是object，数组类型是Arry。两者都可以用for in语句遍历，可以获取长度，可以用下标获取对应元素。伪数组不能使用数组方法（如增删改等），也不能改变长度。
伪数组转换为数组的方法：Array.prototype.slice.call(伪数组)，Array.from(伪数组)等方法。