首页 > 文章 > 前端

ES6箭头函数 vs 传统函数区别解析

时间：2026-05-20 22:59:26 203浏览收藏

ES6箭头函数以更简洁的语法和继承外层this的特性，成为编写回调和保持上下文的理想选择；而传统函数则拥有独立的this、arguments对象、prototype属性及构造能力，更适合定义方法、创建实例或处理复杂参数逻辑——掌握二者在语法、this绑定、参数访问、构造功能等核心维度的本质区别，能帮你写出更健壮、可维护且符合语义的JavaScript代码。

ES6箭头函数与传统函数区别详解_js语法进阶

箭头函数是ES6引入的一种更简洁的函数书写方式，它与传统函数在语法、this指向、使用场景等方面存在显著差异。理解这些区别有助于写出更清晰、不易出错的JavaScript代码。

1. 语法上的简洁性

箭头函数最大的特点是语法更简洁，适合写简单的回调函数。

传统函数写法：

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

箭头函数写法：

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

当参数只有一个时，括号可省略：

const square = x => x * x;

无参数时需写空括号：

const getName = () => 'Alice';

2. this 指向的不同

这是箭头函数和传统函数最核心的区别。

传统函数有自己的 this 上下文，它的值取决于函数如何被调用。而箭头函数没有自己的this，它会继承外层作用域的 this 值。

示例：在对象方法中使用 setTimeout

const user = {
  name: 'Bob',
  sayHi: function() {
    setTimeout(function() {
      console.log('Hello, ' + this.name); // undefined
    }, 100);
  }
};
user.sayHi();

上面例子中，内部函数的 this 不指向 user。解决办法之一是缓存 this：

sayHi: function() {
  const self = this;
  setTimeout(function() {
    console.log('Hello, ' + self.name); // Bob
  }, 100);
}

使用箭头函数则更自然：

sayHi: function() {
  setTimeout(() => {
    console.log('Hello, ' + this.name); // Bob
  }, 100);
}

因为箭头函数的 this 继承自 sayHi 方法的执行上下文。