JS语法 ：普通函数、匿名函数、自调用函数、箭头函数

1. 普通函数（Named Function）

普通函数是最常见的函数定义方式，有一个明确的函数名，可以在代码中多次调用。

function greet(name) {
  return "Hello, " + name;
}
console.log(greet("Alice")); // 输出: Hello, Alice

2. 匿名函数（Anonymous Function）

匿名函数是没有名称的函数，通常用于一次性调用或作为参数传递给其他函数。

作为回调函数

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(function(number) {
  return number * 2;
});
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

作为事件处理器

document.getElementById("myButton").addEventListener("click", function() {
  alert("Button was clicked!");
});

3. 自调用函数

定义后立即执行的函数，一般是匿名函数，用于创建一个独立的作用域，避免污染全局作用域。

匿名函数

(function() {
  console.log("This is an IIFE");
})();

普通函数

(function init() {
  var message = "Hello, named IIFE!";
  console.log(message);
})();

4. 箭头函数（Arrow Function）

箭头函数是 ES6 引入的简写匿名函数，语法更简洁，特别适合短小的函数。箭头指向函数语句。箭头函数不会创建自己的 this，而是从定义时的上下文中继承 this。

箭头函数（Arrow Functions）调用方式与普通函数相同。因为箭头函数总是匿名的，所以需要通过变量或常量来引用它们，然后通过引用来调用。以下是一些示例，展示了如何定义和调用箭头函数。

1. 基本调用
定义并调用箭头函数

const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 输出: 5

2. 没有参数的箭头函数

const greet = () => "Hello, World!";
console.log(greet()); // 输出: Hello, World!

3. 单个参数的箭头函数

const square = x => x * x;
console.log(square(4)); // 输出: 16

4. 在数组方法中的使用
使用 map 方法

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 4, 6, 8, 10]

使用 filter 方法

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4]

5. 作为回调函数
事件处理

document.getElementById("myButton").addEventListener("click", () => {
  alert("Button was clicked!");
});

定时器

javascript
setTimeout(() => {
  console.log("This runs after 2 seconds");
}, 2000);

6. 返回对象字面量
   箭头函数在返回对象字面量时，需要用括号将对象括起来：

const getPerson = (name, age) => ({ name, age });
console.log(getPerson("Alice", 30)); // 输出: { name: "Alice", age: 30 }

7. 继承 this 绑定
   箭头函数不会创建自己的 this，它继承自定义时的上下文：

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // 继承自 Person 的 `this`
    console.log(this.age);
  }, 1000);
}
const p = new Person(); // 每秒输出增加的 age 值

总结
箭头函数的调用与普通函数相同，但由于其语法简洁和特性（如继承 this），使其在很多场景下更加方便和简洁。理解并使用箭头函数可以使你的代码更简洁、易读和高效。

5. 普通函数 vs 匿名函数 vs 自调用函数 vs 箭头函数

普通函数

• 有函数名，可以在代码中多次调用。
• 创建自己的 this 上下文。

匿名函数

• 没有名字，通常用于一次性调用或作为参数传递。
• 可以用在任何需要函数的地方。

自调用函数（IIFE）

• 通常是匿名函数，定义后立即执行。
• 用于创建一个独立的作用域，避免全局作用域污染。

箭头函数

• 简洁的语法。
• 不创建自己的 this，从定义时的上下文中继承 this。
• 适用于回调函数和简短的函数。

使用示例

普通函数

function multiply(a, b) {
  return a * b;
}
console.log(multiply(2, 3)); // 输出: 6

匿名函数作为回调

setTimeout(function() {
  console.log("This runs after 2 seconds");
}, 2000);

自调用函数（IIFE）

javascript
(function() {
  var privateVar = "I'm private";
  console.log(privateVar);
})();

箭头函数

const sum = (a, b) => a + b;
console.log(sum(2, 3)); // 输出: 5

const names = ["Alice", "Bob", "Charlie"];
const lengths = names.map(name => name.length);
console.log(lengths); // 输出: [5, 3, 7]

总结：所有函数都可以分为普通函数、匿名函数两类。箭头函数箭头一定是匿名函数，需要注意的是不创建自己的 this，从定义时的上下文中继承 this（在哪创建指向哪里）。自调用函数可以是匿名函数也可以是非匿名函数，不过一般是匿名函数。