JS第四天-CSDN博客

本文链接：https://blog.csdn.net/m0_75021294/article/details/129879850

文章介绍了JavaScript中的函数概念，包括函数的封装特性，如何声明和调用函数，函数的参数、返回值以及默认参数的使用。还探讨了函数的作用域，包括全局和局部作用域，以及变量的访问原则。最后提到了立即执行函数表达式（IIFE），用于避免全局变量污染。

摘要由CSDN通过智能技术生成

函数

理解函数的封装特性，掌握函数的语法规则

函数的基本使用

函数：是可以被重复使用的代码块

作用：函数可以把具有相同或相似逻辑的代码“包裹”起来，这么做的优势是有利于代码的复用

声明（定义）函数

声明（定义）一个完整函数包括关键字、函数名、形式参数、函数体、返回值5个部分

利用关键字function 定义函数（声明函数）

语法：

// 函数： 是可以被重复使用的代码块，作用是有利于代码复用
// 1. 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
function sayHi() {
console.log('嗨~')
}

注意：

函数命名跟变量一致，采用小驼峰命名法
函数名经常采用动词

调用

声明（定义）的函数必须调用才会真正的被执行，使用（）调用函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 声明和调用</title>
</head>
<body>
  <script>
    // 声明（定义）了最简单的函数，既没有形式参数，也没有返回值
    function sayHi() {
      console.log('嗨~')
    }
    // 函数调用，这些函数体内的代码逻辑会被执行
    // 函数名()
        
    sayHi()
    // 可以重复被调用，多少次都可以
    sayHi()
  </script>
</body>
</html>

注：函数名的命名规则与变量是一致的，并且尽量保证函数名的语义。

函数的整体认知

语法：

function sum(参数1, 参数2...) {
    return 结果
}
console.log(sum(1, 2))  // 输出函数返回的结果

说明：

函数参数，如果有多个则用逗号分隔，用于接收传递过来的数据
return 关键字可以把结果返回给调用者

函数参数

通过向函数传递参数，可以让函数更加灵活多变

形参：声明函数时小括号里的叫形参（形式上的参数）

实参：调用函数时小括号里的值叫实参（实际上的参数）

执行过程：会把实参的数据传递给形参，从而提供给函数内部使用，我们可以把形参理解为变量

<script>
  // 函数的参数  形参和实参个数不匹配

  // 1. 形参个数过多， 会自动补充 undefined 
  function sum(x, y) {  // 形参 
    return x + y
  }
  console.log(sum(1, 2))  // 实参   3
  console.log(sum(1))  // 实参  NaN  x = 1  y 没有给值默认值是 undefined
  //  1 + undefined  = NaN

  // 2. 实参个数过多，则多余的实参会被忽略
  console.log(sum(1, 2, 3)) // 实参 3

  // 3. 开发中提倡要保证实参和形参个数统一
</script>

在Javascript中实参的个数和形参的个数可以不一致

如果形参过多，会自动天上undefined
如果实参过多，那么多余的实参会被忽略

逻辑中断

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

false && anything // 逻辑与左边false则中断，如果左边为true，则返回右边代码的值

true || anything // 逻辑或左边true则中断，如果左边为false，则返回右边代码的值

<script>
// 逻辑中断   && ||

// 1. 逻辑与中断：如果左边为假，则中断，如果左边为真，则返回右边的值
console.log(false && 1 + 2)  // false
console.log(0 && 1 + 2)  // 0
console.log('' && 1 + 2)  // ''
console.log(undefined && 1 + 2)  // undefined
console.log(true && 1 + 2)  // 3 此处不会发生逻辑中断
console.log(1 && 1 + 2)  // 3 此处不会发生逻辑中断

// 2. 逻辑或中断，如果左侧为真，则中断，如果左侧为假，则返回右边的值
console.log(true || 1 + 2) // true  发生了中断
console.log(1 || 1 + 2) // 1  发生了中断
console.log(false || 1 + 2) // 3 此处不会发生逻辑中断

// 3. 使用场景
// function sum(x, y) {
//   return x + y
// }
// console.log(sum(1, 2)) // 3
// console.log(sum()) // NaN

function sum(x, y) {   // x = undefined
  //  x = undefined || 0
  // x = 1 || 0
  x = x || 0
  y = y || 0
  return x + y
}
console.log(sum())  // 0
console.log(sum(1, 2)) // 3
</script>

函数默认参数

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

说明：这个默认值只会在缺少实参传递或者实参是undefined才会被执行

默认参数和逻辑中断使用场景区别：

默认参数主要处理函数形参（处理参数要比逻辑终端更简单）
逻辑中断除了参数还可以处理更多的需求

<script>
  // 默认参数: 给形参一个默认值
  // 1. 默认参数里面的值执行：
  // 1.1 没有实参传递过来 x = 0 
  // 1.2 有实参传递但是传递的是undefined  x = 0
  function sum(x = 0, y = 0) {
  return x + y
	}
  console.log(sum()) // 0
  console.log(sum(undefined, undefined))  // 0
  console.log(sum(1, 2))  // 3

  // 2. 默认参数和逻辑中断使用场景的区别：
  // 2.1 默认参数主要针对的是形参
  // 2.2 逻辑中断除了处理参数之外，还可以做更多
</script>

函数返回值

函数的本质是封装（包裹）函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？

要想获得函数内部逻辑执行结果，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值

返回值：把处理结果返回给调用者

<script>
    // 函数返回值细节
    // 1. return 结束函数，return 后面的代码不会执行了， break退出循环或者switch
    // function sum(x, y) {
    //   return x + y
    //   console.log('我不会执行')
    // }
    // console.log(sum(1, 3))

    // 2. return 和被返回的结果不要换行
    // function sum(x, y) {
    //   return
    //   x + y
    // }
    // console.log(sum(1, 3))

    // 3. 如果函数没有return 则默认返回的是 undefined
    function fn() {

    }
    console.log(fn())  // undefined
  </script>

总结：

return 会立即结束当前函数，所以后面的代码不会再被执行
在return 关键字和被返回的表达式之间不允许使用换行符，否者内部执行相当于会自动补充分号
函数可以没有return ，这种情况函数默认返回值为undefined

作用域

作用域（scope）：变量或者值在代码中可用性的范围

作用：作用域的使用提高了程序逻辑的局部性，蹭墙了程序的可靠性，减少了名字冲突。

全局作用域

作用于所有代码执行的环境，整个 script 标签内部)或者一个独立的 js 文件

处于全局作用域内的变量，称为全局变量

局部作用域

函数作用域。作用域函数内的代码环境
块级作用域。{ }大括号内部

处于局部作用域内的变量称为局部变量

注意：

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

变量的访问原则

访问原则：在能够访问到的情况下先局部，局部没有再找全局。

总结：就近原则

立即执行函数

IIFE (立即执行函数表达式) (Immediately Invoked Function Expression)

场景介绍: 避免全局变量之间的污染

注意：多个立即执行函数要用 ; 隔开，要不然会报错

(function(){ xxx  })();
(function(){xxxx}());