箭头函数和普通函数的区别

1. 语法差异：

   • 箭头函数使用=>符号定义，语法更紧凑，如(parameters) => expression或(parameters) => { statements; }，而普通函数使用function关键字，如function(name) { return name; }。

   • // 函数声明
     //普通函数
     function sayHello(name) {
       console.log("Hello, " + name);
     }
     
     // 函数表达式
     const greet = function(name) {
       console.log("Hello, " + name);
     };
     
     sayHello("Alice"); // 输出: Hello, Alice
     greet("Bob");     // 输出: Hello, Bob
     
     //箭头函数
     // 简化形式
     const sayHello = (name) => console.log("Hello, " + name);
     
     // 如果只有一个参数，圆括号可以省略
     const greet = name => console.log("Hello, " + name);
     
     sayHello("Eve"); // 输出: Hello, Eve
     greet("David"); // 输出: Hello, David

2. this关键字的行为：

   • 箭头函数：不会创建自己的this上下文，它会从外层（lexical scope）继承this值。这意味着箭头函数内部的this是在定义函数时确定的，通常指向其所在上下文的this。

   • const person = {
       name: "Diana",
       introduce: () => console.log("My name is " + this.name)
     };
     
     person.introduce(); // 输出可能是: My name is undefined 或 globalThis.name，因为这里的this不是person对象

   • 普通函数：this值取决于函数如何被调用。在全局上下文中或严格模式下，this是undefined或globalThis（浏览器中为window），而在对象的方法中，this通常指向该对象。

   • const person = {
       name: "Charlie",
       introduce: function() {
         console.log("My name is " + this.name);
       }
     };
     
     person.introduce(); // 输出: My name is Charlie
     
     const introducePerson = person.introduce;
     introducePerson(); // 输出: My name is undefined 或 globalThis.name (取决于环境)

3. 构造函数与原型：

   • 箭头函数：不能作为构造函数使用，即不能用new关键字调用，也不具备prototype属性。
   • 普通函数：可以作为构造函数，用于创建新对象实例，并且拥有可配置的prototype属性。
   • 差别：

     // 普通函数作为构造函数
     function Person(name) {
       this.name = name;
     }
     
     const alice = new Person("Alice");
     console.log(alice.name); // 输出: Alice
     
     // 尝试使用箭头函数作为构造函数（错误做法）
     const PersonArrow = (name) => {
       this.name = name;
     };
     
     // 下面这行代码会抛出错误
     // const bob = new PersonArrow("Bob");

4. arguments对象：

   • 箭头函数：没有自己的arguments对象，不能直接访问传递给函数的参数列表。
   • 普通函数：自动获得一个arguments对象，包含调用时传入的所有参数。

5. 函数提升（Hoisting）：

   • 虽然这不是箭头函数特有的特性，但值得注意的是，箭头函数遵循与其他变量提升类似的规则，而函数声明（非表达式）会在作用域顶部被提升。

6. 其他限制：

   • 箭头函数不支持new.target、不能用作Generator函数（即不能使用yield关键字）。
   • call(), apply(), 和 bind()方法不能改变箭头函数内的this值。