JavaScript的函数解析（一）

JavaScript的函数

今天和大家说一下js中一个比较重要的内容，函数。

• JavaScript 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
• JavaScript 函数是被设计为执行特定任务的代码块。
• JavaScript 函数会在某代码调用它时被执行。
• JavaScript 函数由 function 声明。
• JavaScript 函数声明后需要被调用才会执行。

1.无参函数

    // 声明函数
    function func1(){
        console.log("这是一个无参函数");
    }
    // 调用函数   方法名+()
    func1();
    // 被事件驱动
    document.getElementById("btn").onclick=func1;

注意：函数声明后，被调用才能执行，一种是直接调用，另一种是被事件驱动。

2.传参函数

    // 声明函数
    function func2(x){//相当于声明变量为x
        console.log(x);
    }
    // 调用函数
    func2(1);//给变量x赋值为 1
    func2("hello");//给变量x赋值为 "hello"
    func2([1,2,3,4,5]);//给变量x赋值为 [1,2,3,4,5]

    function func3(x,y){
        console.log(x%y);//数据类型的强制转换
    }
    func3("1","2");

注意：在调用函数时，可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。可以发送任意多的参数，由逗号 (,) 分隔。

上面的内容将js函数按照有无参数进行分类，会分为无参函数和传参函数。接下来，我们可以按照js是否命名分为明明函数和匿名函数。

3.命名函数

    // function 关键字声明函数
    // 1.命名函数    
    function func1(){
        // 执行代码
        console.log("命名函数");
    }
    // 命名函数可以多次重复调用
    func1();
    func1();
    func1();

4.匿名函数

    // 2.匿名函数   
    // 使用事件驱动 匿名函数
    window.onclick=function(){
        // 执行代码
        console.log("匿名函数");
    }

    // 3.使用变量储存匿名函数
    var func2=function(){
        // 执行代码
        console.log("变量储存匿名函数");
    }
    // 这时可以像调用命名函数一样调用
    func2();
    func2();
    
    // 4.匿名函数传参
    var func3=function(x,y,z){
        console.log(x+y+z);
    }
    func3();//NaN   数字类型   not a number  
    console.log(typeof NaN);
    func3(1,2,3);//6
    func3("1",2,3);//123    "1"+2+3 

注意：匿名函数传参，只有当匿名函数使用变量储存时才可以传参。

5.自执行函数

    // 4.自执行函数   匿名函数
    (function(){
        // 执行代码
        consloe.log("自执行函数1");
    }())
    // 另一种形式
    (function(){
        // 执行代码
        consloe.log("自执行函数1");
    })()

自执行函数也是你匿名函数，只是函数在创建的同时就已经执行了。同时要知道，在 function 前面包着的()代表制操作符，只有有了操作符，浏览器在解析时才不会报错。

6.带返回值的参数

• 有时，我们会希望函数将值返回调用它的地方。
• 通过使用 return 语句就可以实现。
• 在使用 return 语句时，函数会停止执行，并返回指定的值。

    function func1(x,y){
        return x+y
    }
    var res=func1(1,2);
    console.log(res);//3


    function func2(){
        var m=10;
        return m;
    }
    console.log(func2());//10

    // return会使函数停止执行
    function func3(){
        console.log(1);
        return;
        console.log(2);//本行代码不执行
    }
    func3();//1