函数是对象
定义一个函数
具名函数
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也是
函数自身 V.S. 函数调用
fn V.S. fn()
函数自身
代码
let fn = () => console.log('hi')
fn
结果
- 不会有任何结果
- 因为fn没有执行
函数调用
代码
let fn = () => console.log('hi')
fn()
结果
- 打印出hi
- 有圆括号才是调用
再进一步
代码
let fn = () => console.log('hi')
let fn2 = fn
fn2()
结果
- fn保存了匿名函数的地址
- 这个地址被复制给了fn2
- fn2() 调用了匿名函数
- fn和fn2都是匿名函数的引用而已
- 真的的函数既不是fn也不是fn2
函数的要素
每个函数都有这些东西
- 调用时机
- 作用域
- 闭包
- 形式参数
- 返回值
- 调用栈
- 函数提升
- arguments (除了箭头函数)
- this (除了箭头函数)
调用时机,时机不同,结果不同
例子1
let a = 1
function fn(){
console.log(a)
}
问打印出多少?
答:不知道,因为没有调用代码
例子2
let a = 1
function fn(){
console.log(a)
}
fn()
问打印出多少?
答:1,因为这段代码函数被调用了
例子3
let a = 1
function fn(){
console.log(a)
}
a = 2
fn()
问打印出多少?
答:2
例子4
let a = 1
function fn(){
console.log(a)
}
fn()
a = 2
问打印出多少?
答:1
例子5
let a = 1
function fn(){
setTimeout(()=>{
console.log(a)
},0)
}
fn()
a=2
问打印出多少?
答:2
例子6
let i = 0
for(i = 0; i<6; i++){
setTimeout(()=>{
console.log(i
},0
}
问打印出多少?
答:不是0,1,2,3,4,5 而是6个6
例子7
for(let i = 0; i<6; i++){
setTimeout(()=>{
console.log(i)
},0)
}
问打印出多少?
答:是0、1、2、3、4、5,因为JS会在for和let一起用的时候加很多东西,每次循环会多创建一个 i
作用域:每个函数都会默认创建一个作用域
例子1
function fn(){
let a = 1
}
console.log(a) //a不存在
例子2
function fn(){
let a = 1
}
fn()
console.log(a) // a 还是不存在
全局变量 V.S. 局部变量
在顶级作用域声明的变量是全局变量,window的属性是全局变量,其他的都是局部变量
函数可嵌套,作用域也可以嵌套
例子3
function f1(){
let a = 1
function f2(){
let a = 2
console.log(a)
}
console.log(a)
a = 3
f2()
}
f1()
作用域规则
如果多个作用域有同名变量a
- 那么查找a 的声明时,就向上取最近的作用域
- 简称[就近原则]
- 查找a的过程与函数执行无关
- 但a的值与函数执行有关
例子4
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()
- 如果一个函数用到了外部的变量
- 那么这个函数加这个变量,就叫做闭包
形式参数
形式参数的意思就是非实际参数
function add(x,y){
return x+y
}
// 其中 x 和 y就是形参,因为并不是实际的参数add(1,2)
// 调用 add 时,1 和 2是实际参数,会被赋值给x y
形参可认为是变量声明
//上面的代码近似于下面的代码
function add(){
var x = arguments[0]
var y = arguments[1]
return x+y
}
形参可多可少,形参只是给参数取个名字,JS并不要求按照形参传值
返回值
每个函数都有返回值
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 到之前的环境,继续执行后续代码
举例
- console.log(1)
- console.log(‘1+2的结果为’ + add(1,2))
- console.log(2)
递归函数
阶乘
function f(n){
return n !==1 ? n * f(n-1) : 1
}
理解递归
- f(4)
- = 4 * f(3)
- = 4 * (3 * f(2))
- = 4 * (3 * (2 * f(1)))
- = 4 * (3 * (2 * (1)))
- = 4 * (3 * (2))
- = 4 * (6)
24,先递归,在回归
递归函数的调用栈
递归函数的调用栈很长
调用栈最长有多少
function computeMaxCallStackSize(){
try{
return 1 + computeMaxCallStackSize();
}catch(e){
//报错说明 stack overflow了
return 1;
}
}
Chrome 12578
Firefox 26773
Node 12536
爆栈:如果调用栈中压入的帧过多,程序就会崩溃
函数提升
什么是函数提升
- function(){}
- 不管你把具名函数声明在哪里,它都会跑到第一行
什么不是函数提升
- let fn = function(){}
- 这是赋值,右边的匿名函数声明不会提升
arguments 和 this
function fn(){
console.log(arguments)
console.log(this)
}
如果不给任何条件this直接指向window
如何传arguments
- 调用 fn 即可传 arguments
- fn(1,2,3) 那么 arguments 就是 [1,2,3] 伪数组
如何传this
- 目前可以使用 fn.call(xxx,1,2,3) 传this 和 arguments
- 如果传的this不是对象,那么 xxx 就会被js自动转化成对象(JS的糟粕)
this是隐藏参数,argument是普通参数。
JS在每个函数里加了this
用this获取那个对象
let person = {
name: 'rick'
sayHi(){
console.log(`你好,我叫` + this)
}
}
person.sayHi() 相当于 person.sayHi(person) 然后person 被传给this了(person 是个地址)
这样,每个函数都能用this 获取一个未知对象的引用了。
person.sayHi()会隐式的把person作为this传给sayHi,方便sayHi获取person对应的对象。
总结
- 我们想让函数获取对象的引用
- 但是并不想通过变量名做到
- Python 通过额外的self参数做到
- JS通过额外的this做到:person.sayHi()会把person自动传给sayHi,saiHi可以通过this引用eprson
其他
- 注意person.sayHi() 和 person.sayHi()的区别
- 注意person.sayHi() 的断句 (person.sayHi) ()
JS提供两种调用方式
小白调用法
- person.sayHi()
- 会自动把person传到函数里,作为this
大师调用法
- person.sayHi.call(person)
- 需要自己手动把person传到函数里,作为this
应该学习那种?学习大师调用法,因为小白调用法自己就会。
箭头函数
没有arguments 和 this
里面的this 就是外面的this
- console.log(this) //window
- let fn = () => console.log(this)
- fn() //window
就算加call都没有
- fn.call({name:’rick’}) //window
立即执行函数
原理
- ES5时代,为了得到局部变量,必须引入一个函数
- 但是这个函数如果有名字,就得不偿失,于是这个函数必须是匿名函数
- 声明匿名函数,然后立即加个() 执行它
- 但是JS标准认为这种语法不合法
- 最终发现只要在匿名函数前面加个运算符即可
- !/~/()/+/- 都可以,但是这里面有些运算符会往上走,所以推荐永远使用 ! 来解决