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')
let fn2 = fn
fn2()
// hi 

• fn 保存了匿名函数的地址
• 这个地址被复制给了 fn2
• fn2() 调用了匿名函数
• fn 和 fn2 都是匿名函数的引用而已
• 真正的函数既不是 fn 也不是 fn2

函数的要素

每个函数都有

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

调用时机

 时机不同，结果不同

作用域

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

全局变量 vs 局部变量

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

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

作用域规则

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

闭包

• 如果一个函数用到了外部的变量
• 那么这个函数加这个变量 就叫做闭包

形式参数

• 形式参数的意思就是非实际参数

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 引擎在调用一个函数前
• 需要把函数所在的环境推 (push) 到一个数组里
• 这个数组叫做调用栈
• 等函数执行完了，就会把环境弹 (pop) 出来
• 然后 return 到之前的环境，继续执行后续代码

递归函数

阶乘

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

先递进，再回归

递归函数的调用栈很长

• Chrome 12578
• Firefox 26773
• Node 12536

爆栈

如果调用栈中压入的帧过多，程序就会崩溃，这叫做爆栈

函数提升

什么是函数提升

• function fn(){}
• 不管你把具名函数声明在哪里，它都会跑到第一行

什么不是函数提升

• let fn = function(){}
• 这是赋值，右边的匿名函数声明不会提升

arguments 和 this

每个函数都有 arguments 和 this，除了箭头函数

function fn() {
    console.log(arguments)   console.log(this)
}

如何传 arguments

• 调用 fn 即可传 arguments
• fn(1,2,3) 那么 arguments 就是 [1,2,3] 伪数组
• arguments 是包含所有参数的伪数组
• Array.from() 可以把任何非数组变为数组

function fn() {
    console.log(arguments)
}
fn()
// Arguments[callee: ƒ, Symbol(Symbol.iterator): ƒ]
   callee: ƒ fn()
   length: 0
   Symbol(Symbol.iterator): ƒ values()
   __proto__: Object

如何传 this

• 如果不给任何的条件，this 默认指向 window
• 如果传的 this 不是对象 ，JS 会自动封装成对象
• 添加 'use strict' 就不会有上述问题
• 目前可以用 fn.call(xxx, 1,2,3) 传 this 和 arguments
• 而且 xxx 会被自动转化成对象

function fn() {
    console.log(this)
}
fn()
// Window { window: Window, self: Window, document: document,
   name: "", location: Location, … }

fn.call(1)
// Number {1}
   __proto__: Number
   [[PrimitiveValue]]: 1

function fn(){
     'use strict'
     console.log(this)
}
fn.call(1)
// 1

• this 是隐藏参数 arguments 是普通参数

JS 在每个函数里加了 this

用 this 获取那个对象

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

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

相当于

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

• 我们想让函数获取对象的引用
• 但是并不想通过变量名做到
• Python 通过额外的 self 参数做到
• JS 通过额外的 this 做到：
• person.sayHi() 会把 person 自动传给 sayHi, sayHi 可以通过 this 引用 person
• 注意 person.sayHi 和 person.sayHi() 的区别
• 注意 person.sayHi() 的断句 (person.sayHi) ( )

两种调用方法

小白调用法

• person.sayHi() 会自动把 person 传到函数里，作为 this

大师调用法

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

例1

function add(x,y){
  return x+y
}
add.call(undefined, 1,2)
// 3

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

例2

Array.prototype.forEach2 = function(fn){
  for(let i=0;i<this.length;i++){
    fn(this[i], i, this)
  }
}

this 是什么

• 由于大家使用 forEach2 的时候总是会用 arr.forEach2
• 所以 arr 就被自动传给 forEach2 了

this 一定是数组吗

• 不一定，比如

Array.prototype.forEach2.call({0:'a',1:'b'})

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)

箭头函数

没有 arguments 和 this

里面的 this 就是外面的 this

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

立即执行函数

原理

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

*本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源