Get Started
• 函数的定义
• 函数的要素
函数
是一种特殊的对象
定义一个函数
• 具名函数
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（除了箭头函数）
调用时机
调用时注意当前时刻变量的值
作用域
每个函数都会默认创建一个作用域
变量及代码的作用范围
• 全局变量V.S.局部变量
在顶级作用域声明的变量是全局变量。
window的属性是全局变量。
其他都是局部变量。
• 函数可嵌套，作用域也可嵌套
• 例
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组成了闭包
• 作用
①函数作为返回值
②闭包作为参数传递
• 好处
①保护函数内的变量安全 ，实现封装，防止变量流入其他环境发生命名冲突
②在内存中维持一个变量，可以做缓存（但使用多了同时也是一项缺点，消耗内存）
③匿名自执行函数可以减少内存消耗
• 坏处
①其中一点上面已经有体现了，就是被引用的私有变量不能被销毁，增大了内存消耗，造成内存泄漏，解决方法是可以在使用完变量后手动为它赋值为null；
②其次由于闭包涉及跨域访问，所以会导致性能损失，我们可以通过把跨作用域变量存储在局部变量中，然后直接访问局部变量，来减轻对执行速度的影响
形参
返回值
• 每个函数都有返回值
function hi(){ console.log('hi') }
hi()
没写 return，所以返回值是 undefined
function hi(){ return console.log('hi') }
hi()
返回值为 console.log('hi') 的值，即 undefined
• 函数执行完了后才会返回
• 只有函数有返回值
1+2 返回值为 3（X）
1+2 值为 3
调用栈
• 什么是调用栈
JS 引擎在调用一个函数前
需要把函数所在的环境 push 到一个数组里
这个数组叫做调用栈
等函数执行完了，就会把环境弹(pop)出来
然后 return 到之前的环境，继续执行后续代码
• 爆栈（栈溢出）
如果调用栈中压入的帧过多，程序就会崩溃
• 例如无限制的递归函数
调用栈最长有多少
function computeMaxCallStackSize() {
try {
return 1 + computeMaxCallStackSize();
} catch (e) {
// 报错说明 stack overflow 了
return 1;
}
}
Chrome 12578
Firefox 26773
Node 12536
函数提升
• 什么是函数提升
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 的糟粕）
this 是隐藏参数
arguments 是普通参数
• 代码
let person = {
name: 'frank',
sayHi(){
console.log(`你好，我叫` + person.name)//this.name
}
}
• 分析
我们可以用直接保存了对象地址的变量获取 'name'
我们把这种办法简称为引用
person.sayHi()
会隐式地把 person 作为 this 传给 sayHi
• 到底哪个对
let person = {
name: 'frank',
sayHi(this){
console.log(`你好，我叫` + this.name)
}
}
person.sayHi()//√
person.sayHi(person)//×
省略形式反而对了，完整形式反而是错的？
• JS 怎么解决这种不和谐
提供两种调用形式
• 小白调用法
person.sayHi()
会自动把 person 传到函数里，作为 this
• 大师调用法
person.sayHi.call(person)
需要自己手动把 person 传到函数里，作为 this
• 应该学习哪种？
学习大师调用法，因为小白调用法早就会了
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])
绑定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
立即执行函数
现在用得少
• 原理
ES 5 时代，为了得到局部变量，必须引入一个函数
但是这个函数如果有名字，就得不偿失
于是这个函数必须是匿名函数
声明匿名函数，然后立即加个 () 执行它
但是 JS 标准认为这种语法不合法
所以 JS 程序员寻求各种办法
最终发现，只要在匿名函数前面加个运算符即可
!、~、()、+、- 都可以
但是这里面有些运算符会往上走
推荐永远用 ! 来解决
