JavaScript 函数文字

JavaScript是一门很强大的语言，它支持很多高级特性，其中一个非常常用的就是函数。在JavaScript中，函数是一种可复用的代码块，它可以被调用多次，且每次调用时都可以传递不同的参数。在这篇文章中，我们将会深入探讨JavaScript中的函数的一些细节和注意事项。

函数声明

在JavaScript中，一个函数可以通过函数声明或函数表达式的方式来创建。函数声明的语法如下：

function functionName(parameters) {
  // function body
}

其中，function 是一个关键字，紧接着是一个函数名，括号里面的 parameters 是可选的，它们是函数的参数。一个简单的函数声明的例子如下所示：

function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

在上面的代码中，我们定义了一个名为 sayHello 的函数，它接收一个参数 name，并输出一条问候信息到控制台。

函数表达式

除了函数声明，我们还可以使用函数表达式来创建一个函数。函数表达式可以看作是一个变量，它存储了一个匿名函数，如下所示：

const functionName = function(parameters) {
  // function body
};

这里的 functionName 是一个变量，它存储了一个匿名函数。与函数声明不同的是，函数表达式中的函数名是可选的。一个简单的函数表达式的例子如下所示：

const sayHello = function(name) {
  console.log(`Hello, ${name}!`);
};

箭头函数

在ECMAScript 6（以下简称ES6）中，引入了一个新的函数类型——箭头函数。箭头函数是一种更加紧凑的函数定义方式，它使用箭头符号 => 来分隔函数参数和函数体，如下所示：

const functionName = (parameters) => {
  // function body
};

箭头函数的一个简单例子如下所示：

const sayHello = (name) => {
  console.log(`Hello, ${name}!`);
};

如果箭头函数的函数体只有一行，则可以省略花括号和 return 关键字，如下所示：

const sayHello = (name) => console.log(`Hello, ${name}!`);

当箭头函数只有一个参数时，甚至可以省略括号，如下所示：

const sayHello = name => console.log(`Hello, ${name}!`);

命名函数表达式

除了匿名函数表达式之外，JavaScript还支持一种更加神奇的函数类型——命名函数表达式。命名函数表达式不同于函数声明，但是它们可以具有名称。命名函数表达式的语法如下：

const functionName = function namedFunction(parameters) {
  // function body
};

其中，functionName 是函数的变量名，而 namedFunction 是函数的名称。在命名函数表达式中，函数名称只能在函数体内部使用，它不会成为函数的全局标识符。

const sayHello = function greet(name) {
  console.log(`Hello, ${name}!`);
};
console.log(typeof greet); // "undefined"

默认参数值

在JavaScript中，函数参数可以有默认值。如果调用函数时没有传递对应参数的值，那么函数会使用默认的参数值。下面是一个具有默认参数值的函数示例：

function sayHello(name = 'World') {
  console.log(`Hello, ${name}!`);
}
sayHello(); // 输出：Hello, World!
sayHello('JavaScript'); // 输出：Hello, JavaScript!

我们可以在函数参数列表中为每个参数指定默认值，如果调用函数时没有传递对应参数的值，函数会使用它们的默认值。例如：

function createPerson(name = 'John Doe', age = 30, gender = 'Male') {
  return {
    name,
    age,
    gender
  };
}
console.log(createPerson()); // {name: "John Doe", age: 30, gender: "Male"}
console.log(createPerson('Jane', 25, 'Female')); // {name: "Jane", age: 25, gender: "Female"}

在这个例子中，我们定义了一个 createPerson 函数，它接收三个参数，分别是 name、age 和 gender。如果没有为这些参数提供任何值，则它们都将被初始化为默认值。

可变参数

在JavaScript中，函数的参数数量是固定的。然而，有时候我们需要调用函数时传递的参数数量是可变的。ES6提供了一种新的语法来实现这一特性，称为可变参数。

可变参数使用三个点（...）来表示。函数声明中的可变参数会被组合成一个数组，允许我们在调用函数时传递任意数量的参数。例如：

