函数

@Function
思维导图

概述 Overview

Functions are blocks of code designed to perform a specific task and can be executed when called.

函数定义 Defining functions

函数声明 function declaration

函数表达式 Function Expression

没有重载；后定义的同名函数会覆盖先定义的函数
每个函数都是 Function 类型的实例，而且都与其他引用类型一样具有属性和方法
由于函数是对象，因此函数名实际上也是一个指向函数对象的指针，不会与某个函数绑定
将函数名想象为指针，也有助于理解为什么 ECMAScript 中没有函数重载的概念
解析器会率先读取函数声明/预处理 - 提升 hoisting，并使其在执行任何代码之前可用/可访问
函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解释执行

函数调用 Function calling

[] 示例

其它函数 Other

箭头函数 Arrow function

.事件侦听中，如果使用箭头函数，则 this 指的是的 window，不再是事件对象
btn.addEventListener('click', () => {
  console.log(this);//window
})

btn.addEventListener('click', function () {
  console.log(this);//具体的事件对象，如按钮 button
})

立即执行函数 IIFE

  1. 使用普通函数
    2. ;(function() {
  // 函数体
})();
  2. 使用箭头函数
    3. ;(()=> {
// 函数体
})();
  3. 使用异步等待 async-await 加载数据 Fetch、Supabase.com
    4. ; (async () => {
  let res = await fetch('https://glpla.github.io/utils/data/coffee.json')
  let data = await res.json()
  console.log(data)
})();

递归函数 Function

[] 输入一个小于10的数字，求其阶层n!
function fn(n) {
  // if (n == 0) {
  //   return 1;
  // } else {
  //   return n * fn(n - 1);
  // }
  return n == 0 ? 1 : n * fn(n - 1);
}
[] 输入一个小于10的数字，求其斐波那契数列Fibonacci sequence：f(n)=f(n-1)+f(n-2); n≥2; f(0)=1; f(1)=1; 
function fn(n) {
  if (n == 0 || n == 1) {
    return 1;
  } else {
    return fn(n - 1) + fn(n - 2);
  }
}
[] 数组扁平化 flat()- 将2维数组或多维数组都处理为1维数组
. 可以封装在对象原型函数prototype上
  1. 创建空数组
  2. 遍历每一个数据项，如果也是数组，就继续深入遍历
  3. 如果不是数组，是一个普通数据，就添加到空数组
  4. 返回创建的数组，实现数组扁平化
Array.prototype.flat = function () {
  let flatArr = []
  for (let item of this) {
    if (Array.isArray(item)) {
      flatArr = flatArr.concat(item.flatArr())
    } else {
      flatArr.push(item)
    }
  }
  return flatArr;
}
[] 数组去重 - unique()

纯函数 Pure function

  1. 确定性

    2. .相同的输入始终得到相同的输出

    .大多数的操作都是以数组为对象，所以后续各例都以数组为例

    .如果一个函数的执行会修改到数组，则这个函数不是纯函数

    .如果一个函数没有参数，那它就不是纯函数

  2. 无副作用

    3. .不会修改外部环境，如全局变量

[] slice(start, end)：返回一个拷贝，从start开始到end结束，不包括end；是纯函数
[] splice(start, count)、 revers()、sort() ：不是纯函数

函数的函数

闭包 Closure

const singleton = (function () {
  let instance;
  
  return function () {
    if (!instance)
      //创建instance
    return instance
  }
})()

给变量赋值/返回值

. 执行其它函数/闭包函数获取返回值
let a;
function fa() {
    let tmp = 10;
    return function res() {
        return tmp;
    }
}
a = fa();
console.log(a());
. 还可以携带参数
function fb() {
    let a = 10;
    return function res(inc) {
        a += inc;
        return a;
    }
}
let b = fb();
console.log(b(2));
console.log(b(2));

给函数赋值

. 执行一个其它函数/闭包函数来给某个函数赋值；和上述略有不同
let fn;
function assign() {
    let tmp = 12;
    fn = function () {
        return tmp;
    }
}
assign();
console.log(fn());
[] 统计函数调用次数

内部属性和方法

arguments

. 它是一个类数组对象，包含着传入函数中的所有参数

length

[] 查看形参和实参
function fn(a, b) {
  console.log(fn.length);//2 - 形参个数为2
  console.log(arguments.length)//4 - 实际传入4个参数
}

fn(1, 2, 3, 4)

this

prototype

apply()

call()

bind()