面试题之箭头函数和普通函数有什么区别？

箭头函数（Arrow Function）和普通函数（Regular Function）是 JavaScript 中两种不同的函数定义方式，它们在语法、上下文（this）、原型链等方面存在显著区别。以下是它们的主要区别：

---

1. 语法差异

• 普通函数：

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

  或者使用函数表达式：

  const normalFunction = function(a, b) {return a + b;
  };

• 箭头函数：

  const arrowFunction = (a, b) => {return a + b;
  };

  如果箭头函数体只有一条语句，可以省略大括号并自动返回结果：

  const arrowFunction = (a, b) => a + b;

---

2. this 的处理方式

这是箭头函数和普通函数最重要的区别之一。

• 普通函数：

  • 普通函数的 this 是动态绑定的，取决于函数的调用方式：

    • 作为方法调用： this 指向调用它的对象。

      const obj = {
          name: "Kimi",
          greet: function() {
              console.log(this.name); // 输出 "Kimi"
          }
      };
      obj.greet();

    • 作为普通函数调用： this 指向全局对象（非严格模式下是 window 或 global，严格模式下是 undefined）。

      ---

      function greet() {
          console.log(this);
      }
      greet(); // 非严格模式下输出 window，严格模式下输出 undefined

    • 使用 call、apply 或 bind： 可以手动绑定 this。

      greet.call({ name: "Kimi" }); // 输出 { name: "Kimi" }

• 箭头函数：

  • 箭头函数没有自己的 this，它会捕获其所在上下文的 this 值，并在函数内部使用。

  • 箭头函数的 this 是在定义时就确定的，不会随着调用方式改变。

  const obj = {
      name: "Kimi",
      greet: () => {
          console.log(this.name); // 输出 undefined（因为箭头函数捕获了全局上下文的 this）
      }
  };
  obj.greet();

  const normalGreet = function() {
      console.log(this.name); // 输出 "Kimi"
  };
  const arrowGreet = () => {
      console.log(this.name); // 输出 undefined
  };

  normalGreet.call({ name: "Kimi" }); // 输出 "Kimi"
  arrowGreet.call({ name: "Kimi" }); // 输出 undefined

---

3. arguments 对象

• 普通函数：

  • 普通函数内部可以访问 arguments 对象，它是一个类数组对象，包含函数调用时传入的所有参数。

  function sum() {
      console.log(arguments); // 类数组对象，包含所有参数
      return Array.from(arguments).reduce((a, b) => a + b, 0);
  }
  console.log(sum(1, 2, 3)); // 输出 6

• 箭头函数：

  • 箭头函数不绑定自己的 arguments 对象，只能通过参数名访问参数。

  const sum = (...args) => {
      console.log(arguments);  // ReferenceError: arguments is not defined
      return args.reduce((a, b) => a + b, 0);
  };
  console.log(sum(1, 2, 3)); // 输出 6

---

4. new 调用

• 普通函数：

  • 普通函数可以用 new 关键字创建一个新的实例对象。

  function Person(name) {
      this.name = name;
  }
  const person = new Person("Kimi");
  console.log(person); // 输出 { name: "Kimi" }

• 箭头函数：

  • 箭头函数不能用 new 关键字调用，否则会抛出错误。

  const Person = (name) => {
      this.name = name;
  };
  const person = new Person("Kimi"); // TypeError: Person is not a constructor

---

5. 原型链

• 普通函数：

  • 普通函数有 prototype 属性，可以用于原型链继承。

  function Person(name) {
      this.name = name;
  }
  Person.prototype.greet = function() {
      console.log(`Hello, my name is ${this.name}`);
  };
  const person = new Person("Kimi");
  person.greet(); // 输出 "Hello, my name is Kimi"

• 箭头函数：

  • 箭头函数没有 prototype 属性，因此不能用于原型链继承。

  const Person = (name) => {
      this.name = name;
  };
  console.log(Person.prototype); // undefined

---

6. 使用场景

• 普通函数：

  • 适用于需要动态绑定 this 的场景，例如作为方法调用、事件处理器、构造函数等。

  • 适用于需要访问 arguments 对象的场景。

• 箭头函数：

  • 适用于不需要动态绑定 this 的场景，例如回调函数、匿名函数等。

  • 适用于需要简洁语法的场景，尤其是只有一条语句时。

---

总结

• 普通函数：

  • 有自己的 this，动态绑定。

  • 有 arguments 对象。

  • 可以用 new 调用。

  • 有 prototype 属性。

  • 语法稍显复杂。

• 箭头函数：

  • 没有自己的 this，捕获定义时的上下文。

  • 没有 arguments 对象。

  • 不能用 new 调用。

  • 没有 prototype 属性。

  • 语法简洁。

根据实际需求选择合适的函数类型可以提高代码的可读性和效率。