js函数部分

Jisoo27

已于 2022-12-06 19:55:47 修改

阅读量136

点赞数

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2022-11-29 11:16:43 首次发布

本文链接：https://blog.csdn.net/weixin_61856975/article/details/128094396

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

函数

就是封装了一段可以被重复调用执行的代码块，通过此代码块可以实现大量代码重复使用；

函数的概念

对于js来说，函数就是把任意一段代码放在一个盒子里面；
当想要让这段代码执行时，就可以直接执行这个盒子里面的代码就行；
即就是分为两个阶段，放在盒子里面和让盒子里面的代码执行；

// 这个是我们以前写的一段代码
for (var i = 0; i < 10; i++) {
  console.log(i)
}

// 函数，这个 {} 就是那个 “盒子”
function fn() {
  // 这个函数我们以前写的代码
  for (var i = 0; i < 10; i++) {
    console.log(i)
  }
}

函数定义阶段

定义阶段就是我们把代码 放在盒子里面
两种方式：声明式和赋值式

声明函数

使用关键字function来声明函数；
注意
1. 函数名是由我们自己定义的，其命名遵循变量名的命名规范和命名规则；
2. 函数名后面的括号是用来放参数的，是必须要写的；
3. {}里面放的就是我们的代码块；

语法：
function 函数名() {
  // 代码块
}

赋值式

其实就是用var去定义一个变量，把一个函数当做值直接赋值给这个变量；
此方式需要注意的是不需要在function后面写函数名了；

var fn = function () {
  // 一段代码
}
// 不需要在 function 后面书写函数的名字了，因为在前面已经有了

函数的调用

就是让盒子里面的代码运行一下，即就是让函数执行；
虽然定义函数的方式有两种，但是其调用方式是一样的，只是有一点小区别；

调用一个函数

调用函数就是直接写函数名就好了；

注意：如果定义了一个函数但是没有函数调用，那么{}里面的代码没有意义，只有被调用后才会被执行；
```
function 函数名() {
  // 代码块
}
//调用函数
函数名()
```

调用上的区别

虽然两种定义方式的调用都是一样的，但是调用的位置有区别；

声明式函数：调用可以在定义之前，也可以在定义之后；

函数名()  //可以将调用函数写在这里
function 函数名() {
  // 代码块
}
函数名()    //也可以将调用函数写在这里

赋值式函数：调用只能写在定义之后；

函数名()   //会报错
function 函数名() {
  // 代码块
}
函数名()   //只能将调用函数写在这里

函数的参数（重点）

我们在书写函数和调用函数时，函数名后面都跟了一个括号，此括号就是用来放参数的；
参数分为两种：形参和实参

//声明式
function 函数名(形参写在这里) {
  // 代码块
}


//赋值式
var fn = function (形参写在这里) {
  // 一段代码
}

函数名(实参写在这里)

形参和实参

1.形参

在声明函数时，会在函数名后面的小括号中添加一些参数，这些参数都被称为形参；
就是在函数内部可以使用的变量，在函数外部不能使用；
括号中可以有多个变量，每个变量之间逗号隔开；
注意：
1. 如果只有行参的话，那么在函数内部使用的值个变量是没有值的，也就是undefined；
2. 行参的值是在函数调用的时候由实参决定的

// 书写一个参数
function fn(num) {
  // 在函数内部就可以使用 num 这个变量
}

var fn1 = function (num) {
	// 在函数内部就可以使用 num 这个变量
}

// 书写两个参数
function fun(num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

var fun1 = function (num1, num2) {
  // 在函数内部就可以使用 num1 和 num2 这两个变量
}

2.实参

在函数调用的时候给行参赋值的
注意：
1. 函数内部的行参的值，由函数调用的时候传递的实参决定
2. 多个参数的时候，是按照顺序一一对应的

function fn(num) {
  // 函数内部可以使用 num 
}

// 这个函数的本次调用，书写的实参是 100
// 那么本次调用的时候函数内部的 num 就是 100
fn(100) 

// 这个函数的本次调用，书写的实参是 200
// 那么本次调用的时候函数内部的 num 就是 200
fn(200)

函数的return（重点）

return 返回的意思，其实就是给函数一个 返回值 和 终断函数

返回值

函数调用本身只是一个表达式，表达式就应该有一个值出现；
现在的函数执行完毕之后，是不会有结果出现的；

// 比如 1 + 2 是一个表达式，那么 这个表达式的结果就是 3
console.log(1 + 2) // 3

function fn() {
  // 执行代码
}

// fn() 也是一个表达式，这个表达式就没有结果出现
console.log(fn()) // undefined

return 关键字就是可以给函数执行完毕一个结果

function fn() {
  // 执行代码
  return 100
}

// 此时，fn() 这个表达式执行完毕之后就有结果出现了
console.log(fn()) // 100

我们可以在函数内部使用 return 关键把任何内容当作这个函数运行后的结果

终断函数

当开始执行函数以后，函数内部的代码会从上往下依次执行；
而 return 关键字就是可以在函数中间的位置停掉，让后面的代码不在继续执行；

function fn() {
  console.log(1)
  console.log(2)
  console.log(3)
  
  // 写了 return 以后，后面的 4 和 5 就不会继续执行了
  return
  console.log(4)
  console.log(5)
}

// 函数调用
fn()

函数的优点

函数的几个优点

封装代码，使代码更加简洁
复用，在重复功能的时候直接调用就好
代码执行时机，随时可以在我们想要执行的时候执行

预解析（重点）

预解析 其实就是聊聊 js 代码的编译和执行
js 是一个解释型语言，就是在代码执行之前，先对代码进行通读和解释，然后在执行代码
也就是说，我们的 js 代码在运行的时候，会经历两个环节 解释代码 和 执行代码

解释代码

因为是在所有代码执行之前进行解释，所以叫做 预解析（预解释）
需要解释的内容有两个
- 声明式函数
  - 在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数
- var 关键字
  - 在内存中先声明有一个变量名

fn()
console.log(num)

function fn() {
  console.log('我是 fn 函数')
}

var num = 100

经过预解析之后可以变形为

function fn() {
  console.log('我是 fn 函数')
}
var num

fn()
console.log(num)
num = 100

赋值式函数会按照 var 关键字的规则进行预解析