函数的定义与要素
函数定义
-
具名函数
function 函数名（形式参数1，形式参数2）{
语句
return 返回值
} -
匿名函数
去掉函数名就是匿名函数
声明一个变量把它赋值为函数表达式，a只是容纳了它的地址
let a = function(x,y){return x+y}
声明变量=函数表达式 -
箭头函数
let f1 = x => x乘x //x是输入右边是输出
let f2 = (x,y)=>x*y // 多个参数
let f3 = (x,y)=>{console.log('hi')
return x+y}如果有花括号需要写return
接受一个值x 返回一个对象
花括号优先被认成块作用域，必须加个小括号告诉他是一个对象
let f4 = x =>({name:x}) -
构造函数(所有函数都是Function构造出来的包括Object/Array/Function)
let f = new Function('x','y','return x + y') - fn和fn()
fn是函数自身，
fn()调用函数
函数要素
- 调用时机
- 作用域
- 闭包
- 形式参数
- 返回值
- 调用栈
- 函数提升
- arguments（箭头函数除外）
- this(箭头函数除外)
- call指定this
- 立即执行函数
调用时机
时机不同 结果不同
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)
}
打印出6个6
为什么明明setTimeout的时间设置为了0，还是打印出6个6？
在 js 中，定时器是一个异步任务。 JS 会优先执行当前的同步任务，在同步代码执行结束后才会去处理任务队列中的异步任务。这样，即便定时器设置了0，也是在忙完手头的事情之后才会去读取任务队列。
JS 有同步任务和异步任务。
同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指：不进入主线程、而进入"任务队列"的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
for(let i = 0; i < 5; i++) {
setTimeout(function () {
console.log(i);
});
}JS在for和let一起用的时候加了一些东西所以
打印出 0 1 2 3 4，
每次循环会多创建一个i
作用域
每个函数都会创建一个作用域
function fn(){
let a = 1
}
console.log(a)//a 不存在，访问不到作用域里面的a
let 作用域就在它最近的花括号里
全局变量：
- 在顶级作用域声明的变量是全局变量
- 挂到window上的属性是全局变量
比如Object可以直接用，也可以自己写window.c=xxx。
局部变量：
- 函数里声明lety或const就是一个局部变量，出了作用域不生效。
作用域规则：
如果多个作用域有同名的变量a
- 查找a的声明时，向上取最近的作用域（就近原则）
- 查找a的过程与函数执行无关,但a的值与函数的执行有关。
静态作用域：
- 函数的作用域在函数定义时就已经确定了，跟函数执行没有关系。
- 函数的作用域在运行时才确定，跟函数执行有关系。
var value = 1;
function foo() {
console.log(value);
}
function bar() {
var value = 2;
foo();
}
bar();
JavaScript采用静态作用域的方式访问变量,所以打印出1.
JavaScript之静态作用域 - 简书 (jianshu.com)
闭包：JS函数会就近寻找最近的变量
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()
如果一个函数用到了外部的变量，那么这个函数加这个变量就叫做闭包。上面f2中的a和f3组成闭包。
形式参数
形式参数的意思就是非实际参数
let a = 1
let b =2
function add(x, y){
x+1
y+2
return x+y
}
其中x和y就是形参，因为并不是实际的参数
add(a,b)
调用 add 时，a 和 b 是实际参数，会被赋值给 x y
- JS传参
传值：在上面的代码中，a和b在赋值给x、y的时候，会被复制一份传进去。函数中对形参的修改并不会影响到实际参数本身。函数执行完后还是a =1 b =2。
传址：但是传递的参数时对象时。此时传进去的就是对象的地址，对对象做出的修改会影响到对象本身。
其实无所谓传值和传址。就是把stack内存中的东西复制过去而已。
形参可认为是变量声明。上面代码近似等价于下面代码。
function add(){
var x=arguments[0]//参数的第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 first() {
console.log('first')
function second() {
console.log("second")
}
second();
third();
}
function third() {
console.log("third")
}
// 调用 first
first();
调用的是函数 first, 此时 first 进入函数栈，接着在 first 中调用函数 second,second 入栈，当 second 执行完毕后，second 出栈，third 入栈，接着 third 执行完出栈，执行 first 其他代码，直至 first 执行完，函数栈清空。
调用栈
递归函数：
阶乘
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
先递进，后回归
- 递归的调用栈
1、进入f(4)并压栈
2、得到4 * f(3) 进入f(3)并压栈（把4也记录下来）
3、得到3 * f(2) 进入f(2)并压栈（把3也记录下来）
4、得到2* (1)进入f(1)并压栈（把2也记录下来）
5、得到1
6、弹栈2得到2
7、弹栈3得到6
8、弹栈4得到24
9、弹栈回到第一行 - 我们可以看到f(4)压栈4次
- 所以f(10000)压栈10000次
爆栈：如果调用栈中压入的帧过多，程序就会崩溃
栈的长度：
function computeMaxCallStackSize(){
try{
return 1+ computeMaxCallStackSize()
}catch(e){
//报错说明 stack overflow
return 1
}
}
函数提升
定义：
不管你把具名函数function fn(){}声明在哪里，它都会跑到第一行。
这种不行
let fn = function(){}
这是赋值，右边的匿名函数声明不会提升
let不允许有一个函数add的时候再声明一个add,var可以：
let add = 1
function add(){}
报错
var add = 1
function add(){}
console.log(add)
此时add是1
arguments和this
每个函数都有，除了箭头函数
argements:
- 包含所有参数的伪数组
- 通过array.from 可以把它变为数组
- 调用fn即可传arguments
- fn(1,2)那么arguments就是【1，2】伪数组
打印出来看一下
function fn（）{console.log(arguments)}
arguments
this
- 打印出来看一下
function fn（）{console.log(this)} - 我们发现如果单纯打印this不给任何条件的情况下this默认指向window
如何传this和arguments
- 使用fn.call(1,2,3,4)传this和arguments
1是this(第一个参数) 2,3,4是arguments - xxx如果不是对象JS会自动把他转化成对象（JS糟粕）
- 在函数中加'use strick'即可制止
自动转成对对象
use strick
this要解决的问题： - 我们写一个函数的时候需要得到一个对象
- 但是不知道对象的名字，可能那个对象还没出生
- 怎样在不知道一个对象的名字情况下拿到对象的引用
let sayHi = function(){
console.log(person.name)
}
我在写这个函数之前我怎么能确定后面这个变量是person呢
let person = {
name:'frank',
'sayHi':sayHi
}
如果我person改名字了，sayHi函数就挂了
sayHi甚至可能在另一个文件中
所以我们不希望sayHi函数出现person的引用
class Person{
constructor(name){
this.name = name//这里this强制指定的
}
sayHi(){
console.log(???)
}
}
这里只有类，还没有创建对象，故不可能拿到对象的引用
JS是如何解决问题的
- JS在每个函数里加了this
- 在任何函数里面可以用this获取那个你目前还不知道名字的对象
let person = {
name:'frank',
sayHi(){
console.log(this.name)
这里的this就表示以后出现的那个对象
}
}
- person.sayHi()相当于person.sayHi(person)然后person地址被传给了this
- person.sayHi()会隐式地把person作为this传给sayHI，方便sayHi获取person对应的对象
函数的两种调用方法
- person.sayHi()会自动把person传到函数里作为this
- person.sayHi.call(person)手动把person传到函数里作为this（推荐）
call指定this
call
this写foreach
foreach
1
2
默认把array当作this
foreach
this就是一个参数而已，我传什么就是什么默认就是array
this的两种使用方法
- 隐式传递
fn（1，2）=== fn.call(undefined,1,2)
obj.child.fn(1) ===等价于obj.child.fn.call(obj,child,1) - 显示传递 call apply
fn.call(undefined,1,2)
fn.apply(undefined,[1,2])
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'})
其他参数
let f3 = f1.bind({name:'frank'},'hi')
f2()===f1.call({name:'frank'},'hi')
箭头函数
没有arguments和this
箭头函数里面的this就是外面的this加call也没用
- console.log(this) //this是window
- let a = ()=> console.log(this)
a() //还是window - a.call(1) //还是window
立即执行函数（没啥用）
- 以前只有var的时候 如果想声明一个局部变量必须在一个函数里声明才是局部（所以现在直接let就好了）
- 我就想要一个局部变量不想要全局函数
-
采用匿名函数并直接调用，会报错所以前面加个！
立即执行函数
