JS函数功能及应用

一、函数的概念

函数：就是封闭了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。

• 函数可以带参数，也可以不带参数。
• 带参数的，函数声明中的为形参，形参无需声明定义，默认为undefined。
• 调用函数的实参，实参个数可以与形参个数不一致，但调用结果不可预期，建议相匹配。

二、函数的定义与调用

<script>
    // 函数定义
    function print( str){
      console.log(str);
    }
    // 函数调用
    print("我们都是中国人！");
</script>

三、return会中止函数，只能返回一个值

<script>
    //  return 会终止函数，
    function print( num1,num2){
       return(num1 + num2);
      console.log("这一句是不会被执行的，因为在return之后！");
    }
    console.log(print(1,3));

    //  return 只能返回多个值 时，只能返回最后一个值
    function fun1( num1,num2){
      return num1, num2;
    }
    console.log(fun1(1,4));   // 返回值为4

    // 通过返回数组，可以返回多个值
    function  fun2(num1,num2){
      return[num1 + num2, num1 - num2, num1 * num2, num1 / num2];
    }
    console.log(fun2(10,5));
 </script>

四、函数返回值的特殊情况

• 函数没有返回值时 ，返回值为undefined。
• return 不仅退出函数中的循环，也退出函数。

五、函数的arguments对象

每个函数内置了arguments对象，且只有函数有，其中存储了传递的所有实参。
展示形式是一个伪数组，并不是真正意义上的数组。
有了arguments,函数就可以写形参了。
1、具有数组的长度。
2、按照索引的方式进行存储的。
3、没有数组的一些方法pop(),push()等。
//可以按照数组的方式遍历arguments。
示例，求任意个数的最大值。

<script>
  // 利用arguments 求任意个数中的最大值
  function  num() {
    var max = arguments[0];
    for (var i = 1; i <= arguments.length;  i++) {
      if (arguments[i] > max) {
        max = arguments[i];
      }
    }
    return max;
  }
  console.log(num(12, 1, 56, 89, 99, 2, 1));  // 控制台输出 99
</script>

六、函数声明的两种方式命名方式和匿名方式

<script>
  // 1.函数声明的两种方式，一是命名函数的方式
  function fun1(){
    console.log('876');
  }
  fun1();
  
  // 2.函数声明的两种方式，二是函数表达式（匿名）的方式
  var fun = function (){  //fun是变量名，与声明变量差不式，保存的是函数
    console.log('998');
  }
  fun();  //调用时以变量名()的方式进行。
</script>

JavaScript作用域
就是代码名字（变量）在某个范围内起作用和效果，目前是为了提高程序的可靠性，更重要的是减少命名产冲突。
1）全局作用域:整体script标签，或者一个单独的js文件。
2）局部作用域:只在函数内部起作用，也称为函数作用域。
变量作用域：全局变量：在全局作用域下的变量。
局部作用域：在局部作用域下的变量。

从执行效率来看：
全局只有浏览器关闭时才会销毁，比较占用内存资源 。

js在es6的时候新增了块级作用域。
作用域链：内部函数访问外部函数的变量，采取的是链式查找的方式来决定取那个值，就近原则。

七、预解析

<script>
  // 问题1 不声明，定义，
  // console.log(num); //直接输出会报错： Uncaught ReferenceError: num is not defined
  // 问题2，坑1 先输出，后声明定义
  console.log(num1);  // 报：undefined
  var num1 = 10;
  //相当于以下代码
  var num1;
  console.log(num1);
  num1 = 10;
  // 问题3 函数先调用，后声明定义
  fn();  // 可以正常使用 输出“后声明”
  function fn(){
    console.log("后声明");
  }
  // 问题4 坑2，直接调用以声明变量方式声明的函数
  fun();  // Uncaught TypeError: fun is not a function
  var fun = function (){
    console.log("以变量方式声明函数");
  }
  // 相当于以下代码
  var fun;
  fun();
  fun = function (){
    console.log("以变量方式声明函数");
  }
  
</script>

1. 浏览器JS引擎先将代码预解析，再执行。

1. 会将所有的var，还有function提升到当前作用域的最前面。
2. 代码执行，按照代码书写的顺序从上往下执行。

2. 预解析分为 变量预解析（变更提升）和函数预解析（函数提升）
   1）变更提升：就是将所有变量声明提升到当前作用域最前面，不提升赋值操作。
   2）函数提升：就是把所有的函数声明提升到当前作用域的最前面，不调用函数

<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;
      //集体声明 var a = 9, b = 9, c = 9;
      console.log(c);
      console.log(b);
      console.log(a);
  }
</script>

输出结果如下：