function sum(...numbers) {
  let result = 0;
  for (let number of numbers) {
    result += number;
  }
  return result;
}
console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7, 8)); // 30

在这个例子中，我们定义了一个 sum 函数，它接收任意数量的参数。在函数体内，我们遍历该参数数组，并将每个元素相加，最后返回结果。可以看到，我们可以传递任意数量的参数给该函数。

回调函数

回调函数是JavaScript中很常见的概念。在JavaScript中，函数也可以用作参数，被称为回调函数。回调函数可以被其他函数调用，这意味着，在它们被调用之前，它们不会执行。

一个常见的场景是，在处理异步操作时，很多函数会接受另一个函数作为回调。例如，setTimeout 函数就是一个例子：

setTimeout(function() {
  console.log('Hello, World!');
}, 2000);

在这个例子中，我们调用了 setTimeout 函数，并传递了一个匿名函数作为回调。该函数会在2秒钟后执行，输出一条欢迎消息。

IIFE

IIFE（Immediately Invoked Function Expression）是一种特殊的JavaScript函数，它会在定义之后立即执行。IIFE有助于防止变量污染，并能够在脚本中创建私有作用域。

IIFE的语法非常简单，只需要在函数声明的末尾添加两对圆括号即可：

(function() {
  // IIFE body
})();

在这个例子中，我们定义了一个IIFE，它没有任何参数。在函数的末尾，我们添加了一个立即执行的函数调用。这个函数会在定义后立即执行，然后它的结果会被赋值给 result 变量。由于IIFE在执行后会自动销毁，因此它不会对其他代码造成影响。

闭包

闭包是一种特殊的函数，它可以访问函数定义时所处作用域中的变量。在JavaScript中，每当创建一个新函数时，都会创建一个新的作用域。作用域中的变量可以被该函数和其后代函数（嵌套函数）访问。

这种情况下，嵌套函数可以使用父级函数作用域中的变量。当父级函数执行完毕后，它的作用域会被销毁，但是嵌套函数还可以继续访问它们需要的变量。这种情况下，我们称嵌套函数为闭包。

下面是一个简单的闭包例子：

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

const double = multiplier(2);
console.log(double(5)); // 10

在这个例子中，我们定义了一个 multiplier 函数，它接收一个 factor 参数。这个函数返回了一个新的函数，这个函数接受一个 number 参数。

我们调用 multiplier 函数，传递参数 2，并将结果存储在 double 变量中。我们然后调用 double 函数，并传递 5 作为参数。因为 double 函数是嵌套在 multiplier 函数中的，所以它可以访问 factor 参数。

在这个例子中，double 函数是一个闭包。它可以访问它的父级函数 multiplier 中的 factor 参数变量。

this 关键字

在JavaScript中，this 关键字引用了函数执行时所处的上下文对象。上下文对象是调用函数的对象。在函数内部，this 可以用于访问上下文对象的属性和方法。

例如，如果在对象方法中使用 this，那么它会引用该对象：

const person = {
  name: 'John Doe',
  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
};
person.sayHello(); // 输出 "Hello, John Doe!"

在这个例子中，我们定义了一个名为 person 的对象，它有一个 name 属性和一个 sayHello 方法。当我们调用 sayHello 方法时，this 关键字会引用 person 对象。因此，我们可以使用 this.name 来访问 person 的 name 属性。

API方法中的 this:

如果在函数内部没有使用 this，那么它将引用全局对象（浏览器中的 window 对象）。

function logName() {
  console.log(this.name);
}
const person1 = { name: 'John Doe' };
const person2 = { name: 'Jane Doe' };
logName.call(person1); // 输出 "John Doe"
logName.call(person2); // 输出 "Jane Doe"

在这个例子中，我们定义了一个名为 logName 的函数，它没有任何参数。我们然后定义了两个不同的对象 person1 和 person2。

我们使用 call 方法调用 logName 函数，并将 person1 和 person2 传递给它。在这种情况下，this 关键字会被设置为 person1 和 person2 对象。因此，console.log 语句会正确地输出 person1 和 person2 的名称。