函数声明

方法一：function关键字

function 函数名() {
  函数内容  

}

方法二：函数表达式（匿名函数）

var fun = function() {
     函数内容
}

函数的调用

1.function关键字声明的函数调用- - -函数名 + 小括号（），如果函数有形参，调用时小括号里面传实参

2.函数表达式声明的函数调用- - -变量名 + 小括号（），如果函数有形参，调用时小括号里面传实参

实参- - -函数声明时，括号内的参数
形参- - -函数调用时，括号内的参数

// 1.function关键字声明的函数
function getSum(num1, num2) {
     var sum = num1 + num2;
     console.log(num1 + '和' + num2 + '的和为：' + sum);
}
// 函数调用---函数名 + 小括号（），如果函数有形参，调用时小括号里面传实参
getSum(2, 8);


// 2.函数表达式声明的函数
var fun = function() {
     console.log('今天天气真真好！');
}
// 函数调用---变量名 + 小括号（），如果函数有形参，调用时小括号里面传实参
fun();

函数的作用域

es6之前，函数作用域分为：全局作用域、局部作用域

全局作用域- - -整个标签之中区域
局部作用域- - -函数里面的区域

注意：JavaScript没有块级作用域

{
  内容
}

如果{}块不是函数声明，只是{}，那么它之间内容，在括号外也可以访问，没有块级作用域

函数的变量

函数变量分为：全局变量、局部变量
全局变量- - -在标签之中，但是函数外，定义的变量，作用范围是全局作用域
局部变量- - -在函数内定义的变量，作用范围是局部作用域，函数外不可使用

注意：1.函数中没有声明，直接赋值的变量，也是全局变量，函数外可以使用 2.函数的形参也算是局部变量

作用域链

变量或者函数的调用，遵循- - -就近原则，一层一层往上找

预解析

JavaScript执行时会进行预解析，有- - -变量预解析、函数预解析

变量预解析- - -会将变量的声明提升到该变量所在作用域的最前面

<script>
        console.log(color);
        var color = 'pink';
</script>

相当于以下代码：

<script>
        var color;
        console.log(color);
        color = 'pink';
</script>

函数预解析- - -会将函数的声明提升到该函数所在作用域的最前面

<script>
        fun();
        function fun() {
            console.log('今天天气真真好！');
        }
</script>

相当于以下代码：

<script>
        function fun() {
            console.log('今天天气真真好！');
        }
        fun();
</script>

预解析示例1：

第一个，相当于- - -声明了变量，但是没有赋值的情况下，调用了变量，变量声明了但是没赋值时的得到结果undefined
第二个，函数声明会提到函数调用的前面，所以会输出结果
第三个，相当于声明了变量fu，然后就调用了函数fu，但此时还没有声明函数fu， 所以报错函数fu没有被定义

注意：如果是function关键字声明的函数，不管在函数声明前还是后调用函数都可以；如果是函数表达式声明的函数，需要在函数声明后调用，声明前调用会报错

预解析示例2：

相当于一下代码：

<script>
        var num;
        function fun() {
            var num;
            console.log(num);
            num = 20;
        }

        num = 10;
        fun();
</script>

打印的num得到结果- - -undefined

预解析示例3：

<script>
        // 案例
        f1();
        console.log(c);
        console.log(b);
        console.log(a);

        function f1() {
            var a = b = c = 9;
            // 相当于 var a = 9; b = 9; c = 9;  b 和 c 直接赋值，没有声明
            // 不是集体声明，集体声明的话：var a = 9, b = 9, c = 9;
            console.log(a);
            console.log(b);
            console.log(c);
        }

        // 相当于以下代码
        /* 
        function f1() {
            var a;
            a = b = c = 9;

            console.log(a);
            console.log(b);
            console.log(c);
        }
        f1();
        console.log(c);
        console.log(b);
        console.log(a); */
    </script>

打印结果：