一、函数

1、函数写法

TIP

  JavaScript 语言将函数看作一种值，与其它值（数值、字符串、布尔值等等）地位相同。

  下面看看函数的几种写法（个人习惯于匿名函数的书写方式）：

function add(a, b) {
  return a + b
}

add()

  在后面的 第一公民 部分我们可以知道函数可以被赋值（函数表达式）：

var subtract = function (a, b) {
  return a - b
}

subtract()

  在后面的 第一公民 部分我们可以知道函数可以被赋值（函数表达式）：

下列的函数名 "fact" 只在函数内部可见

var factorial = function fact(n) {
  return n === 0 ? 1 : n * fact(n - 1)
}

console.log(factorial(5)) // 输出 120

  但是，个人感觉如果这样使用，那还不如直接：

function fact(n) {
  return n === 0 ? 1 : n * fact(n - 1)
}

console.log(fact(5)) // 输出 120

  上面的 声明式函数 和 函数表达式 两种写法有什么区别：

函数声明会被提升到作用域的顶部，因此可以在声明之前调用

回顾：变量提升

  JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。

• 示例

console.log(a) // undefined
var a = 1

• 代码分析

// 真正的执行过程为：
var a

console.log(a)
a = 1

  并且我们要注意的是 函数提升 > 变量提升 的：

console.log(s) // ƒ s() {}
var s = 2
function s() {}
console.log(s) //2

// 正确
subtract(5, 3) // 可以在声明之前调用

function subtract(a, b) {
  return a - b
}

// 错误
subtract(5, 3) // "TypeError: subtract is not a function

var subtract = function (a, b) {
  return a - b
}

2、第一公民

TIP

  函数与其他数据类型地位平等，他可以把函数赋值给变量和对象的属性，也可以当作参数传入其他函数，或者作为函数的return 值，甚至可以存储在数据结构（数组、对象等）中。

  JavaScript 中的函数被认为是“第一类公民”（First-Class Citizens），它具有如下特性：

var add = function (a, b) {
  return a + b
}

function add(x, y) {
  return x + y
}

// 使用方式1
function operate(a, b, callback) {
  return callback(a, b)
}

var result = operate(5, 3, add) // 传递函数作为参数

// 使用方式2
function operate(callback) {
  return callback()
}

var result = operate(add)(5, 3) // 传递函数作为参数

function multiplier(factor) {
  return function (number) {
    return number * factor
  }
}

var double = multiplier(2)(5) // 返回 10

var functionsArray = [
  add,
  function (a, b) {
    return a - b
  }
]

var result1 = functionsArray[0](5, 3) // 使用数组中的第一个函数
var result2 = functionsArray[1](5, 3) // 使用数组中的第二个函数

3、函数作用域 ✨

  JavaScript 使用大括号{}，将多个相关的语句组合在一起，称为“区块”（block）。

提示

  作用域（scope）指的是变量存在的范围

  对于 var 命令 ✍ 来说，JavaScript 的区块不构成单独的作用域

  在 ES5 的规范中，JavaScript 只有两种作用域：一种是全局作用域，另一种是函数作用域。

  在后来的 es6 语法中，JavaScript 提供了let变量、const变量，它们都是具有块级作用域的。

var a = 3 // 全局作用域

if (typeof a === 'number') {
  var b = 6
  let c = 8 // 块级作用域

  // 内调外
  console.log(a) //  ✔
}

// 外调内
console.log(b) // ✔
console.log(c) // ✖ "ReferenceError: c is not defined

var a = 3 // 全局作用域

function example() {
  var b = 6
  let c = 8 // 块级作用域

  // 内调外
  console.log(a) //  ✔
}
example()

// 外调内
console.log(b) // ✖ "ReferenceError: b is not defined
console.log(c) // ✖ "ReferenceError: c is not defined

面试题 ✍️

• 变量声明提升问题

var x = 6

function example() {
  console.log(x) // undefined
  var x = 5
}
example()

console.log(x) // 6

• 作用域问题

函数本身也是一个值，也有自己的作用域（定义时所在的作用域），与其运行时所在的作用域无关。

var a = 1
var x = function () {
  console.log(a)
}

function f() {
  var a = 2
  x()
}

f() // 1

var a = 1

function f() {
  var a = 2
  function demo() {
    console.log(a)
  }
  demo()
}

f() // 2

4、函数传参

  JavaScript 函数对传递的参数数量没有限制，即使声明时指定的参数个数与实际传递的参数个数不一致也是允许的。

  关于参数个数，个人感觉是，如果参数较多的话，为什么不直接传入一个数组或对象作为参数呢？

arguments 的内容 与 函数调用时传入的参数 保持一致

在严格模式下，对 arguments 对象的修改是不允许的（一般我们也将其看成 只读的）

