JS函数

StevenUV
111 阅读3分钟

1. 定义一个函数

  • 具名函数
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 也是

2. 函数自身和函数调用

  • 函数自身 fn
let fn = () => console.log('hi')
fn

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

  • 函数调用 fn()
let fn = () => console.log('hi')
fn()

会打印出'hi'

3. 函数的要素

3.1 调用时机

  • JS函数的调用时机
let a = 1
function fn(){
  console.log(a)
}

会打印出：不知，因为没有调用代码

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

a = 2
fn()

会打印出：2

3.2 作用域

  • 全局变量和局部变量

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

function fn(){
  let a = 1
}
fn()
console.log(a) // a 不存在（访问不到作用域里的a）
  • 作用域规则

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

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

3.3 闭包

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

3.4 形式参数

  • 形式参数的意思就是非实际参数
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
}

3.5 返回值

  • 每个函数都有返回值，且只有函数才有返回值，函数执行完了后才会返回
function hi(){ console.log('hi') }
hi()
没写 return，所以返回值是 undefined

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

返回值为 console.log('hi') 的值，即 undefined

3.6 调用栈

  • 调用栈

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

  • 调用栈最长有多少
function computeMaxCallStackSize() {
  try {
    return 1 + computeMaxCallStackSize();
  } catch (e) {
    // 报错说明 stack overflow 了
    return 1;
  }
}

Chrome 12578；Firefox 26773；Node 12536

  • 爆栈

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

3.7 函数提升

  • function fn(){} 无论具名函数声明在哪里，它都会跑到第一行
  • let fn = function(){} 这是赋值，右边的匿名函数声明不会提升

3.8 arguments和this

  • 除了箭头函数，每个函数都有arguments和this
  • 调用 fn 即可传 arguments
  • fn(1,2,3) 那么 arguments 就是 [1,2,3] 伪数组
  • 目前可以用 fn.call(xxx, 1,2,3) 传 this 和 arguments，而且 xxx 会被自动转化成对象
  • this 是隐藏参数，arguments 是普通参数
  • 用this获取对象的引用
let person = {
  name: 'frank',
  sayHi(this){
    console.log(`你好，我叫` + this.name)
  }
}
person.sayHi()
相当于
person.sayHi(person)
然后 person 被传给 this 了（person 是个地址）

这样，每个函数都能用 this 获取一个未知对象的引用了
  • this的使用方法
fn(1,2) // 等价于 fn.call(undefined, 1, 2)
obj.child.fn(1) // 等价于 obj.child.fn.call(obj.child, 1)

4. 箭头函数

里面的 this 就是外面的 this

console.log(this) // window

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

fn.call({name:'frank'}) // window

5. 立即执行函数

  • 用途：得到局部变量

  • 方法：在匿名函数前面加个运算符!、~、()、+、-即可，推荐加!

标注：以上内容部分参考饥人谷，侵删。

avatar
文章
阅读
粉丝