箭头函数与普通函数的区别？

王小婷

发布于 2023-10-26 14:40:10

1430

发布于 2023-10-26 14:40:10

箭头函数（Arrow Functions）和普通函数（Regular Functions）在语法和功能上有一些区别。以下是箭头函数和普通函数的主要区别：

1：语法简洁性：箭头函数具有更简洁的语法形式，可以帮助减少代码量。它使用箭头（=>）来定义函数，省略了function关键字和大括号。

// 普通函数
function sum(a, b) {
  return a + b;
}

// 箭头函数
const sum = (a, b) => a + b;

2：this绑定：箭头函数没有自己的this值，它会捕获（继承）所在上下文的this值。这意味着在箭头函数内部，this的值与外部的上下文保持一致，并且无法通过调用方式来改变this的指向。

// 普通函数
const obj = {
  name: "John",
  greet: function() {
    console.log("Hello, " + this.name);
  }
};
obj.greet(); // 输出 "Hello, John"

// 箭头函数
const obj = {
  name: "John",
  greet: () => {
    console.log("Hello, " + this.name); // 此处的this指向全局对象，输出 "Hello, undefined"
  }
};
obj.greet();

3：arguments对象：普通函数内部可以使用arguments对象来访问传入的参数列表。但是箭头函数没有自己的arguments对象，它会继承外部函数的arguments对象。

function sum(a, b) {
  console.log(arguments); // 输出 [1, 2]
}

const sumArrow = (a, b) => {
  console.log(arguments); // 抛出错误：Uncaught ReferenceError: arguments is not defined
};

sum(1, 2);
sumArrow(1, 2);

4：构造函数：普通函数可以用作构造函数来创建新的对象实例，而箭头函数不能使用new关键字来创建对象。

function Person(name) {
  this.name = name;
}

const john = new Person("John"); // 使用普通函数作为构造函数创建对象

const PersonArrow = (name) => {
  this.name = name;
};

const johnArrow = new PersonArrow("John"); // 抛出错误：PersonArrow is not a constructor

总的来说，箭头函数适用于需要简洁语法和保留外部上下文this值的情况，而普通函数则提供更多的灵活性和功能，适用于更复杂的函数需求。根据具体的场景和需求，选择适合的函数类型。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-10-25，如有侵权请联系 cloudcommunity@tencent.com 删除

arguments