函数是对象
定义函数
具名函数
function 函数名(形式参数1，形式参数2){
语句
return 返回值
}
匿名函数
上方的具名函数去掉函数名就为匿名函数
let a = function(x,y){
return x+y
}
也叫做函数表达式
箭头函数
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}) //直接返回对象会出错，需要加圆括号
构造函数
let f = new Function('x', 'y', 'return x+y')
基本没人用但是能清晰明白函数是Function构造出来的，包括Object、Array、Function都是
函数自身和函数调用 fn和fn()
let fn = () => console.log('hi')
fn //不会有任何结果因为fn没有调用，应该用fn()
let fn = () => console.log('hi')
let fn2 = fn
fn2()
//真正的函数既不是fn也不是fn2而是() =>console.log('hi')
函数的要素
-
每个函数都有的东西
调用时机
作用域
闭包
形式参数
返回值
调用栈
函数提升
arguments（除了箭头函数）
this（除了箭头函数）
调用时机
一个函数调用的时机不同，结果也不同
let a = 1
function fn(){
console.log(a)
}
//问：打印出什么？答：没有调用代码
let a = 1
function fn(){
console.log(a)
}
fn()
//问：打印出什么？答：1
let a = 1
function fn(){
console.log(a)
}
a = 2
fn()
//问：打印出多少？答：2
let a = 1
function(){
console.log(a)
}
fn()
a=2
//问：打印出多少？答：1
let a = 1
function fn(){
setTimeout(()=>{
console.log(a)
},0)
}
fn()
a=2
//问：打印出什么？答：2
let i = 0
for(i = 0; i<6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
//问：打印出多少？答：不是0~5而是六个6
for(let i = 0; i<6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
//问：打印出什么？答0~5。因为JS在for和let一起作用时每次循环会多创建一个i
作用域
每个函数都会默认创建一个作用域
function fn(){
let a = 1
}
console.log(a) //a不存在
//问：是不是因为fn没执行？答：就算fn执行了，也访问不到作用域里面的a
-
全局变量和局部变量
在顶级作用域声明的变量是全局变量
window的属性是全局变量
其他都是局部变量 -
作用域规则
如果多个作用域有同名变量a（作用域嵌套），那么查找a的声明时，就向上取最近的作用域
简称【就近原则】
查找a的过程与函数执行无关
a的值与函数执行有关
闭包
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()
如果一个函数用到了外部变量，那么这个函数加这个变量就叫做闭包
上边的a和f3就组成了闭包
形式参数
- 形式参数的意思就是非实际参数
function add(x,y){
return x+y
}
//其中x和y就是形式参数
//调用add时，add(1,2)，1和2是实际参数，会赋值给x与y
- 形式参数可认为时变量声明
//上方代码近似于下方
function add(){
var x = arguments[0]
var y = arguments[1]
return x+y
}
返回值
- 每一个函数都有返回值
function hi(){console.log('hi')}
hi()
//没写return，所以返回值时undefined
function hi(){return console.log('hi')}
hi()
//返回值为console.log('hi')的值，即undefined
- 函数执行完后才会返回
-
只有函数有返回值
1+2的值为3而不是1+2的返回值为3
调用栈
-
什么是调用栈
JS引擎在调用一个函数前需要把函数所在的环境push到一个数组里，这个数组就叫做调用栈
等函数执行结束，就会把环境pop出来，然后return到之前的环境，继续执行后续的代码
即为压栈和弹栈
递归函数
- 阶乘
function f(n){
return n!== 1? n*f(n-1) : 1
}
-
递归函数的调用栈
递归函数的调用栈很长
调用栈最长有多少：Chrome12578；Firefox26773；Node12536
爆栈：如果调用栈中压入的帧过多，程序就会崩溃
函数提升
-
什么是函数提升
function fn(){}
不管把具名函数声明在哪里，它都会跑到第一行 -
什么不是函数提升
let fn = function(){}
赋值，右边的匿名函数声明不会提升
arguments和this
每个函数都有，除了箭头函数
function fn(){
console.log(arguments)
console.log(this)
}
如何传arguments
调用fn即可传arguments
fn(1,2,3)那么arguments就是[1,2,3]伪数组如何传this
目前可以用fn.call(xxx,1,2,3)传this和arguments
而且xxx会被自动转化成对象（JS的糟粕）
let person = {
name: 'frank',
sayHi(隐this藏){
console.log(`我叫`+this.name)
}
}
person.sayHi()
person.sayHi()相当于person.sayHi(person)然后person被传给了this（person是个地址）
这样，每个函数都能用this获取未知对象的引用了
两种调用方法
小白调用法：
person.sayHi() //会自动把person传到函数里，作为this
大师调用法：
person.sayHi.call(person) //需要自己手动把person传到函数里，作为this
-
绑定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')
箭头函数
- **里面的this就是外面的this
console.log(this) //window
let fn => console.log(this)
fn() //window
就算加上call都没有
fn.call({name: 'frank'}) //window
立即执行函数
过时技巧：用 !+函数 形式来制造局部变量
现在用let就行
