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

箭头函数（Arrow Function）和普通函数（Function Declaration/Expression）在 JavaScript 中有一些重要的区别，主要体现在以下几个方面：

1. 语法

• 箭头函数：

  • 语法更简洁，没有 function 关键字。

  • 对于单一表达式函数，结果会隐式返回，不需要 return 关键字。

  • 不需要使用大括号 {}，但如果使用，必须显式返回值。

  • 示例：

    // 单行表达式（隐式返回）
    const add = (a, b) => a + b;// 多行表达式（显式返回）
    const add = (a, b) => {return a + b;
    };// 如果只有一个参数，可以省略括号
    const square = x => x * x;
    

• 普通函数：

  • 使用 function 关键字声明。

  • 函数体内的返回值需要使用 return 关键字。

  • 示例：

    // 普通函数声明
    function add(a, b) {return a + b;
    }// 函数表达式
    const add = function(a, b) {return a + b;
    };
    

2. this 绑定

• 箭头函数：

  • 词法作用域：箭头函数没有自己的 this，它会继承外部函数的 this 值。this 的值在定义时就固定了，因此不随调用环境的变化而改变。
  • 适用于回调函数或事件处理程序中，尤其是当 this 需要保持一致时。

  function Counter() {this.count = 0;setInterval(() => {this.count++; // `this` 指向 Counter 实例console.log(this.count);}, 1000);
  }new Counter();
  

• 普通函数：

  • 动态作用域：普通函数有自己的 this，它的 this 值由调用时的上下文决定（即函数如何被调用）。
  • 使用 .bind()、.call() 或 .apply() 可以显式设置 this。

  function Counter() {this.count = 0;setInterval(function() {this.count++; // `this` 指向全局对象或 undefined（在严格模式下）console.log(this.count);}.bind(this), 1000); // 通过 .bind() 修正 `this`
  }new Counter();
  

3. 构造函数

• 箭头函数：

  • 不能作为构造函数，不能使用 new 操作符调用它们。尝试使用 new 调用箭头函数会导致错误。

  const Foo = () => {};
  const foo = new Foo(); // TypeError: Foo is not a constructor
  

• 普通函数：

  • 可以作为构造函数，使用 new 操作符调用时会创建一个新的实例。

  function Foo() {}
  const foo = new Foo(); // 成功创建一个 Foo 实例
  

4. arguments 对象

• 箭头函数：

  • 没有 arguments 对象。如果需要访问参数，可以使用 rest 参数语法（...args）。

  const func = () => {console.log(arguments); // ReferenceError: arguments is not defined
  };
  

• 普通函数：

  • 拥有 arguments 对象，包含了所有传递给函数的参数。

  function func() {console.log(arguments); // 输出所有传递的参数
  }
  

5. super 关键字

• 箭头函数：

  • 不支持 super 关键字，因为它们没有自己的 this，也没有自己的 super 作用域。

• 普通函数：

  • 可以使用 super 关键字来调用父类的方法。

  class Parent {method() {console.log('parent method');}
  }class Child extends Parent {method() {super.method(); // 调用父类的方法console.log('child method');}
  }const child = new Child();
  child.method();
  

总结

• 箭头函数 提供了更简洁的语法，并且在 this 绑定、构造函数以及 arguments 对象方面有不同的行为。它们适用于需要词法作用域的场景，如回调函数和事件处理程序。
• 普通函数 提供了传统的函数功能，能够动态绑定 this，作为构造函数使用，并且支持 arguments 对象。适用于需要这些功能的场景。