JavaScript函数基础知识（四）

Bertha 。 2023-10-06 15:33 50阅读 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` 这个关键字来声明一个函数
 *  语法：

function fn() {
    	// 一段代码 
    }
    // function: 声明函数的关键字，表示接下来是一个函数了
    // fn: 函数的名字，我们自己定义的（遵循变量名的命名规则和命名规范）
    // (): 必须写，是用来放参数的位置（一会我们再聊）
    // {}: 就是我们用来放一段代码的位置（也就是我们刚才说的 “盒子”）

#### 赋值式 ####

*  其实就是和我们使用 `var` 关键字是一个道理了
 *  首先使用 `var` 定义一个变量，把一个函数当作值直接赋值给这个变量就可以了
 *  语法：

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

#### 函数调用阶段 ####

*  就是让 **盒子里面** 的代码执行一下
 *  让函数执行
 *  两种定义函数的方式不同，但是调用函数的方式都以一样的

#### 调用一个函数 ####

*  函数调用就是直接写 `函数名()` 就可以了

// 声明式函数 
    function fn() {
    	console.log('我是 fn 函数')
    }
    // 调用函数 
    fn() 
    // 赋值式函数
    var fn2 = function() {
    	console.log('我是 fn2 函数')
    }
    // 调用函数 
    fn()

*   *  注意： **定义完一个函数以后，如果没有函数调用，那么写在 \{\} 里面的代码没有意义，只有调用以后才会执行**

#### 调用上的区别 ####

*  虽然两种定义方式的调用都是一样的，但是还是有一些区别的
 *  声明式函数： 调用可以在 **定义之前或者定义之后**

// 可以调用
    fn()
    // 声明式函数
    function fn() {
    	console.log('我是 fn 函数')
    }
    // 可以调用 
    fn()

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

// 会报错 
    fn()
    // 赋值式函数
    var fn = function() {
    	console.log('我是 fn 函数')
    }
    // 可以调用
    fn()

### 函数的参数（重点） ###

*  我们在定义函数和调用函数的时候都出现过 `()`
 *  现在我们就来说一下这个 `()` 的作用
 *  就是用来放参数的位置
 *  参数分为两种 **形参** 和 **实参**

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

#### 形参和实参的作用 ####

1.  形参

*  就是在函数内部可以使用的变量，在函数外部不能使用
 *  每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命名规范）
 *  多个单词之间以 `,` 分隔

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

*   *  如果只有形参的话，那么在函数内部使用的值个变量是没有值的，也就是 `undefined`
     *  形参**的值是在函数调用的时候由实参决定的**

1.  实参

*  在函数调用的时候给形参赋值的
 *  也就是说，在调用的时候是给一个实际的内容的

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

*   *  **函数内部的**形参**的值，由函数调用的时候传递的实参决定**
     *  **多个参数的时候，是按照顺序一一对应的**

function fn(num1, num2) {
    	// 函数内部可以使用 num1 和 num2
    }
    // 函数本次调用的时候，书写的参数是 100 和 200 
    // 那么本次调用的时候，函数内部的 num1 就是 100，num2 就是 200 
    fn(100, 200)

#### 参数个数的关系 ####

1.  形参比实参少

*  因为是按照顺序一一对应的
 *  形参少就会拿不到实参给的值，所以在函数内部就没有办法用到这个值

function fn(num1, num2) {
    	// 函数内部可以使用 num1 和 num2 
    }
    // 本次调用的时候，传递了两个实参，100 200 和 300 
    // 100 对应了 num1，200 对应了 num2，300 没有对应的变量
    // 所以在函数内部就没有办法依靠变量来使用 300 这个值 
    fn(100, 200, 300)

1.  形参比实参多

*  因为是按照顺序一一对应的
 *  所以多出来的形参就是没有值的，就是 `undefined`

function fn(num1, num2, num3) {
    	// 函数内部可以使用 num1 num2 和 num3
    }
    // 本次调用的时候，传递了两个实参，100 和 200 
    // 就分别对应了 num1 和 num2 
    // 而 num3 没有实参和其对应，那么 num3 的值就是 undefined 
    fn(100, 200)

### 函数的return（重点） ###

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

#### 终断函数 ####

*  当我开始执行函数以后，函数内部的代码就会从上到下的依次执行
 *  必须要等到函数内的代码执行完毕
 *  而 `return` 关键字就是可以在函数中间的位置停掉，让后面的代码不在继续执行

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

#### 返回值 ####

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

// 比如 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` 关键把任何内容当作这个函数运行后的结果

### 函数的优点 ###

*  函数就是对一段代码的封装，在我们想调用的时候调用
 *  函数的几个优点

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

### 预解析（重点） ###

*  **预解析** 其实就是聊聊 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` 关键字的规则进行预解析