javaScript——函数

函数的概念

对于 js 来说，函数就是把任意一段代码放在一个 盒子 里面

函数和和变量

变量是准备了一个盒子, 存储一个值
函数是准备了一个盒子, 存储一段 JS 代码

函数的特点

1. 使代码更加简洁
2. 重复使用
3. 调用时机

函数的创建

• 两种方式
  1. 声明式函数
  2. 赋值式函数
• 声明完毕的函数时不会执行的
• 只是做了一个函数放在内存中
• 但是函数内部的代码并不会执行

声明式

语法：

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

赋值式

和var 关键字是一个道理了 首先使用 var 定义一个变量，把一个函数当作值直接赋值给这个变量就可以了

语法：

var fn = function () {
  // 一段代码
}

函数调用

让函数执行
两种定义函数的方式不同，但是调用函数的方式都以一样的

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

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

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

函数还可以依赖事件执行
语法:

指定页面元素.onclick = 函数名
怎么找到指定元素, 页面中元素身上的 id 属性, 就可以在 JS 里面直接表示这个元素
找到页面元素, 只能使用元素的 id 来直接使用

<div οnclick="fu()">调用函数</div>

function fu(){
      console.log("开始执行")
    }

每点击一次触发一次

调用上的区别
声明式函数： 调用可以在 定义之前或者定义之后都可以调用函数
赋值式函数： 调用只能在 定义之后在函数定义前的话会报错

• 因为是在所有代码执行之前进行解释预解析（预解释/预编译）
  解析了两个内容

   声明式函数
    告诉浏览器, 这个名字已经被定义过了, 并且是一个函数
    var 关键字
    告诉浏览器, 这个变量名已经被定义过了, 但是还没有赋值
  

函数的参数

参数分为两种 行参 和 实参
形参写在创建函数的括号里，实参写在调用的括号里

形参: 函数 定义 的时候写在小括号里面的内容 就是一个在函数里面使用的变量 只不过这个变量的值由调用函数的时候的实参决定
实参: 函数调用 的时候写在小括号里面的内容 就是在调用函数的时候给形参进行赋值的

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

fn(实参写在这里)

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

形参

一个函数定义形参, 理论上可以写无限个 多个形参之间用 逗号 分隔形参和实参对应

function fn(a,b,c,d) {
  // 一段代码
   // 在函数内部就可以使用a,b,c,d 这几个变量
}

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

实参

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

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

• 多个参数的时候，是按照顺序一一对应的（从左往右）

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

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

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

参数个数的关系

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

function fn(a, b) {
  // 函数内部可以使用 a 和 b
}

// 本次调用的时候，传递了两个实参，10 20和 30
// 10 对应了 a，20 对应了 b，30 没有对应的变量
// 所以在函数内部就没有办法依靠变量来使用 30 这个值
fn(10, 20, 30)

2.行参比实参多
所以多出来的行参就是没有值的，就是 undefined

function fn(a, b , c) {
  // 函数内部可以使用 a 和 b 和 c
    console.log(a,b,c)
}

// 本次调用的时候，传递了两个实参，10 20
//那么前两个值就是10 ，20
// 第三个形参没有对应那么他就是undefined
fn(10, 20)

函数的return

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

返回值

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

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

function fn() {
  // 执行代码
  return 100
}
console.log(fn()) // 得出结果100

终断函数

当我开始执行函数以后，函数内部的代码就会从上到下的依次执行

必须要等到函数内的代码执行完毕 而 return 关键字就是可以在函数中间的位置停掉，让后面的代码不在继续执行

函数的arguments

arguments 叫做 伪数组 或者 类数组
每一个函数里面天生自带一个变量, 叫做 arguments

当你在函数里面的时候, 不需要任何定义
直接就可以使用这个变量
一个数据的集合, 保存了所有的实参
你传递一个实参, 这里面就有一个数据
你传递十个实参, 这里面就有十个数据

arguments 的使用

arguments中有一个 length 属性, 值是这个 arguments 的长度
这个 arguments 里面由多少个数据这个 arguments 的 length 就是几

 function fn() {
      // 函数内部天生自带的变量
      console.log(arguments.length) // 打印 arguments 的 长度
      }
       fn(10, 20)

由于是两个实参所以长度为2

arguments 的索引

arguments 里面是按照顺序把所有的实参排列好
这个顺序叫做 索引 或者 下标
索引和下标是一个官方的名字, 其实就是数据的序号
索引 或者 下标 是 从 0 开始的
按照 +1 的顺序递增

 function fn() {
      console.log(arguments[0]) //打印 arguments 这个集合里面的序号排在 0 的数据
      console.log(arguments[1])//打印 arguments 这个集合里面的序号排在 1 的数据
      }
       fn(10, 20)

作用域

作用域，就是一个变量可以生效的范围
变量不是在所有地方都可以使用的，而这个变量的使用范围就是作用域

全局作用域

全局作用域是最大的作用域
在全局作用域中定义的变量可以在任何地方使用
页面打开的时候，浏览器会自动给我们生成一个全局作用域 window
这个作用域会一直存在，直到页面关闭就销毁了

局部作用域

部作用域就是在全局作用域下面有开辟出来的一个相对小一些的作用域
在局部作用域中定义的变量只能在这个局部作用域内部使用
在 JS 中只有函数能生成一个局部作用域，别的都不行
每一个函数，都是一个局部作用域

作用域的上下级关系

当代码书写好了以后, 作用域就已经生成了
作用域是有上下级关系的
你的函数写在哪一个作用域里面, 这个函数就是哪一个作用域的子级

变量使用规则

      1. 定义规则
        一定要有 var 关键字
        或者就是 声明式函数
      2. 赋值规则
        必须要有赋值运算符
        要有 = 或者 += 或者 -= ...
        n1 = 200   赋值
        n1 + n2    不是赋值
      3. 使用规则
        我需要拿到某一个变量的值
        console.log(n1)     使用
        n1 + n2             使用
        n++                 使用 拿到 n 的值 +1 在从新赋值给 n

变量定义规则:
定义在哪一个作用域里面的变量
就是属于哪一个作用域的变量
只能在该作用域及后代作用域使用
变量的赋值规则:
当你需要给一个变量赋值的时候
先在自己作用域内查找, 如果自己有, 就给自己的赋值
如果自己没有, 就去 上级 作用域查找, 如果有就赋值
如果上级作用域还没有, 就去在上级查找, 如果有就赋值
一直到全局作用域都没有, 那么把这个变量 定义为全局变量, 再进行赋值
变量的访问规则:
当你需要使用一个变量的时候
先在自己作用域内查找, 如果自己有, 就那自己的来用
如果自己没有, 就去 上级 作用域查找, 如果有就拿来用
如果上级作用域还没有, 就去再上级查找, 如果有就拿来用
一直到全局作用域都没有, 那么就报错 xxx is not defined