JavaScript的函数解析（一）

冷不防 2023-03-13 13:15 1阅读 0赞

## 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 语句时，函数会停止执行，并返回指定的值。

**视频讲解链接：  
1.https://www.bilibili.com/video/BV1J54y1D753/**