函数

在 JavaScript 中,有两种主要声明函数的方式,其中之一是使用 function 关键字。

基本用法

function fn(a, b) {
  const sum = a + b;
  return sum;
}
console.log(f(3, 4)); // 7

f 是函数的名称。 (a, b) 是参数。你可以在函数体中编写任何逻辑,最后返回一个结果。你也可以返回 undefined ,它将隐式返回。

匿名函数

var f = function(a, b) {
  const sum = a + b;
  return sum;
}
console.log(f(3, 4)); // 7

function 关键字后面省略了函数的名称,与基本用法相似。

立即调用的函数表达式 (IIFE)

const result = (function(a, b) {
  const sum = a + b;
  return sum;
})(3, 4);
console.log(result); // 7

这个函数在创建后就会立即执行,这样做可以把变量 封装 在新的 作用域 内。如果这样做,另一个开发人员就可以立即了解到 sum 无法在函数体外部的任何地方使用。

函数内的函数

JavaScript 的一个强大特性是你可以直接在其他函数内创建函数,并且反复调用。

function createFunction() {
  function f(a, b) {
    const sum = a + b;
    return sum;
  }
  return f;
}
const f = createFunction();
console.log(f(3, 4)); // 7

createFunction() 返回了一个新的函数。然后该函数就可以像普通函数一样使用。我们可以通过这种方式来统一设置某些函数

函数提升

JavaScript 具有一个称为 提升(hoisting) 的功能,其中函数有时可以在初始化之前使用。只有在使用 function 语法声明函数时才能这样做。

function createFunction() {
  return f;
  function f(a, b) {
    const sum = a + b;
    return sum;
  }
}
const f = createFunction();
console.log(f(3, 4)); // 7

函数在初始化之前被返回。虽然这是有效的语法,但有时会被认为是不好的写法,因为它可能会降低代码的可读性。

闭包

JavaScript 中一个重要的主题是闭包的概念。当创建函数时,它可以访问其周围声明的所有变量,也被称为词法环境。函数和其环境的组合称为闭包。这是该语言中一个强大且常用的特性。

function createAdder(a) {
  function f(b) {
    const sum = a + b;
    return sum;
  }
  return f;
}
const f = createAdder(3);
console.log(f(4)); // 7

在这个示例中,createAdder 传递第一个参数 a,而内部函数可以访问它。这样,createAdder 充当了新函数的工厂,每个返回的函数具有不同的行为。

箭头函数语法

另一种常见的声明函数的方式是使用箭头语法。实际上,在许多项目中,这都是首选的语法。

const f = (a, b) => {
  const sum = a + b;
  return sum;
};
console.log(f(3, 4)); // 7

在这个示例中,f 是函数的名称。(a, b) 是参数。你可以在函数体中编写任何逻辑,最后返回一个结果。你也可以选择返回 undefined ,在这种情况下 undefined 将隐式返回。

省略 return

如果你的代码可以编写在一行中,你可以省略 return 关键字。这可以让我们得到非常简短的代码。

const f = (a, b) => a + b;
console.log(f(3, 4)); // 7

箭头语法和函数语法之间有 3 个主要区别

  1. 更简洁的语法。对于匿名函数和单行函数来说尤其如此。因此,在将短的匿名函数传递给其他函数时,通常优先使用这种方式。

  2. 没有自动提升。只有在声明后才能使用函数。这通常被认为有助于提升可读性。

  3. 不能绑定到 this 、 super 和 arguments ,也不能用作构造函数。这些都是复杂的主题,但基本结论应该是箭头函数在其特性集方面更简单。

剩余参数

你可以使用 剩余 语法来将所有传递的参数作为数组访问。

function f(...args) {
  const sum = args[0] + args[1];
  return sum;
}
console.log(f(3, 4)); // 7

变量 args[3, 4]

作用

这个语法的用途可能并不明显,因为你总是可以通过传递一个数组获得相同的结果。

剩余参数的主要用途是创建通用的工厂函数,接受任何函数作为输入,并返回带有特定修改的新版本函数。

另外,接受函数并/或返回函数的函数称为 高阶函数 ,它们在 JavaScript 中非常常见。

例如,下面这个工厂函数

function log(inputFunction) {
  return function(...args) {
     console.log("输入", args);
     const result = inputFunction(...args);
     console.log("输出", result);
     return result;
  }
}
const f = log((a, b) => a + b);
f(1, 2); // 输出:输入 [1, 2] 输出 3
posted on 2024-08-20 16:29  XiSoil  阅读(1)  评论(0编辑  收藏  举报