JavaScript中的函数申明、函数表达式、箭头函数

在 JavaScript 中，函数定义有三种方式：函数声明、函数表达式和箭头函数。

函数声明

函数声明是定义一个函数的常见方式，语法如下：

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

其中 add 是函数名，x 和 y 是参数，return 关键字用于返回计算结果。

函数声明有一个重要的特点，就是函数可以在声明之前被调用（也就是函数声明提升）。例如：

console.log(add(2, 3)); // 5

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

函数表达式

函数表达式是另一种定义函数的方式，语法如下：

const add = function(x, y) {
  return x + y;
};

其中 add 是变量名，也就是函数的名称，function(x, y) 是函数体，可以指定零个或多个参数。

函数表达式有一个关键的区别就是不能在声明之前被调用。例如：

console.log(add(2, 3)); // error

const add = function(x, y) {
  return x + y;
};

箭头函数

箭头函数是 ES6 新加入的语法，语法如下：

const add = (x, y) => {
  return x + y;
};

其中 (x, y) 是参数列表，可以指定零个或多个参数，=> 是箭头符号，表示函数体开始，{} 表示函数体，可以包含零条或多条语句。

如果函数体只包含一条语句，可以省略 {}，并且可以省略 return，例如：

const add = (x, y) => x + y;

箭头函数还有一个特点，就是函数的 this 指向是固定的，指向定义时的上下文。例如：

const person = {
  name: '张三',
  sayHi: function() {
    setTimeout(() => {
      console.log(`我是${this.name}`);
    }, 1000);
  }
};

person.sayHi(); // 1秒后输出 "我是张三"

在上面的代码中，箭头函数中的 this 指向的就是定义时的上下文 person，而不是 setTimeout 函数。这种特性使得箭头函数和 this 的使用更加方便。

示例说明

1. 函数声明示例：

// 函数声明
console.log(add(2, 3)); // 5

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

在上面的代码中，我使用函数声明的方式定义了一个名为 add 的函数，然后在调用函数之前直接调用了 add(2, 3)，结果是 5。这是因为函数声明具有声明提前的特性，可以在声明之前被调用。

1. 箭头函数示例：

// 箭头函数
const person = {
  name: '张三',
  sayHi: function() {
    setTimeout(() => {
      console.log(`我是${this.name}`);
    }, 1000);
  }
};

person.sayHi(); // 1秒后输出 "我是张三"

在上面的代码中，我定义了一个名为 person 的对象，其中包含一个名为 sayHi 的方法。在这个方法中，我使用箭头函数定义了一个计时器，并且在计时器的回调函数中输出了当前对象的 name 属性。由于箭头函数中的 this 指向的是定义时的上下文 person，因此在调用方法时，输出的结果是定时器回调函数中的 this.name，也就是 "我是张三"。