day04

函数的概念

对于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

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

2、实参

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

也就是调用的时候给一个实际的内容

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

函数内部的行参的值，由函数调用的时候传递的实参决定

多个参数的时候，是按照顺序一一对应的

参数个数的关系

1、行参比实参少

因为是按照顺序一一对应的

行参少就会拿不到实参给的值，所以在函数内部就没有办法用到这个值

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

2、行参比实参多

因为是按照顺序一一对应的

所以多出来的行参就是没有值的，就是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关键字的规则进行预解析