箭头函数和普通函数的区别是什么？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 语法简洁性

箭头函数提供了一种更简洁的函数定义方式。例如：

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

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

箭头函数省略了 function 关键字，并且在函数体只有一条语句时可以省略 return 和大括号。

2. `this` 绑定

普通函数的 this 值取决于函数的调用方式，而箭头函数的 this 值继承自外层作用域。例如：

// www.javascriptcn.com code example
const obj = {
  value: 42,
  method: function() {
    console.log(this.value); // 42
  },
  arrowMethod: () => {
    console.log(this.value); // undefined
  }
};

obj.method();
obj.arrowMethod();

在 method 中，this 指向 obj，而在 arrowMethod 中，this 指向全局对象（在浏览器中是 window）。

3. `arguments` 对象

普通函数有一个 arguments 对象，包含所有传入的参数。箭头函数没有自己的 arguments 对象。例如：

// www.javascriptcn.com code example
function regularFunction() {
  console.log(arguments);
}

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

regularFunction(1, 2, 3); // [1, 2, 3]
arrowFunction(1, 2, 3); // Error

4. 构造函数

普通函数可以用作构造函数，使用 new 关键字创建实例。箭头函数不能用作构造函数。例如：

// www.javascriptcn.com code example
function Person(name) {
  this.name = name;
}

const person = new Person('Alice'); // 正常

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

const arrowPerson = new ArrowPerson('Bob'); // TypeError: ArrowPerson is not a constructor

5. 原型属性

普通函数有 prototype 属性，用于定义对象的原型方法。箭头函数没有 prototype 属性。例如：

function RegularFunction() {}
console.log(RegularFunction.prototype); // {constructor: ƒ}

const ArrowFunction = () => {};
console.log(ArrowFunction.prototype); // undefined

6. 方法定义

箭头函数不适合作为对象方法，因为 this 不会指向对象本身。例如：

// www.javascriptcn.com code example
const obj = {
  value: 42,
  method: function() {
    console.log(this.value); // 42
  },
  arrowMethod: () => {
    console.log(this.value); // undefined
  }
};

obj.method();
obj.arrowMethod();

在 method 中，this 指向 obj，而在 arrowMethod 中，this 指向全局对象。

箭头函数和普通函数的区别是什么？

推荐答案