函数

Mr.ZhaoAbout 10 min

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

在我想要让这段代码执行的时候，直接执行这个盒子里面的代码就行

// 这个是我们以前写的一段代码
for (var i = 0; i < 10; i++) {
  console.log(i)
}

// 函数，这个 {} 就是那个 “盒子”
function fn() {
  // 这个函数我们以前写的代码
  for (var i = 0; i < 10; i++) {
    console.log(i)
  }
}

1. 函数定义阶段

定义阶段就是我们把代码 放在盒子里面

我们就要学习怎么 放进去，也就是书写一个函数

我们有两种定义方式 声明式 和 赋值式

1.1 声明式

使用 function 这个关键字来声明一个函数

语法：

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

1.2 赋值式

其实就是和我们使用 var 关键字是一个道理了

首先使用 var 定义一个变量，把一个函数当作值直接赋值给这个变量就可以了

语法：

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

2. 函数调用阶段

2.1 函数的调用方式

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

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

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

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

fn() // 调用函数

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

fn() // 调用函数

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

2.2 调用上的区别

虽然两种定义方式的调用都是一样的，但是还是有一些区别的

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

fn() // 可以调用

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

fn() // 可以调用

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

fn() // 会报错

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

fn() // 可以调用

3. 函数的参数

我们在定义函数和调用函数的时候都出现过 ()，现在我们就来说一下这个 () 的作用，就是用来放参数的

参数分为两种形参和实参

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

fn(实参写在这里)

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

3.1 形参和实参的作用

3.1.1 形参

形参就是在函数内部可以使用的变量，在函数外部不能使用，每写一个单词，就相当于在函数内部定义了一个可以使用的变量（遵循变量名的命名规则和命名规范），多个单词之间以 , 分隔，如果只有形参的话，那么在函数内部使用的这个变量是没有值的，也就是 undefined

注意：形参的值是在函数调用的时候由实参决定的

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

var fn1 = function (num) {
	// 在函数内部就可以使用 num 这个变量
}

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

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

3.1.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)

3.2 参数个数的关系

形参比实参少

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

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

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

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

形参比实参多

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

所以多出来的形参就是没有值的，就是 undefined

function fn(num1, num2, num3) {
  // 函数内部可以使用 num1 num2 和 num3
}

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

3.3 arguments对象

函数内 arguments 表示它接收到的实参列表，它是一个类数组对象

类数组对象：所有属性均为从 0 开始的自然数序列，并且有 length 属性，和数组类似可以用方括号书写下标访问对象的某个属性值，但是不能调用数组的方法

数组的方法详见数组篇

function fun() {
    console.log(arguments)	    // 11 22 33 44
    console.log(arguments[0])	// 11
    console.log(arguments[1])	// 22
    console.log(arguments[9])	// undefined
}

fun(11, 22, 33, 44)

4. 函数的return

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

4.1 返回值

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

// 比如 1 + 2 是一个表达式，那么 这个表达式的结果就是 3
console.log(1 + 2) // 3

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

// fn() 也是一个表达式，这个表达式就没有结果出现
console.log(fn()) // undefined

return 关键字就是可以给函数执行完毕一个结果，我们可以在函数内部使用 return 把任何内容当作这个函数运行后的结果

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

// 此时，fn() 这个表达式执行完毕之后就有结果出现了
console.log(fn()) // 100

4.2 终断函数

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

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

// 函数调用
fn()

5. 作用域

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

5.1 全局作用域

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

这个作用域会一直存在，直到页面关闭就销毁了

// 下面两个变量都是存在在全局作用域下面的，都是可以在任意地方使用的
var num = 100
var num2 = 200

5.2 局部作用域

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

每一个函数，都是一个局部作用域

// 这个 num 是一个全局作用域下的变量 在任何地方都可以使用
var num = 100

function fn() {
  // 下面这个变量就是一个 fn 局部作用域内部的变量
  // 只能在 fn 函数内部使用
  var num2 = 200
}

fn()

6. 变量使用规则

有了作用域以后，变量就有了使用范围，也就有了使用规则，变量使用规则分为两种，访问规则 和 赋值规则

6.1 访问规则

当我想获取一个变量的值的时候，我们管这个行为叫做访问

获取变量的规则：

首先，在自己的作用域内部查找，如果有，就直接拿来使用
如果没有，就去上一级作用域查找，如果有，就拿来使用
如果没有，就继续去上一级作用域查找，依次类推
如果一直到全局作用域都没有这个变量，那么就会直接报错（该变量 is not defined）

var num = 100

function fn() {
  var num2 = 200
  
  function fun() {
    var num3 = 300
    
    console.log(num3) // 自己作用域内有，拿过来用
    console.log(num2) // 自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
    console.log(num) // 自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
    console.log(a) // 自己没有，一级一级找上去到全局都没有，就会报错
  }
  
  fun()
}

fn()

变量的访问规则也叫做作用域的查找机制，作用域的查找机制只能是向上找，不能向下找

function fn() {
  var num = 100
}
fn()

console.log(num) // 发现自己作用域没有，自己就是全局作用域，没有再上一级了，直接报错

6.2 赋值规则

当你想给一个变量赋值的时候，那么就先要找到这个变量，再给它赋值

变量赋值规则：

先在自己作用域内部查找，有就直接赋值
没有就去上一级作用域内部查找，有就直接赋值
还没有再去上一级作用域查找，有就直接赋值
如果一直找到全局作用域都没有，那么就把这个变量定义为全局变量，再给他赋值

function fn() {
  num = 100
}
fn()

// fn 调用以后，要给 num 赋值
// 查看自己的作用域内部没有 num 变量
// 就会向上一级查找
// 上一级就是全局作用域，发现依旧没有
// 那么就会把 num 定义为全局的变量，并为其赋值
// 所以 fn() 以后，全局就有了一个变量叫做 num 并且值是 100
console.log(num) // 100

7. 函数提升

声明式函数：会把所有函数声明提升到当前作用域的最前面，只提升函数声明，不提升函数调用

例：

以下代码

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 关键字的规则进行预解析

8. 立即执行函数

避免全局变量之间的污染

(function(){ xxx  })();
;(function(){ xxx  })()
！function(){ xxx  }()
(function(){xxxx}());

无需调用，立即执行，其实本质已经调用了
多个立即执行函数之间用分号隔开

9.this

每一个函数内部都有一个关键字是 this ，可以让我们直接使用的

后面会详述

函数

# 1. 函数定义阶段

# 1.1 声明式

# 1.2 赋值式

# 2. 函数调用阶段

# 2.1 函数的调用方式

# 2.2 调用上的区别

# 3. 函数的参数

# 3.1 形参和实参的作用

# 3.1.1 形参

# 3.1.2 实参

# 3.2 参数个数的关系

# 3.3 arguments对象

# 4. 函数的return

# 4.1 返回值

# 4.2 终断函数

# 5. 作用域

# 5.1 全局作用域

# 5.2 局部作用域

# 6. 变量使用规则

# 6.1 访问规则

# 6.2 赋值规则

# 7. 函数提升

# 8. 立即执行函数

# 9.this