JS函数 笔记

PrayWang
85 阅读6分钟

在JS中函数只是一种对象

定义一个函数

具名函数

function 函数名(形式参数1, 形式参数2){
  语句
  return 返回值
}

匿名函数

  • 上面的具名函数，去掉函数名就是匿名函数
  • 一般可写为：
  • let a = function(x,y){ return x+y }的形式
  • 左边是赋值，右边是函数表达式

两者也可以合并 let a = function fn(x,y){ return x+y }
但使用这种方法，fn的作用域就只有等号右边，出了这个范围fn就不存在，其他地方要用这个函数，就只能用a

image.png

箭头函数

  • 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等也是

函数的执行时机

JS函数的执行时机

函数的作用域

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

function fn(){
  let a = 1
}
console.log(a)

这里不会打印出a，就算执行了fn()也不会打印， 因为console.log(a)访问不到作用域里面的a， let的作用域非常好找，往前找一个"{"，往后找一个对应的"}"，let的作用域就在这之间

这也就引出了全局变量和局部变量

全局变量

  • 在顶级作用域声明的变量是全局变量
  • window 的属性是全局变量
  • image.png
  • 这也就是为什么，object,parseInt这些变量可以随处使用，因为它们都在window上

局部变量

  • 除全局变量之外的变量都是局部变量，就像上方的let，它只在它的作用域里可以生效

作用域可嵌套

image.png
根据作用域和函数执行时机，我们可以判断执行f1()打印出的数字是1，2

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

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

再看一个例子：

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

这里会打印出什么？
1,22
因为在f3()中并没有变量a，所以它会向上取最近的作用域f2()中的a，这里的a值为2
但是我们在执行f3()之前，又给a重新赋值了一个新值:22，所以执行f3()打印出的a值为22
而在最外层的f1()中，a的值为1，在下方是先执行console.log(a)之后才重新声明a = 100，所以在这里打印a，值只会是1。

而在这个例子中

  let a = 2
    function f3(){
      console.log(a)
    }

这一部分，就是一个闭包，
如果一个函数用到了外部的变量，那么这个函数加这个变量，就叫做闭包，上面的a和f3组成了闭包
闭包的作用之后边学边总结

形式参数

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

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

image.png
这里hi是打印出来的值，undefined才是console.log('hi')的值
打印值是打印值，返回值是返回值，要注意区分

  • 只有执行了函数，才会有返回值
  • 只有函数有返回值
    • 1+2返回值是3，这种说法错误
    • 1+2值为3，这才是正确说法

调用栈

什么是调用栈

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

举例：

image.png

递归函数

阶乘：

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

先递进，再回归

递归函数的调用栈

image.png

爆栈

如果调用栈中压入的帧过多，程序就会崩溃
调用栈最长有多少？

function computeMaxCallStackSize() {
  try {
    return 1 + computeMaxCallStackSize();
  } catch (e) {
    // 报错说明 stack overflow 了
    return 1;
  }
}

大致统计：

  • Chrome 12578
  • Firefox 26773
  • Node 12536

函数提升

什么是函数提升

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

什么不是函数提升

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

arguments和this

所有函数都有arguments和this, 除了箭头函数

如何传arguments

调用fn即可

image.png

打印出了arguments看似是一个数组，但它不包含数组的原型，所以它是一个伪数组
即如果执行fn(1,2,3)那么arguments就是[1,2,3]伪数组

如何传this

首先，如果不给任何条件，那么this默认指向window，

image.png
我们将this打印出来，可以看到打印出的内容是window
而如果需要指定这个this，目前只能通过call来传this
上图中可以看到，这里传的内容是本来是数字1，但最后却转换成了对象
这也是传this的一个特性：如果传的this不是对象，JS会自动把它封装成对象
想要解决这个问题，需要加一句use strict

image.png
但其实this的这些特性几乎没有人使用

除此之外call还可以传多个值

image.png

如图，JS会把第一个值变为this，后面的值变成arguments

怎么理解this？

理解JS中的this

箭头函数没有this,arguments

里面的this就是外面的this，就算加了call也没用

image.png

image.png

立即执行函数

原理：

  • ES 5 时代，为了得到局部变量，必须引入一个函数
  • 但是这个函数如果有名字，就得不偿失
  • 于是这个函数必须是匿名函数
  • 声明匿名函数，然后立即加个 () 执行它
  • 但是 JS 标准认为这种语法不合法
  • 所以 JS 程序员寻求各种办法
  • 最终发现，只要在匿名函数前面加个运算符即可
  • !、~、()、+、- 都可以
  • image.png
  • 但永远只推荐用!，因为其他运算符都会有或多或少的BUG
avatar
文章
阅读
粉丝