JS函数

芝麻凛 2021年08月20日 121次浏览

函数是对象

定义一个函数

具名函数

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 （除了箭头函数）

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

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

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

例子1

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

例子2

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

全局变量 V.S. 局部变量

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

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

例子3

function f1(){
	let a = 1
	function f2(){
		let a = 2
		console.log(a)
	}
	console.log(a)
	a = 3
	f2()
}
f1()

作用域规则

如果多个作用域有同名变量a

  • 那么查找a 的声明时，就向上取最近的作用域
  • 简称[就近原则]
  • 查找a的过程与函数执行无关
  • 但a的值与函数执行有关

例子4

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 add(){
	var x = arguments[0]
	var y = arguments[1]
	return x+y
}

形参可多可少，形参只是给参数取个名字，JS并不要求按照形参传值

返回值

每个函数都有返回值

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 到之前的环境，继续执行后续代码

举例

  • 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 computeMaxCallStackSize(){
	try{
		return 1 + computeMaxCallStackSize();
	}catch(e){
		//报错说明 stack overflow了
		return 1;
	}
}
Chrome 12578
Firefox 26773
Node 12536

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

函数提升

什么是函数提升

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

什么不是函数提升

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

arguments 和 this

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

如果不给任何条件this直接指向window

如何传arguments

  • 调用 fn 即可传 arguments
  • fn(1,2,3) 那么 arguments 就是 [1,2,3] 伪数组

如何传this

  • 目前可以使用 fn.call(xxx,1,2,3) 传this 和 arguments
  • 如果传的this不是对象，那么 xxx 就会被js自动转化成对象（JS的糟粕）

this是隐藏参数，argument是普通参数。

JS在每个函数里加了this

用this获取那个对象

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

person.sayHi() 相当于 person.sayHi(person) 然后person 被传给this了（person 是个地址）

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

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

总结

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

其他

  • 注意person.sayHi() 和 person.sayHi()的区别
  • 注意person.sayHi() 的断句 (person.sayHi) ()

JS提供两种调用方式

小白调用法

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

大师调用法

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

应该学习那种？学习大师调用法，因为小白调用法自己就会。

箭头函数

没有arguments 和 this

里面的this 就是外面的this

  • console.log(this) //window
  • let fn = () => console.log(this)
  • fn() //window

就算加call都没有

  • fn.call({name:’rick’}) //window

立即执行函数

原理

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