JavaScript学习4-函数

函数的概念

• 函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
• 对于 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 fn() {
  console.log('我是 fn 函数')
}
// 调用函数
fn()

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

// 调用函数
fn2()

调用前后的区别

• 声明式函数：调用可以在定义的函数之前或者之后
• 样式：

// 可以调用
fn()

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

// 可以调用
fn()

• 赋值式函数：调用只能在定义的函数之前

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

函数的优点

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

函数的参数

• 参数分为两种 行参和实参
• 样式：

// 声明式
function fn(行参写在这里) {
  // 代码片段
}

fn(实参写在这里)

// 赋值式函数
var fn2 = function (行参写在这里) {
  // 代码片段
}
fn2(实参写在这里)

行参

• 行参的值是函数调用的时候由实参决定
• 多个行参以,分隔
• 行参只能函数本身内部使用
• 样式：

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

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

//声明式和赋值式一样

• 如果在调用函数时，没有传入实参，只有行参，那么函数本身内部使用这个行参地方的值，就是undefined

实参

• 在函数调用时给行参赋值的
• 函数内部行参的值，由函数调用的时候传递的实参决定
• 传递多个参数时，安卓顺序一一对应
• 样式：

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

fn(200)

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

参数个数的关系

行参比实参少

• 按照顺序一一对应
• 行参少就拿不到多的实参的值，那么函数内部就没办法用到多的实参的值
• 样式：

function fn(num1, num2) {
  console.log(num1,num2)
}

fn(100, 200, 300)

行参比实参多

• 也是按照顺序一一对应
• 多出的行参没有值，那么多出的就是undefined
• 样式：

function fn(num1, num2,num3) {
  console.log(num1,num2,num3)
}

fn(100, 200)

函数的arguments

• 每个函数都有一个arguments属性（箭头函数没有）
• 是函数实参的集合，是一个伪数组
• 有length属性，可读写 arguments.length,按照索引排列,可读写 arguments[索引]

函数的return

• return 返回,就是给函数一个 返回值 和 终断函数

返回值

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

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

console.log(fn())

终断函数

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

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

fn()