箭头函数与普通函数（function）的区别

语法形式

• 普通函数：
  • 有函数声明和函数表达式两种形式。函数声明的语法是function functionName(parameters) {... }，例如：

    function add(a, b) {
             
      return a + b;
    }
    

  • 函数表达式是将函数赋值给一个变量，如let add = function(a, b) { return a + b; };。
• 箭头函数：
  • 语法更加简洁，它的基本形式是(parameters) => {... }。如果只有一个参数，括号可以省略，例如a => { return a * 2; }；如果函数体只有一条语句且是返回值，花括号和return关键字都可以省略，像a => a * 2。

this指向

• 普通函数：
  • this的值在函数被调用时确定，它取决于函数的调用方式。在全局作用域中调用函数，this指向全局对象（在浏览器环境中是window，在Node.js环境中是global）。例如：

    let obj = {
             
      name: 'John',
      sayName: function() {
             
        console.log(this.name);
      }
    };
    obj.sayName();// 'John'，这里this指向obj
    let sayNameFn = obj.sayName;
    sayNameFn();// undefined，这里this指向全局对象（如果没有name属性就为undefined）
    

• 箭头函数：
  • 没有自己的this，它的this是继承自外层作用域的this。例如：

    let obj = {
             
      name: 'John',
      sayName: () => {
             
        console.log(this.name);
      }
    };
    obj.sayName();// 这里this指向外层作用域的this，可能不是obj
    

• 普通函数：
  • 有自己的arguments对象，它是一个类数组对象，包含了函数被调用时传入的所有参数。例如：

    function sum() {
             
      let result = 0;
      for (let i = 0; i < arguments.length; i++) {
             
        result += arguments[i];
      }
      return result;
    }
    console.log(sum(1, 2, 3));// 6
    

• 箭头函数：
  • 没有自己的arguments对象。如果需要访问参数，可以使用剩余参数（...）语法。例如：

    let sum = (...args) => {
             
      let result = 0;
      for (let i = 0; i < args.length; i++) {
             
        result += args[i];
      }
      return result;
    };
    console.log(sum(1, 2, 3));// 6
    

• 普通函数：
  • 可以作为构造函数使用，通过new关键字来创建对象实例。构造函数内部会创建一个新的对象（this），并将其原型指向函数的prototype属性。例如：

    function Person(name) {
             
      this.name = name;
    }
    let john = new Person('John');
    console.log(john.name);// 'John'
    

• 箭头函数：
  • 不能作为构造函数使用，因为它没有自己的this，也没有prototype属性。如果尝试使用new关键字调用箭头函数，会抛出错误。例如：

    let Person = (name) => {
             
      this.name = name;
    };
    let john = new Person('John');// 报错
    

• 普通函数：
  • 适用于需要动态绑定this的场景，如对象的方法，构造函数等。当需要使用arguments对象或者需要通过new关键字创建对象实例时，也必须使用普通函数。
• 箭头函数：
  • 适用于简洁的函数表达式，特别是在不需要自己的this和arguments对象的场景。例如，在数组的map、filter、reduce等方法中作为回调函数使用，可以使代码更加简洁清晰。如let numbers = [1, 2, 3]; let doubled = numbers.map(num => num * 2);。