JS 函数

函数是对象

定义一个函数 -- 四种方法

具名函数

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. 函数调用

函数自身

let fn = () => console.log('hi')

  fn
  结果
  不会有任何结果
  因为 fn 没有执行

函数调用 -- fn()

函数的要素

每个函数都有这些东西

调用时机
作用域
闭包
形式参数
返回值
调用栈
函数提升
arguments（除了箭头函数）
this（除了箭头函数

调用时机 -- 时机不同结果不同

作用域 -- 每个函数都会默认创建一个作用域

全局变量 & 局部变量

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

函数可以嵌套

作用域也可嵌套

作用域规则

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

闭包

function f1(){
  let a = 1
  function f2(){
    let a = 2          // 闭包 start
    function f3(){
      console.log(a)
    }                  // 闭包 end
    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
}

返回值

每个函数都有返回值

function hi(){ console.log('hi') }
hi()

// 没写 return，所以返回值是 undefined

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

函数执行完了后才会返回
只有函数有返回值 1+2 返回值为 3 xxx
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

先递进，再回归

递归函数的调用栈

递归函数的调用栈很长
- 请画出阶乘(6) 的调用栈
调用栈最长有多少


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 - 每个函数都有，除了箭头函数

this 是隐藏参数（个人认为）
arguments 是普通参数

假如没有 this

代码

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

-> 分析
我们可以用直接保存了对象地址的变量获取 'name'
我们把这种办法简称为引用
-> 再分析
person 如果改名，sayHi 函数就挂了
sayHi 函数甚至有可能在另一个文件里面
所以我们不希望 sayHi 函数里出现 person 引用
class 代码-解决

class Person{
  constructor(name){
    this.name = name 
    // 这里的 this 是 new 强制指定的
  }
  sayHi(){
    console.log('？')
  }
}

-> 再分析
这里只有类，还没创建对象，故不可能获取对象的引用
那么如何拿到对象的 name ？
需要一种办法拿到对象
这样才能获取对象的 name 属性
JS 在每个函数里加了 this
- 用 this 获取那个对象

let person = {
  name: 'frank',
  sayHi(){ // sayHi(this)
  console.log(`你好，我叫` + this.name)
  }
}
// person.sayHi()
// 相当于
// person.sayHi(person)
// 然后 person 被传给 this 了（person 是个地址）

// 这样，每个函数都能用 this 获取一个未知对象的引用了

person.sayHi() 会隐式地把 person 作为 this 传给 sayHi
方便 sayHi 获取 person 对应的对象

this 的两种使用方法

person.sayHi() - person.sayHi.call(person)

隐式传递


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

bind 绑定 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)

箭头函数 - 没有 arguments 和 this

里面的 this 就是外面的 this
console.log(this) // window
let fn = () => console.log(this) fn() // window
就算你加 call 都没有
fn.call({name:'frank'}) // window

特例之立即执行函数 - 只有 JS 有的变态玩意，现在用得少

原理

ES 5 时代，为了得到局部变量，必须引入一个函数
但是这个函数如果有名字，就得不偿失
于是这个函数必须是匿名函数
声明匿名函数，然后立即加个 () 执行它
但是 JS 标准认为这种语法不合法
所以 JS 程序员寻求各种办法
最终发现，只要在匿名函数前面加个运算符即可
!、~、()、+、- 都可以
但是这里面有些运算符会往上走
所以推荐永远用 ! 来解决

JS笔记之函数