一、JS 函数的执行时机

1. 为什么如下代码会打印 6 个 6

let i = 0
for(i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

• 答案：setTimeout()会过一段时间执行,因为是for循环先执行完，之后得到i=6，i=6之后再打印6次i，所以会得到6个6.

2. 让上面代码打印 0、1、2、3、4、5 的方法

for(let i = 0; i<6; i++){
  setTimeout(()=>{
    console.log(i)
  },0)
}

• setTimeout在for和let一起用时，每次循环会多创建一个i，循环执行后会创建6个不同的i，所以为0、1、2、3、4、5

3. 除了使用 for let 配合，还有什么其他方法可以打印出 0、1、2、3、4、5

1. 立即执行函数
let i 
for(i = 0; i<6; i++){
  !function(j){
      setTimeout(()=>{
        console.log(j)
      },0)
  }(i)
}

2.利用 setTimeout 的第三个参数,将i传进去
let i
for(i = 0; i<6; i++){
    setTimeout((value)=>{
      console.log(value)
    },0,i)
}

3. 利用 const 关键字
let i
for(i = 0; i<6; i++){
    const x = i
    setTimeout(()=>{
      console.log(x)
    })
}

二、定义一个函数

1. 具名函数

function 函数名(形式参数1, 形式参数2){
  语句
  return 返回值
}

2. 匿名函数

• 上面的具名函数，去掉函数名就是匿名函数 let a = function(x, y){ return x+y }也叫函数表达式

3. 箭头函数

let f1 = x => x*x 
let f2 = (x,y) => x+y // 圆括号不能省
let f3 = (x,y) => {return x+y} // 花括号不能省
let f4 = (x,y) => ({name:x, age: y}) 
直接返回对象会出错，需要加个圆括号

4. 用构造函数

• let f = new Function('x', 'y', 'return x+y')
• 基本没人用，但是能让你知道函数是谁构造的，所有函数都是 Function 构造出来的，包括 Object、Array、Function 也是

三、函数自身 V.S. 函数调用（fn V.S. fn()）

1. 函数自身(fn)

• 代码

let fn = () => console.log('hi')
fn

• 结果：不会有任何结果，因为 fn 没有执行

2. 函数调用(fn())

• 代码

let fn = () => console.log('hi')
fn()

• 结果：打印出 hi，有圆括号才是调用

3. 代码

let fn = () => console.log('hi')
let fn2 = fn
fn2()

结果：

• fn 保存了匿名函数的地址
• 这个地址被复制给了 fn2
• fn2() 调用了匿名函数
• fn 和 fn2 都是匿名函数的引用而已
• 真正的函数既不是 fn 也不是 fn2

四、函数的要素（每个函数都有这些东西）

• 调用时机
• 作用域
• 闭包
• 形式参数
• 返回值
• 调用栈
• 函数提升
• arguments（除了箭头函数）
• this（除了箭头函数）

（一）调用时机

（二）作用域： 每个函数都会默认创建一个作用域

1. 全局变量 V.S. 局部变量

• 在顶级作用域声明的变量是全局变量，window 的属性是全局变量，其他都是局部变量

2. 函数可嵌套，作用域也可嵌套
3. 与函数执行无关的作用域叫做静态作用域，也叫做词法作用域，与函数执行有关的叫动态作用域
4. 作用域规则

• 如果多个作用域有同名变量 a，那么查找 a 的声明时，就向上取最近的作用域，简称「就近原则」
• 查找 a 的过程与函数执行无关，但 a 的值与函数执行有关

（三）闭包

• JS函数会就近寻找最近的变量，如果一个函数用到了外部的变量，那么这个函数加这个变量，就叫做闭包

（四）形式参数

1. 形式参数的意思就是非实际参数

function add(x, y){
  return x+y
}
// 其中 x 和 y 就是形参，因为并不是实际的参数
add(1,2)
// 调用 add 时，1 和 2 是实际参数，会被赋值给 x y

2. 形参可认为是变量声明 // 上面代码近似等价于下面代码

function add(){
  var x = arguments[0]
  var y = arguments[1]
  return x+y
}

3. 形参可多可少，形参只是给参数取名字

（五）返回值

1. 每个函数都有返回值

function hi(){ console.log('hi') }
hi()

• 没写 return，所以返回值是 undefined

function hi(){ return console.log('hi') }
hi()

• 返回值为 console.log('hi') 的值，即 undefined

2. 函数执行完了后才会返回
3. 只有函数有返回值

• 1+2 值为 3

（六）调用栈

1. 什么是调用栈

• JS 引擎在调用一个函数前，需要把函数所在的环境 push 到一个数组里，这个数组叫做调用栈
• 等函数执行完了，就会把环境弹(pop)出来
• 然后 return 到之前的环境，继续执行后续代码

2. 举例

console.log(1)
console.log('1+2的结果为' + add(1,2))
console.log(2)

（七）递归函数

1. 阶乘

function f(n){
  return n !== 1 ? n* f(n-1) : 1
}

2. 理解递归

f(4)
= 4 * f(3)
= 4 * (3 * f(2))
= 4 * (3 * (2 * f(1)))
= 4 * (3 * (2 * (1)))
= 4 * (3 * (2))
= 4 * (6)
24

• 先递进，再回归

3. 递归函数的调用栈

• 递归函数的调用栈很长
• 调用栈最长有多少

function computeMaxCallStackSize() {
  try {
    return 1 + computeMaxCallStackSize();
  } catch (e) {
    // 报错说明 stack overflow 了
    return 1;
  }
}
Chrome 12578
Firefox 26773
Node 12536

4. 爆栈：如果调用栈中压入的帧过多，程序就会崩溃

（八）函数提升

1. 什么是函数提升

• function fn(){}
• 不管你把具名函数声明在哪里，它都会跑到第一行

2. 什么不是函数提升

• let fn = function(){}
• 这是赋值，右边的匿名函数声明不会提升

（九）arguments 和 this（每个函数都有，除了箭头函数）

1. 代码

function fn(){
  console.log(arguments)
  console.log(this)
}

2. 如何传 arguments

• 调用 fn 即可传 arguments
• fn(1,2,3) 那么 arguments 就是 [1,2,3] 伪数组

3. 如何传 this

• 目前可以用 fn.call(xxx, 1,2,3) 传 this 和 arguments
• 而且 xxx 会被自动转化成对象（JS 的糟粕）

4. this 是隐藏参数，arguments 是普通参数
5. 调用方法

• 小白调用法person.sayHi()，会自动把 person 传到函数里，作为 this
• 大师调用法person.sayHi.call(person)，需要自己手动把 person 传到函数里，作为 this

6. this 的两种使用方法

• 隐式传递

fn(1,2) // 等价于 fn.call(undefined, 1, 2)
obj.child.fn(1) // 等价于 obj.child.fn.call(obj.child, 1)

• 显示传递

fn.call(undefined, 1,2)
fn.apply(undefined, [1,2])

7. 绑定 this

• 使用 .bind 可以让 this 不被改变

function f1(p1, p2){
  console.log(this, p1, p2)
}
let f2 = f1.bind({name:'frank'})
// 那么 f2 就是 f1 绑定了 this 之后的新函数
f2() // 等价于 f1.call({name:'frank'})

• .bind 还可以绑定其他参数

let f3 = f1.bind({name:'frank'}, 'hi')
f3() // 等价于 f1.call({name:'frank'}, hi)

（十）箭头函数和立即执行函数

1. 箭头函数里面的 this 就是外面的 this

console.log(this) // window
let fn = () => console.log(this) 
fn() // window

就算你加 call 都没有
fn.call({name:'frank'}) // window

2. 立即执行函数原理

• ES 5 时代，为了得到局部变量，必须引入一个函数，但是这个函数如果有名字，就得不偿失，于是这个函数必须是匿名函数
• 声明匿名函数，然后立即加个 () 执行它
• 但是 JS 标准认为这种语法不合法，所以 JS 程序员寻求各种办法，最终发现，只要在匿名函数前面加个运算符即可
• !、~、()、+、- 都可以
• 但是这里面有些运算符会往上走，所以推荐永远用 ! 来解决