详解JavaScript的函数

忘是亡心i 2024-05-06 21:24 72阅读 0赞

## 详解 JavaScript 的函数 ##

![e2c6aa3ef7f429][]

### 函数的语法格式 ###

创建函数/函数声明/函数定义

function 函数名(形参列表) {
         
    	函数体   
    	return 返回值; // return 语句可省略
    }

函数调用

> 函数名(实参列表) // 不考虑返回值  
> 返回值 = 函数名(实参列表) // 考虑返回值

示例代码

//定义的没有参数列表，也没有返回值的一个函数
    function hello() {
        
        console.log("hello")
    }
    //定义一个有参数列表，有返回值的一个函数
    function hello2(num, name) {
        
        console.log(num + " hello " + name)
        return 1;
    }
    //hello()
    let a = helllo()
    console.log(typeof(a))
    let b = hello2(1, "小明")
    console.log(typeof(b))

注意：

>  *  `let a = helllo()` // 该函数没有返回对应的数据，此时a的类型是`undefined`
>  *  在JS中，对一个函数不用去声明它的返回类型，它的返回值类型取决于它return的数据类型（这一点恰巧验证了JS是一个动态语言的特性）

运行结果

![image-20240302210841755][]

### 函数的参数个数 ###

在JS中调用一个函数的时候，它的实参和形参之间的个数可以不一样  
注：实际开发一般要求形参和实参个数要匹配

> 如果实参个数比形参个数少, 则此时多出来的形参值为 undefined；  
> 如果实参个数比形参个数多, 则多出的参数不参与函数运算；

示例代码

function hello2(num, name) {
        
        console.log(num + " hello " + name)
        return 1;
    }
    hello2()
    hello2(1,"小明",3)

运行结果  
![image-20240302214733598][]

### 函数表达式 ###

把这个函数直接赋值给一个变量，通过调用这个变量来完成函数的调用，函数的另外一种定义方式  
注：JS中，函数是一等公民, 可以用变量保存, 也可以作为其他函数的参数或者返回值

示例代码

let result = function Sum() {
        
        // 计算1~100之间的和
        ret = 0;
        for(i = 0; i <= 100; i++) {
        
            ret += i;
        }
        return ret
    }
    console.log(result())

运行结果  
![image-20240302220437980][]

2.还可以使用匿名函数，省略函数名

示例代码

let b = function() {
        
        console.log(arguments)// 打印调用的参数列表
    } 
    b();
    b(1,2,3);

运行结果  
![image-20240302221236497][]

### 作用域 ###

某个标识符名字在代码中的有效范围，作用域主要分成以下两个：

*  全局作用域: 在整个`script`标签中, 或者单独的 js 文件中生效
 *  局部作用域: 在函数内部生效

示例代码

let num = 10;// 全局变量
    function test01() {
        
        let num = 100;// 局部变量
        console.log(num)
    }
    function test02() {
        
        let num = 200;// 局部变量
        console.log(num)
    }
    console.log(num)
    test01()
    test02()

运行结果  
![image-20240302222221072][]

2.在JS中，如果定义一个变量不使用`let`，`var`，此时这个变量就变成一个全局变量

示例代码

for(i = 1; i <= 100; i++) {
        
                
    }
    console.log(i)

运行结果  
![image-20240302222745158][]

### 作用域链 ###

函数可以定义在函数内部，内部函数可以访问外部函数的变量，采取的是链式查找的方式，从内到外依次进行查找

示例1：

let num = 10
    function test01() {
        
        let num = 100
        //100
        console.log(num)
        function test02() {
        
            let num = 200;
            //200
            console.log(num)
        }
        test02()
    }
    test01()

运行结果  
![image-20240302223551479][]  
  
  
示例2：

let num = 10
    function test01() {
        
        let num = 100
        //100
        console.log(num)
        function test02() {
        
            //let num = 200;
            //100
            console.log(num)
        }
        test02()
    }
    test01()

运行结果  
![image-20240302224207499][]  
  
  
示例3：

let num = 10
    function test01() {
        
        // let num = 100
        //10
        console.log(num)
        function test02() {
        
            //let num = 200;
            //10
            console.log(num)
        }
        test02()
    }
    test01()

运行结果  
![image-20240302224439223][]  
  
  
示例4：

//let num = 10
    function test01() {
        
        // let num = 100
        //10
        console.log(num)
        function test02() {
        
            //let num = 200;
            //10
            console.log(num)
        }
        test02()
    }
    test01()

运行结果

![image-20240302224747276][]

[e2c6aa3ef7f429]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f6315b80155f4abf98066ce444b2a640.png
[image-20240302210841755]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c1e19d2690524fafadbe236976eb2831.png
[image-20240302214733598]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/1981f489d0a941b08ec50ccc0833fb73.png
[image-20240302220437980]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/ab5c60c4a6c14dea89d22316b90fb66c.png
[image-20240302221236497]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/3a3758f8676d428fb861b982424627d0.png
[image-20240302222221072]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/bce1de805cec4eb592e9b0d0dfcaada2.png
[image-20240302222745158]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/c6ec272ae72242c8a6a0a83c0bf357a9.png
[image-20240302223551479]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/373b5303ad3e41bc8fbe4a1a996f3fbd.png
[image-20240302224207499]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/f92da7bb97154eb795ebc2c42e858f45.png
[image-20240302224439223]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/25d40c0de43c4a0ba39bab7de07b5c9d.png
[image-20240302224747276]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/06/d2acbb3712c34a469045a847076f1987.png