JavaScript--函数

JavaScript函数

---

函数的定义：

　　在JavaScript中函数的定义共计有三种的方式

【1】函数的声明语句

使用JavaScript的函数关键字，后跟一组参数以及函数体

function funcname([arg1 [,arg2 [...,argn]]]){
    statement;
}

• function：定义函数的关键字。
• funcname：定义函数的名称。
• (arg)：函数的参数，可以有多个参数，当有多个参数的时候使用 ，隔开。
• {...}：之间的代码是函数体，可以包含若干语句，甚至可以没有任何语句。

注意：

• 定义函数的时候参数列表的（）以及包含函数体的{ }是必须的，即使在定义函数的时候没有参数。

function demo()//SyntaxError: Unexpected end of input
function demo(){};//不报错
while(true);//不报错

【2】函数表达式的定义，不太正规的将就是匿名的函数

var functionName = function([arg1 [,arg2 [...,argn]]]){
    statement;
} // 

var functionName = function funcName([arg1 [,arg2 [...,argn]]]){
    statement;
}

总结：

　　其中在第一种的情况下在这种方式下，是一个匿名函数 function(){...}，它没有函数名。但是，这个匿名函数赋值给了变量functionName，所以，通过变量functionName就可以调用该函数。

【3】Function构造函数

Function构造函数接收任意数量的参数，但最后一个参数始终都被看成是函数体，而前面的参数则枚举出了新函数的参数

var functionName = new Function(['arg1' [,'arg2' [...,'argn']]],'statement;');

注意：通过Function构造函数构造的也是一个匿名函数。通过该种方式没有办法指定函数名称。

　　以下的两种方式是一样的。但是需要注意的是从技术上讲，这是一个函数表达式。但，不推荐使用，因为这种语法会导致解析两次代码。第一次是解析常规javascript代码，第二次解析传入构造函数中的字符串，影响性能

<script type="text/javascript">
    var sum = Function('arg1','arg2','return arg1 + arg2;')
    demo = sum(1,2)
    alert(demo)
    // 等价于
    var sum = function(num1,num2){
        return num1 + num2
    }
    document.write(sum(1,3))

</script>

函数的返回值：

函数中的return语句用来返回函数调用后的返回值

return语句只能出现在函数体内，如果不是会报语法错误

<script type="text/javascript">
    return 2; //Uncaught SyntaxError: Illegal return statement
</script>

如果没有return语句，则函数调用仅仅依次执行函数体内的每一条语句直到函数结束，最后返回调用程序。这种情况下，调用表达式的结果是undefined

<script type="text/javascript">
    function demo(){
        document.write('函数的调用')
    };
    console.log(demo);
    // 返回的值返回的是整个函数的结构和函数体：
    // ƒ demo(){
    //     document.write('函数的调用')
    // }
    console.log(demo());//undefined
</script>

关于return语句我们需要特别注意的地方：

JavaScript引擎有一个在行末自动添加分号的机制，这可能让你栽到return语句的一个大坑：

正常的情况下我们会这样写

<script type="text/javascript">
    function foo(){
        var num = 1;
        var num1 = 2;
        return num + num1;
    };
    document.write(foo())// 3
</script>

函数中的return语句用来返回函数调用后的返回值，并且当执行到return的时候相当于函数执行结束，将不在执行下面的代码。所以下面的代码将返回undefined

<script type="text/javascript">
    function foo(){
        var num = 1;
        var num1 = 2;
        return // 由于JavaScript的这种机制会在末尾的时候自动的为我们加上 ； 变成return;
        num + num1;
    };
    document.write(foo())// undefined
</script>

函数的调用：

一次的调用然后将参数传入即可。

<script type="text/javascript">
    function demo(x){
        if(x>=0){
            return '这是一个正数';
        }else{
            return '这是一个负数';
        };
    };
    console.log(demo(5))//这是一个正数
    console.log(demo(-5))//这是一个负数
</script>

关于传参数，这可真的是一个神奇的地方，就是你想怎么传就怎么传。

<script type="text/javascript">
    function demo(x){ // 在定义函数之初的时候有参数x
        if(x>=0){
            return '这是一个正数';
        }else{
            return '这是一个负数';
        };
    };
    console.log(demo()) // 当我们不传入参数的时候
    console.log(demo(-5)) //当我们传入参数的时候
    console.log(demo(-5,6,4,6,'xxx'))//上面函数中只有一个参数，我们任意的传入多个参数的时候
</script>
输出：总结程序不会报错，都会有返回值
-函数的参数.html:15 这是一个负数
-函数的参数.html:16 这是一个负数
-函数的参数.html:17 这是一个负数

总结：JavaScript允许传入任意个参数而不影响调用，因此传入的参数比定义的参数多也没有问题，虽然函数内部并不需要这些参数，传入的参数比定义的少也没有问题。但是这样的机制并不是不代表我们在定义参数的时候可以不用定义参数

<script type="text/javascript">
    // function foo(){  // arguments.html:10 Uncaught ReferenceError: x is not defined
    function foo(x){  // arguments.html:10 Uncaught ReferenceError: y is not defined
    // function foo(x,y){ //程序不报错
        return x + y;
    }
    console.log(foo(1,2));//3
    console.log(foo(1,2,3));//3
</script>

函数调用arguments

arguments只在函数内部起作用，并且永远指向当前函数的调用者传入的所有参数。类型类似数组Array,但是她不是一个Array。但是访问单个参数的方式与访问数组元素的方式相同

<script type="text/javascript">
    function foo(x) {
        console.log('x = ' + x); // 10
        for (var i=0; i<arguments.length; i++) {
            console.log('arg ' + i + ' = ' + arguments[i]); // 10, 20, 30
        };
    };
    // foo();//x = undefined
    // foo(10);// 10
    foo(10,20);//
    // x = 10
    // arguments.html:11 arg 0 = 10
    // arguments.html:11 arg 1 = 20
    foo(10,11,12,13,14,15);
    //arg 0 = 10
    // arg 1 = 11
    // arg 2 = 12
    // arg 3 = 13
    // arg 4 = 14
    // arg 5 = 15
</script>