JavaScript基础-函数

函数

• 函数：是可以被重复使用的代码块。
• 作用：函数可以把具有相同或相似逻辑的代码封装起来，有利于代码复用。

基本使用

1. 定义函数（声明函数）：function

2. 调用函数：定义一个函数并不会自动执行它，需要调用函数。

   //声明函数
   function 函数名() {
       函数体
   }
   //调用函数
   函数名()
   
   //需求：封装一个函数，计算两个数的和
   function getSum() {
       let num1 = 1
       let num2 = 9
       console.log(num1 + num2)
   }
   getSum()
   
   //需求： 封装函数，计算1~100之间的累加和
   function getSum100() {
       let sum = 0
       for (let i = 1; i <= 100; i++) {
           sum += i
       }
       console.log(sum)
   }
   getSum100()
   

函数参数

• 形参：声明函数时小括号里的叫形参。
• 实参：调用函数时小括号里的叫实参。
• 执行过程：把实参的数据传递给形参，提供给函数内部使用。

function getSum(x,y) {
    console.log(x,y) //3 5
    return x + y
}
let res = getSum(3,5)
console.log(res) //8

注意：在js中，形参和实参的个数可以不一致。形参过多会自动填上undefined；实参过多，会忽略多余的实参。

建议：开发中保持形参和实参的个数一致。

逻辑中断

• 逻辑中断：存在于逻辑运算符 && 和 || 中，左边如果满足一定条件会中断代码执行，也称为逻辑短路。

• 作用：解决参数形参传递的问题

• 解释：

function getSum(x,y) {
    //逻辑中断：如果 实参 没有传递给形参 x 和 y ，则会返回 0，而不是NaN
    x = x || 0
    y = y || 0
    console.log(x,y)
}
getSum(2) //2 0  => 如果没有逻辑中断，则返回 NaN
getSum(3,6) //3 6

函数参数-默认参数

• 默认参数：可以给形参设置默认值。

• 说明：默认值只会在 缺少实参传递 或 实参为undefined 才会被执行。

• 作用：解决参数形参传递的问题。

• 与逻辑中断的区别：

  • 默认参数主要处理函数形参，比逻辑中断简单；

  • 逻辑中断除了参数，还可以处理更多的需求，例如，

    

function getSum(x = 0,y = 0) {
    console.log(x,y)
}
getSum(4,1) //4 1
getSum(4)   //4 0

函数返回值-return

1. 返回值：把处理结果返回给调用者。
2. 注意：
   • 结束函数：return 会立即结束当前函数，后面的代码不会被执行。
   • 不要换行：在return关键字和被返回的表达式之间不允许使用换行符，否则自动补充分号。
   • 默认返回：可以没有return，这时默认返回值为undefined。

作用域(scope)

• 作用域：变量或者值在代码中可用性的范围.

• 作用：提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域

1. 作用于所有代码执行的环境（整个script标签内部）或者一个独立的 js文件。
2. 变量：全局变量
3. 全局变量 在任何区域都可以访问和修改。

局部作用域

1. 函数作用域：作用于函数内部的代码环境。
2. 块级作用域：{} 大括号内部。
3. 变量：局部变量
4. 局部变量 只能在当前局部内部访问和修改。

注意：

1. 如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
2. 但是有一种情况，函数内部的形参可以看做是局部变量。

变量的访问原则

• 访问原则：在能够访问的情况下 先局部，局部没有 再找全局，总结：就近原则

//练习1
function f1 () {
    let num = 123
    function f2 () {
        console.log(num)    //123
    }
    f2()
}
let num = 234
f1()

// 练习2. 
let a = 1
function fn1() {
    let a = 2
    let b = '22'
    fn2()

    function fn2() {
        let a = 3
        fn3()

        function fn3() {
            let a = 4
            console.log(a)  //4
            console.log(b)  //'22'
        }
    }
}
fn1()

匿名函数

函数表达式

1. 函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用。

2. 使用场景：后期web api 阶段会使用。

3. 注意：

   • 函数也是一种数据类型；
   • 函数表达式必须先定义，后使用；

4. 语法：

   //定义
   let fn = function () {
       //函数体
   }
   
   //调用
   fn()
   

立即执行函数

1. 场景介绍：避免全局变量之间的渲染。

2. 语法：

   //方法1
   (匿名函数)();
   
   //方法2
   (匿名函数());
   
   //方法1
   (function () {
       console.log('niuniu')
   })();
   
   //方法2
   (function () {
       console.log('zhuzhu')
   }());
   

注意：多个立即执行函数要用 ; 隔开，前后都要，否则会报错。

断点调试-进入函数内部

• F11 可以进入函数内部调试

• 可以使用监视，来看数组的变化。