JS 函数的知识，内容包括函数对象、函数的定义和调用、函数的要素、调用时机、作用域、闭包、形式参数、调用栈、返回值、函数提升、arguments、this、箭头函数、立即执行函数。
一、函数对象
JS 中的函数是对象。
函数怎么会是对象......看起来不一样啊，请接受这个结论。
二、函数的定义和调用
1. 具名函数
function 函数名(形式参数1, 形式参数2){
语句
return 返回值
}
let a = function fn(x,y){return x+y}
fn(1,2)
// 报错
//如果 fn 是等于号右边的，那么它的整个作用域只有等于号右边
//如果没有这个等于号：function fn(x,y){return x+y}，就是全局作用域，JS是不是很变态
2. 匿名函数
具名函数去掉函数名就是匿名函数
let a= function(x,y){ return x+y }
// 也叫函数表达式
3. 箭头函数
let f1 = x => x*x //箭头函数的左边 x 是输入参数，箭头的右边是输出
let f2 = (x,y) => x+y // 圆括号不能省
let f3 = (x,y) => {return x+y} // 花括号不能省
let f4 = (x,y) => ({name: x, age: y}) // 如果要返回一个对象，需要在对象两边加一个圆括号
// 不写圆括号，JS 会认为是一个 label 标签
4. 用构造函数
let f= new Function('x', 'y', 'return x+y')
几乎没人用，但是能让你知道函数是谁构造的，所有函数都是 Function 构造出来的，包括 Object、Array、Function 也是
5. 函数自身和函数调用
fn VS fn()： fn 是指函数本身，fn() 是指调用函数
let fn = () => console.log('hi')
fn
// 不会有任何结果，因为你只是把函数写在这里，你没有执行它，没有调用它
let fun = () => console.log('hi')
fn()
// 打印 hi，有圆括号才是调用
// 来一个有深度点的
let fn = () => console.log('hi')
let fn2 = fn
fn2()
// fn 保存了匿名函数的地址，这个地址被复制给了 fn2，fn2() 调用了匿名函数
// fn 和 fn2 都是匿名函数的引用而已，真正的函数既不是 fn 也不是 fn2
三、函数的要素
每个函数都有这 9个概念：
- 调用时机
- 作用域
- 闭包
- 形式参数
- 返回值
- 调用栈
- 函数提升
- arguments（除了箭头函数）
- this（除了箭头函数）
四、调用时机
调用函数的时机不同，得到的结果也不同
1. 举例子对比
let a = 1
function fn(){
console.log(a)
}
fn()
// 打印 1
let a = 1
function fn(){
console.log(a)
}
a = 2
fn()
// 打印 2
2. for 和 let 的配合
JS 的妥协，let 配合 for 使用
let i = 0
for(i = 0; i<6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
// 打印 6 个 6
for(let i = 0; i<6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
// 打印 0、1、2、3、4、5
当使用 let i=0 做 for 循环的时候，每次循环都复制一个 i 存一份，然后打印的的时候打印存下来的 6 个 不同的 i 值
// 不用 let 和 for 的配合，通过限制作用域的方式打印出 0、1、2、3、4、5
let i =0
for(i = 0; i<6; i++){
fn(i)
}
function fn(i){setTimeout(()=>{
console.log(i)
},0)}
// 打印 0、1、2、3、4、5
五、作用域
每个函数都会默认创建一个作用域，四个字，就近原则
1. 举例子
function fn(){
let a = 1
}
console.log(a) // a 不存在
// 因为访问不到作用域里面的 a
function fn(){
let a = 1
}
fn()
console.log(a) // a 还是不存在
2. 全局变量 VS 局部变量
在顶级域声明的变量是全局变量，window 的属性是全局变量，其他都是局部变量
3. 作用域规则
如果多个作用域有同名变量 a，那么查找 a 的声明时，就向上取最近的作用域，简称「就近原则」，查找 a 的过程与函数执行无关，但 a 的值与函数执行有关
例 5-3
function f1(){
let a = 1
function f2(){
let a = 2
function f3(){
console.log(a)
}
a = 22
f3()
}
console.log(a)
a = 100
f2()
}
f1()
六、闭包
如果一个函数用到了外部的变量，那么这个函数加这个变量就叫做闭包，看上一章的例 5-3，a 和 f3 组成了闭包
七、形式参数
形式参数的意思就是非实际参数
function add(x, y){
return x+y
}
// 其中 x 和 y 就是形参，因为并不是实际的参数，add(1,2)
// 调用 add 时，1 和 2 是实际参数，会被复制给 x y
let a = {value: 1}
let b = {value:2}
function addObject(x,y){
x.name = 'xxx'
return x.value + y.value
}
addObject(a,b)
// 问：a 的值是多少
> a
< {value: 1, name: "xxx"}
总结一下上面两个例子
- 当 a 是值的时候，x 形参复制了 a 的值，你改变 x 值的时候不会影响 a
- 当 a 是对象的时候，x 形参复制了 a 的地址，你改变 x 的地址指向对象里的属性时，当然会影响 a ，因为它们指向一个地方
形参可多可少
// 形参少的情况
function add(x){
return x + arguments[1]
}
add(1,2)
// x + y 是两个，我就声明一个，你咬我啊，所以它可以不必把形参声明完
// 形参多的情况
function add(x,y,z){
return x + y
}
// 这个 z 你声明干嘛，我声明着好玩行不行
JS 的代码就是这么随意，你爱多就多，爱少就少
八、返回值
每个函数都有返回值，函数执行完了后才会返回
function hi(){ console.log('hi') }
hi()
// 没写 return，所以返回值是 undefined
九、调用栈
JS 引擎在调用一个函数前需要把函数所在的环境 push 到一个数组里，这个数组叫做调用栈，等函数执行完了，就会把环境弹（pop）出来，然后 return 到之前的环境，继续执行后续代码
1. 举例
console.log(1)
console.log('1+2的结果为' + add(1,2))
console.log(2)
console.log(1)（进入 log 函数，同时记录痕迹 1 "记得回这里家"，压栈） →
打印 1 →
弹栈（回到"痕迹 1"） →
consol.log('1+2的结果为' + add(1,2))（进入log，同时记录痕迹 2 "记得回这里家"，压栈） →
add(1,2)（进入add，同时记录痕迹 3 "记得回这里家"，压栈）→
做相加操作 → 弹栈（回到"痕迹 3"）→
打印 1+2的结果为3 →
弹栈（回到"痕迹 2"）
// 后面执行第三行的时候，同理，把第三行的地址压到栈里面，然后执行再回来
如果使用递归函数，很有可能把栈压满
2. 递归函数
// 阶乘，这个函数函数让我回忆起了高中姚老师教的数学归纳法
function f(n){
return n !== 1 ? n* f(n-1) : 1
}
// 理解递归，压了 4 次栈
f(4)
= 4 * f(3)
= 4 * (3 * f(2))
= 4 * (3 * (2 * f(1)))
= 4 * (3 * (2))
= 4 * (6)
24
3. 递归函数的调用栈
递归函数的调用栈很长，调用栈最长有多少，大概统计如下：
Chrome 12578
Firefox 26773
Node 123536
4. 爆栈
如果调用栈中压入的帧过多，程序就会奔溃
十、函数提升
不管你把具名函数的声明在哪里，它都会跑到第一行
刁钻的问题
// 问执行该代码会发生什么
let add = 1
function add(){}
// 答案：会报错，因为 let 不允许你在有函数的情况下再声明 add
// Uncaught SyntaxError: Identifier 'add' has already been declared
十一、arguments
每个函数都有（除了箭头函数）arguments，是一个伪数组，包含所有参数的伪数组，是普通参数
调用 fn 即可传 arguments
fn(1,2,3) //那么 arguments 就是 [1,2,3] 伪数组
十二. this
每个函数都有（除了箭头函数）this，是隐藏参数，如果不给任何条件，this 指向 window
可以用 fn.call(xxx,1,2,3) 传 xxx 给 this，而且 xxx 会被自动化转化为对象
// 创建一个函数，稍后调用它
let person = {
name: 'frank',
sayHi(){
console.log(`你好，我叫` + this.name)
}
}
// 小白调用法 -- 自动把 person 传到函数里，作为 this
person.sayHi()
// 大师调用法 -- 自己手动把 person 传到函数里，作为 this
person.sayHi.call(person)
1. call 指定 this
// 大师写法
// 我直接手动把 arry 传给 this，有助于理解 this
arry.forEach.c
all(arry, (item) => console.log(item))
// 小白写法
// arry 悄悄地传给 this
arry.forEach( (item) => console.log(item) )
2. 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])
3. 绑定 this
使用 .bind 可以让 this 不被改变
functon f1(p1, p2){
console.log(this, p1, p2)
}
let f2 = f1.bind({name:'frank'})
f2()
// 那么 f2 就是 f1 绑定了 this 之后的新函数 f2
// 等价于 f1.call({name: 'frank'})
let f3 = f1.bind({name:'frank'}, 'hi')
f3()
// 等价于 f1.call({name:'frank'}, hi)
十三、箭头函数
箭头函数自己没有 this，没有 arguments
里面的 this 就是外面的 this
console.log(this) // window
let fn = () => console.log(this)
fn() // window
就算你加 call 都没有
fn.call({name:'frank'}) // window
十四、立即执行函数
只有 JS 有这个概念，现在用得少
需求是：我不想声明一个全局变量，就想声明一个局部变量，用完就不要了
// 程序员机智地发现在匿名函数前面加个运算符就可以
!function (){
var a = 2
console.log(a)
} ()
// !、~、()、+、- 都可以，推荐用 ! 来解决
// 新版 JS 不用这样了，直接花括号解决需求
{
let a = 2
console.log(a)
}
「资料来源：©饥人谷」
