ES6的箭头函数和普通函数相比有什么不同？

祈澈菇凉

于 2023-11-06 14:03:00 发布

阅读量300

点赞数

分类专栏：前端面试题合集文章标签： es6 原型模式前端

本文链接：https://blog.youkuaiyun.com/qq_36538012/article/details/134244974

版权

前端面试题合集专栏收录该内容

480 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了ES6箭头函数与普通函数的四个主要区别：1) 语法简洁，使用箭头符号定义；2) 词法绑定this值，不具有自身上下文；3) 没有arguments对象，需通过其他方式获取参数；4) 不能作为构造函数。理解这些差异有助于在前端开发中更恰当的选择函数类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ES6 的箭头函数和普通函数（传统函数）相比，有以下几个主要的不同点：

1：语法简洁：
箭头函数使用箭头（=>）来定义函数，语法更加简洁明了，省略了传统函数中的 function 关键字和大括号。

示例比较：

// 传统函数
function add(a, b) {
  return a + b;
}

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

2：词法绑定的 this 值：
箭头函数没有自己的 this 值，它的 this 值继承自外部的词法作用域。这意味着在箭头函数内部，无法通过 this 访问到函数自身的上下文，而是使用外部作用域的 this 值。

示例比较：

// 传统函数
const obj = {
  name: 'Alice',
  sayHello: function() {
    console.log('Hello, ' + this.name);
  }
};

// 箭头函数
const obj = {
  name: 'Alice',
  sayHello: () => {
    console.log('Hello, ' + this.name

了解本专栏

超级会员免费看