JavaScript函数的概念和使用

函数（上）

函数的概念

·对于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、定义函数

（1）声明式

function fn() {一段代码}

function：表示声明函数的关键字

Fn：函数的名字，我们自己来定义的

（）：必须写，用来放参数的位置

{}：用来放置一段代码的位置，也就是 盒子

（2）赋值式

var test3 = function(){一段代码}

不需要再function后面书写函数名字，因为前面已有

2、调用函数

·让盒子里面的代码执行一下

直接写 函数名（） 就可以

区别：声明式可以先调用再定义 赋值式必须先定义再调用

函数的参数

Fn（）中的（）就是用来放参数的位置

参数分为两种 行参和实参

1、实参 vs 行参

2、可以不传参，可以不传参

3、行参只能在函数内部去使用

函数的返回值

函数调用本身也是一个表达式，表达式就应该有一个值出现

现在的函数执行完毕后，是不会有结果出现的

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

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

注意：

1、return 看需求

2、return 后面代码无法执行了

行参和实参的作用

1.行参

• 就是在函数内部可以使用的变量，在函数外部不能使用

• 每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命名规范）

• 多个单词之间以 , 分隔

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

• 如果只有行参的话，那么在函数内部使用的值个变量是没有值的，也就是 undefined

• 行参的值是在函数调用的时候由实参决定的

2. 实参

   • 在函数调用的时候给行参赋值的

   • 也就是说，在调用的时候是给一个实际的内容的

     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. 封装代码，使代码更加简洁
  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 关键字的规则进行预解析

- 思维导图