持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情

定义一个函数

具名函数

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})
直接返回对象会出错，需要加个圆括号

函数的要素

调用时机
作用域
闭包
形式参数
返回值
调用栈
函数提升
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

作用域

a的作用域在{ }内：

function fn(){
  let a = 1
}
fn()
console.log(a) // a不存在

全局变量：

在顶级作用域声明的变量是全局变量
window 的属性是全局变量
其他都是局部变量

函数可嵌套，作用域也可嵌套

function f1(){
  let a = 1 //这个打括号内是a=1的作用域
  
  function f2(){
    let a = 2
    console.log(a)//这个{}内为a=2的作用域
  }

  console.log(a) 
  a = 3
  f2()//a=2
}
f1()//a=1

如果多个作用域有同名变量 a
那么查找 a 的声明时，就向上取最近的作用域
简称「就近原则」
查找 a 的过程与函数执行无关
但 a 的值与函数执行有关

闭包

如果一个函数用到了外部的变量
那么这个函数加这个变量
就叫做闭包
左边的 a 和 f3 组成了闭包

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 hi(){ console.log('hi') }
hi()
没写 return，所以返回值是 undefined

function hi(){ return console.log('hi') }
hi()
返回值为 console.log('hi') 的值，即 undefined

函数执行完了后才会返回

调用栈

什么是调用栈

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 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

用 this 获取还未创建的对象

let person = {
  name: 'frank',
  sayHi(this){
    console.log(`你好，我叫` + this.name)
  }
}
person.sayHi()

相当于
person.sayHi(person)
然后 person 被传给 this 了（person 是个地址）
这样，每个函数都能用 this 获取一个未知对象的引用了

两种调用方法

person.sayHi()
会自动把 person 传到函数里，作为 this
person.sayHi.call(person)
需要自己手动把 person 传到函数里，作为 this

例1

function add(x,y){
  return x+y
}

没有用到 this
add.call(undefined, 1,2) // 3

为什么要多写一个 undefined
因为第一个参数要作为 this
但是代码里没有用 this
所以只能用 undefined 占位
其实用 null 也可以

绑定 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 程序员寻求各种办法
最终发现，只要在匿名函数前面加个运算符即可
!、~、()、+、- 都可以
但是这里面有些运算符会往上走
所以方方推荐永远用 ! 来解决

JavaScript函数