function example(a, b) {
  // 参数打印
  console.log(a) // 1
  console.log(Array.from(arguments)) // [1, 2, 3]
  console.log(Array.prototype.slice.call(arguments)) // [1, 2, 3]

  // 参数个数
  console.log('参数个数：', arguments.length)
}

example(1) // 参数个数： 1
example(1, 2, 3) // 参数个数： 3

  ES6 引入了函数参数的默认值，允许在声明函数时为参数指定默认值。如果调用函数时未提供对应参数的值，则该参数将取默认值。

通常情况下，默认值参数放在参数列表的末尾

function f(a, b = 1) {
  console.log(a + b)
}

f(1) // 2
f(1, 3) // 4

5、值传递 🚩

  在 JavaScript 中，函数参数的传递是通过值传递的，但对于引用类型的值（对象、数组等），传递的是引用的副本。

  对于基本数据类型（例如数字、字符串、布尔值等），函数传递的是它们的值的副本

let num = 20

function update(value) {
  value = 22
  console.log(value) // 22
}

// 改变num
update(num)

console.log(num) // 20

  对于引用类型（例如对象、数组等），函数传递的是引用的副本

let person = {
  age: 20
}

function update(obj) {
  obj.age = 22
  console.log(obj.age)
}

// 改变age
update(person)

console.log(person.age) // 22

  以上面的引用数据类型为例，修改函数参数的值可能会导致代码难以理解和维护。解决问题的核心就是 —— 避免共享引用，常见的方案如下：

提示

  在《Array 增删改查》章节中的所有数组方法，都是改变了原数组的方法。

• 使用深拷贝
• 改变引用指向
• 使用不可变数据结构（Immutable.js (opens new window)）

let arr = [2, 7, 11]

function update(arr) {
  // 1、使用拷贝
  // const newArr = arr.concat() // 对象的话，可以使用Object.assign({}, obj)
  // const newArr = arr.slice()
  const newArr = [...arr]

  newArr[0] = 6

  // 2、改变引用指向
  // const newArr = [6, 7, 11]

  console.log(newArr) // [6, 7, 11]
}

// 改变内容
update(arr)

console.log(arr) // [2, 7, 11]

二、函数类型

  在开发中，除了常规的函数外，与函数相关的还有：

  IIFE 函数即 立即调用函数表达式

• 文件触发

一个文件作为一个模块

;(function () {
  // 执行一些代码
})()

• 手动触发

一个 IIFE 函数作为一个模块

var f = (function () {
  // 执行一些代码
})()

f

  构造函数 是 JavaScript 中的 原始类写法

function Person(name, age) {
  this.name = name
  this.age = age
}

var person1 = new Person('John', 25)

  JavaScript 中的方法（对象的属性是函数）

var car = {
  brand: 'Toyota',
  start: function () {
    console.log('Car started!')
  }
}

car.start()

  箭头函数是 ES6 新增的语法，可以简化某些情况下的函数写法

var addArrow = (a, b) => a + b

var car = {
  start: function () {
    console.log('Car started!')
  }
}

// 完整写法
var add = function (a, b) {
  return a + b
}

var car = {
  start: () => {
    console.log('Car started!')
  }
}

1、箭头函数

  箭头函数的一大特点就是，它没有自己的 this，它们继承了外部（定义时所在的）作用域的 this 只

因此箭头函数可以解决传统函数中场景的 this 绑定问题。

  更多的，它还有如下特点：

• 是匿名函数
• 无法访问 arguments
• 不建议在构造函数使用

  从本质上讲，箭头函数是闭包，它能够访问定义时所在的词法作用域，而不是调用时所在的作用域。

function arrowFun() {
  let number = 6

  console.log(this) // window

  return () => {
    console.log(number, this) // 6 window
  }
}

arrowFun()()

  普通函数的 this 是由函数的调用者决定，因此普通函数中的 this 的动态的。

  但箭头函数中没有 this，在箭头函数中使用 this 指向定义该函数的外部作用域，是相对固定的。

function normalFun() {
  console.log(this)
}

const arrowFun = () => {
  console.log(this)
}

const obj = {
  property: 'I am an object',
  normalFun: normalFun,
  arrowFun: arrowFun
}

obj.normalFun() // Ojbect
obj.arrowFun() // Window

  箭头函数无法访问 arguments，但我们可以使用 rest 参数（剩余参数）

// 1、普通函数
const printOne = function () {
  return (argsArr = Array.from(arguments))
}
console.log(printOne(1, 2, 3))

// 2、箭头函数
let printTwo = (...args) => {
  return args
}
console.log(printTwo(1, 2, 3))

2、IIFE 函数

  IIFE（Immediately Invoked Function Expression）是 JavaScript 中一种常见的函数表达式，它会立即执行一次。

