自定义函数

1、自定义函数

函数：可以重复执行某个特定功能的代码段。
  1、函数的基础结构
    1) 直接使用function创建
      function 函数的名称(形参){
        函数体
      }

    function，关键词，区分大小写，必须是小写
    函数名称：自定义，要有意义，可以使用小驼峰命名法
    形参：其实就跟变量
    函数体：重复执行的有特定功能代码块

<script>
    function show1(){
        console.log(123)
    }
    show1();
    function show2(x=10,y=10){
        console.log(x+y);
    }
    show2();
</script>

    2) 使用Function构造函数构造一个函数 [ 基本上不会使用 ]；
      var 函数名称 = new Function('形参','函数体');
      var 函数名称 = new Function('函数体');

      前面可以有多个参数，但是不能没有函数体，所以最后一位一定会被认为是函数体

      var 函数名称 = new Function('形参','形参','函数体');

      var fun = new Function("console.log('123456')");
      fun();
      var fun = new Function("x=10","y=10","console.log(x+y)");
      fun();

    3) 使用表达式定义
      var 函数名称 = function(形参){
        函数体
      }
      var show = function(x=10,y=20){
        console.log(x+y);
      }
      show();

  2、特点
    1)函数创建完之后,不会自动执行,想要执行函数,需要调用
    2)直接在script中创建的函数,默认是window对象的方法
    3)直接输出函数名,其实就是函数体

  3、如何调用
    1) 函数名( ); [ 本质上是：函数体( ) ]
      showName();或者 window.showName();
    2)在html调用
      <div onclick="showName()">hello</div>
    3)赋值给变量
      var table = showName;
      table();
  关键词：var , console , log , document , write , function , name
  注意：凡是调用的时候，前面添加new的，我们就称之为是"构造函数"。

<script>
var arr = new Array();
var str = new String();
var obj = new Object()
var fun = new Function();
function showName(){
    document.write('<table border="1" width="500">')
    for(var i=1;i<=4;i++){
        document.write('<tr>');
        for(var j=1;j<=5;j++){
            document.write('<td>1</td>');
        }
        document.write('</tr>');
    }
    document.write('</table>');
}
showName()   // 调用函数
// window.showName();
</script>

输出结果：

  4、参数

            function show(形参){    

      函数体;

            }

            show(实参); //

            function show(a,b){

                console.log(a,b);

            }

            show(20,10);

            实参：就是实实在在的一个值,常量

            形参：就是一个变量,变量的值就是传递过来的实参

            形参和实参是一一对应的关系 

        形参和实参不对应:

            1) 实参少于形参，那么对应的形参的值是undefined

            2) 实参多于形参，多余的实参忽略不计

        形参有默认值:

            如果没有传递实参，则使用默认值;

            如果传递了实参，传递的是什么值，就使用什么值

            如果有形参没有带默认值，那么就把没有默认值的参数放在最前面；带默认值的放在最后面

       

<script>
        function show(a = 1,b = 2,c = 3){
            console.log(a+b+c);
        }
        show()      // 如果不传参数，则使用默认值，输出结果是 6
        show(6,6,6) // 如果传递参数，则 a = 6,b = 6,c = 6;输出结果是 18
        show(6,6)   // 仅传递两参数，依形参与实参一一对应，则 a = 6,b = 6,c = 3;输出结果是 15
</script>

        arguments 关键词

    可以获取所有实参的参数,格式是类似于数组的格式

<script>
            function sum(){
                console.log(arguments);
                // 输出结果是一个伪数组
                var all = 0;
                for(var i=0;i<arguments.length;i++){
                    console.log(arguments[i]);
                }
            }
            sum(12,14,13,15,11);
</script>

        注意:任何一种函数的调用方式,都可以传递参数

  5、返回值

    return 返回值(函数的返回值)

    return 关键词是可有可无的

        function 函数名(形参){

    函数体;

    return;

        }

        return特点:

            1) 函数内部的值 ( 局部变量 )，想要在函数外部进行 ( 全局变量 ) 使用，就可以使用 return

            2) 如果没有 return，那么 return 的返回值默认值 undefined

            3) return 可以返回值，但是只能返回一个；如果想要返回多个，可以使用数组进行返回

            4) 在函数中，只要看到 return，就表示函数的结束，后面的代码都不会执行

<script>
        function sum(a,b){
            var c = a + b;
            var d = a - b;
            console.log('return之前的代码');
            return [c,d];   // 函数返回多个值用数组
            // return 返回后，下面的代码不会执行
            console.log('return之后的代码');
        } 
        // 与调用不同，return 返回后需用输出方式
        console.log(sum(30,10));
</script>

输出结果：

  6、全局变量与局部变量

    全局变量：在函数外部定义的变量

    局部变量：在函数内部定义的变量

    所有的全局变量都可以在局部中使用

    局部变量只能在函数内部使用，局部变量生命周期，调用函数的时候变量被创建，调用完毕，局部变量就会被销毁

    全局变量想要在局部使用：可以

    局部变量想要在全局使用：

      1) return 返回值

      2) 函数内部定义变量的时候,没有var关键词,那么就是全局变量

        

     

  7、自执行函数

            全局变量的声明周期:

                页面运行的时候,全局变量就被创建,关闭页面的时候,就会被销毁

            局部变量的声明周期:

                函数运行的时候,局部变量被创建,函数执行完毕之后,就会被销毁

<script>
    (function() {  
        // 在这里定义变量和函数，不会污染全局作用域  
        var variable = "This is a variable";  
        function greet() {  
            console.log("Hello, world!");  
        }  
      
        // 调用greet函数  
        greet();  
    })();
</script>

    使用 - , ~ ,+ 也可以哦！

     -function show(){

       console.log(123456);

     }()

     ~function show(){

       console.log(123456);

     }()

     +function show(){

       console.log(123456);

     }()