【每日一个知识点一】箭头函数和普通函数的区别

前言

发现好久没写博客了，想写点什么，又不知道写什么，就随便写些知识点练练吧，总比啥都不写好。有大佬看到觉得有什么需要补充的欢迎留言。

区别

1. 语法上的区别：

• 箭头函数使用箭头（=>）来定义函数，而普通函数使用关键字 function。
• 箭头函数可以省略函数体中的大括号 {}，当函数体只有一行时可以直接写返回的表达式。普通函数需要在函数体中使用 {} 包裹代码块，并使用 return 语句返回结果。

2. this 的指向：

• 箭头函数没有自己的 this 值，它继承外部作用域的 this 值。在箭头函数中，this 的值是在定义函数时确定的，而不是在调用时确定的。而且箭头函数没有自己的原型，无法作为构造函数创建对象。
• 普通函数的 this 值是在函数被调用时才确定的，它的值根据函数的调用方式可能有所不同。在方法调用、构造函数、事件处理函数等场景中，this 的值可能会变化。比如使用new关键字调用构造函数时，this 指向新创建的对象。

// 普通函数作为构造函数
function Person(name) {
  this.name = name;
}

let person1 = new Person('Alice');  // 使用 new 关键字实例化一个 Person 对象

console.log(person1.name);  // 输出: Alice

// 箭头函数不能作为构造函数
const ArrowPerson = (name) => {
  this.name = name;
}

let person2 = new ArrowPerson('Bob');  // 报错: ArrowPerson is not a constructor

3. arguments 对象：

• 箭头函数没有自己的 arguments 对象，它可以通过使用扩展运算符（…）来获取所有传入的参数。
• 普通函数拥有自己的 arguments 对象，它是一个类数组对象，包含了传递给函数的所有参数。

4. new 关键字：

• 箭头函数不能被用作构造函数，不能通过 new 操作符来调用。
• 普通函数可以通过 new 操作符来创建一个新的对象实例。

5. 作用域中的行为：
   假设有一个箭头函数const fun = () => {}和一个普通函数function fun1() {}，

• fun是一个常量，它被赋值为一个箭头函数，因为它是一个常量，所以它的值不能被重新赋值。该fun变量在其作用域内始终指向相同的箭头函数。箭头函数在声明时就绑定了作用域。

fun() // ReferenceError: Cannot access 'fun' before initialization
const fun = () => {
 console.log("Arrow Function");
};

• fun1是一个函数名，用来声明一个命名函数。这里的fun是一个被提升到其作用域顶部的函数声明。函数声明提升的特性意味着可以在函数声明之前调用该函数。

fun() // Function Declaration
function fun() {
    console.log("Function Declaration");
}

• 需要特别注意的是，在同一个作用域中，如果使用相同的名称来声明const和函数，变量声明会覆盖函数声明：

const fun = () => {
  console.log("Arrow Function");
};

function fun() {
  console.log("Function Declaration");
}

fun(); // 输出: "Arrow Function"

总结

箭头函数更简洁、更具有函数式编程的特点，适合简单的函数和匿名函数的场景。而普通函数则更灵活、更具有上下文的特点，适合需要动态改变 this 值或需要使用 arguments 对象的场景。具体选择哪种函数取决于具体的需求和上下文。