这种模式有助于创建私有作用域、防止污染全局命名空间，并且允许在函数内部定义变量和函数，而不会影响外部作用域。

  IIFE 内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量

var myModule = (function () {
  // 私有变量和函数
  var privateVar = 'I am private'

  function privateFunction() {
    console.log('I am a private function')
  }

  // 公共变量和函数
  return {
    publicVar: 'I am public',
    publicFunction: function (str) {
      console.log(str + 'I am a public function')
    }
  }
})()

// 使用
console.log(myModule.publicVar)
myModule.publicFunction('Hello, ')

  IIFE 的传参可以用于在函数内部使用外部作用域的值，同时保持函数内的变量不会污染全局作用域

• 数据封装

const myModule = (function ($, window) {
  // 在这里可以使用 $ 和 window，而不污染全局作用域

  return {
    //
  }
})(jQuery, window)

• 传递外部配置

const myLibrary = (function (config) {
  // 在这里可以使用传递进来的配置参数

  return {
    //
  }
})({ option1: 'value1', option2: 'value2' })

3、函数闭包

  函数闭包是指在 JavaScript 中，一个函数（innerFunction）可以访问其外部函数（outerFunction）作用域中的的变量和参数，即使在外部函数执行完毕后，内部函数仍然保持对外部函数（outerFunction）作用域的引用。

拓展阅读：JavaScript 闭包的底层运行机制 (opens new window)

提示

  闭包的使用有点像 react 中的 hook 函数的感觉

function outerFunction() {
  let flag = 'outerVariable'

  function innerFunction() {
    console.log(flag)
  }

  return innerFunction
}

// 1、创建闭包函数
const closureFunction = outerFunction()

// 2、调用闭包函数
closureFunction() // 仍然可以访问 flag

  在特定的情况下，我们可以使用 IIFE 函数 简化函数闭包写法

// 1、创建闭包函数
const closureFunction = (function outerFunction() {
  let flag = 'outerVariable'

  function innerFunction() {
    console.log(flag)
  }

  return innerFunction
})()

// 2、调用闭包函数
closureFunction() // 仍然可以访问 flag

  由于这样的函数调用方式可以访问原函数内部的变量和参数的特性，可以广泛应用于：

function createCounter() {
  let count = 0 // 变量永驻内存

  return function () {
    count++
    console.log(count)
  }
}

const counter = createCounter()
counter() // 输出 1
counter() // 输出 2

counter = null // 手动销毁 🚩

  通过闭包可以创建函数工厂，动态生成函数。

function createLogger(prefix) {
  return function (message) {
    console.log(`[${prefix}] ${message}`)
  }
}

const logError = createLogger('ERROR')
logError('Something went wrong') // 输出 "[ERROR] Something went wrong"

const logInfo = createLogger('INFO')
logInfo('Informational message') // 输出 "[INFO] Informational message"

  柯里化（Currying）是一种函数式编程的技术，它是将一个多参数的函数转换为一系列单参数函数的过程。

// 非柯里化的加法函数
function add(a, b, c) {
  return a + b + c
}

// 柯里化的加法函数
function curryAdd(a) {
  return function (b) {
    return function (c) {
      return a + b + c
    }
  }
}

// 示例：使用柯里化的加法函数
const curriedAdd = curryAdd(1)(2)(3)
console.log(curriedAdd) // 输出 6

应用示例

• 应用示例 1：

for (var i = 0; i < oli.length; i++) {
  oli[i].onclick = (function () {
    // 使用闭包😄
    return function (index) {
      // index不会被销毁
      console.log(index)
    }
  })(i)
}

• 应用示例 2：

mysearch.oninput = (function () {
  // timer放在函数里面
  var timer = null

  return function () {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(function () {
      console.log('发起ajax请求')
    }, 500)
  }
})()

4、定时器函数

  在 JavaScript 中，定时器函数用于在指定的时间间隔内执行代码。有两种主要的定时器函数：setTimeout 和 setInterval。

  在开发中，我们往往需要定时器函数中的 this 指向 函数的调用者

• 方式 1

btn.onclick = function () {
  this.disabled = true

  const timer = setTimeout(() => {
    that.disabled = false
  }, 3000)
}

clearTimeout(timer)

• 方式 2

btn.onclick = function () {
  this.disabled = true
  var that = this

  setTimeout(function () {
    that.disabled = false
  }, 3000)
}

clearTimeout(timer)

  setInterval 不同于 setTimeout 的是，前者是重复执行而不是只执行一次。

let counter = 60

const intervalId = setInterval(function () {
  console.log(`${counter} 秒`)

  counter--

  if (counter < 0) {
    clearInterval(intervalId) // 在满足条件时清除定时器
  }
}, 1000)