JavaScript js函数的概念以及语法结构

一、函数的概念：

1. 函数就是把一个或者多个功能的代码段通过函数的方法封装起来，对外提供一个简单的函数接口。可以理解为榨汁机的原理

二、函数的参数类型：

1. 实参：实际上的参数，可以用来传递数据给形参
2. 形参：形似上的参数，用来接收实参转递的参数

三、函数的语法结构和创建方法

创建方法：

1. 声明函数
2. 调用函数

语法结构：

function getSum(形参){
	//功能代码段
}
getSum(实参)；

函数不能自动执行；需要调用才能执行。
函数的执行：

• 直接执行：函数名()
• 行为调用：事件源.on事件类型 = 函数名
• 行为调用：事件源.on事件类型 = 无名函数
  实参和形参，一一对应，形参保存实参，类似于变量赋值

四、函数的类型：

1. 有名函数：正常函数，正常执行。
2. 无名函数：不能直接执行，只能作为值使用。

function(){}

4. 匿名函数：自动执行，

(function(){}) ();

五、函数的返回值：

关键词：
return :将函数值返回给函数,并终止当前函数

返回值的应用场景：

1. 用来处理数据的函数
2. 实现功能的函数

// 编写一个函数，计算任意三个数字的和
    function getHe(a, b, c) {
        return a + b + c;
    }
    document.write(getHe(1, 2, 3));

注：
一个函数只能执行一次return；一个return后面也只能跟一个数据

六、arguments的使用：

当不确定有多少参数进行传递的时候，可以使用arguments来获取，所有的函数都内置了一个arguments对象。arguments存储了所有的实参。
arguments的展示形式为一个伪数组
特点：

• 具有length属性；
• 按照索引的方式存储数据
• 但不具有数组的push、pop等方法

 // 编写一个函数，计算任意个任意数字的和
    var sum = 0;
    function getNum() {
        for (var i = 0; i < arguments.length; i++) {
            sum = sum + arguments[i];
        }
        console.log(arguments);
        return sum;
    }
    getNum(1, 2, 3, 4);
    console.log(sum);

运行结果：

当函数实参为固定值时，建议使用形参，不固定时候再使用arguments。

七、作用域

作用域就是变量在函数内部作用的范围或区域。有函数的地方就有作用域，作用域分为全局变量和局部变量：

  // 父子作用域的示例
    function fn(){
        var a = 10;
        function fun(){
            var b = 20;
            console.log(a);
            console.log(b);
        }
        console.log(a);
        console.log(b);
    }
    console.log(a);
    console.log(b);

js的编译和执行

提升

• var声明的变量会自动提前到作用域开始的位置，执行
  • 原位赋值
• function声明的函数，会整体提升到作用域开始的位置
  • 当前作用域只要定义了函数，无论位置，都能执行
• 当var遇到function
  • 赋值式创建函数
  • var的变量和function的函数名重名

    // 赋值式创建函数
    console.log(f);
    var f = function(){
        console.log("2")
    }
    console.log(f);

    // -----------------
    // var提升的更高，所以function生效
    
    console.log(b);
    
    function b(){
        console.log(3);
    }
    var b = "hello";

    console.log(b);

 ;(function(){
        console.log(a);         
        var a = "hello";
        console.log(a);         
        function a(){ 1 };
        console.log(a);         
        var a = function(){ 2 };
        console.log(a);         
    })();
    // =======以上代码等价于以下代码=======
    // ;(function(){
    //     var a;
    //     function a(){ 1 };
    //     console.log(a);         // f1
    //     a = "hello";
    //     console.log(a);         // hello
    //     console.log(a);         // hello
    //     a = function(){ 2 };
    //     console.log(a);         // f2
    // })();