ES6基础：箭头函数

迷南。 2022-12-19 09:25 147阅读 0赞

# ES6基础系列（三）箭头函数 #

## 一、基本用法 ##

先来看看 ES5 中我们怎么写一个函数

const foo = function (num) { 
      return num + 1;
    };

再来看看 ES6 为我们提供的箭头函数

const foo = (num) => num + 1;

看这个例子难道箭头函数是为了让我们的代码看上去更“高大上”吗？

我认为是这样的～，但这只是其中的一个很小原因，先来看看它有多“高大上”，也就是常见的用法

**多参数**

let foo = (value, num) => value * num;

**多参数+多条语句：**

let foo = (value, num) => { 
      const newVal = value * 2;
      return newVal * num;
    };

**返回一个对象**

let foo = (value, num) => ({  total: value * num });

**参数是一个对象**

let foo = ({  value, num }) => ({  total: value * num });

**简化回调函数**

const data = [
      {  name: "yg1", age: 1 },
      {  name: "yg2", age: 2 },
      {  name: "yg3", age: 3 },
      {  name: "yg4", age: 4 },
    ];
    const res = data.map(({  name, age }) => ({  name, age: age + 1 }));

## 二、区别 ##

抛开优雅的代码，我们仍要知道箭头函数和普通函数的区别在哪里

#### 2.1 没有 this ####

箭头函数没有 this，所以需要通过查找作用域链来确定 this 的值。

箭头函数中的 this，就绑定在它最近一层非箭头函数的 this.

一句话理解：箭头函数内部的 this 是词法作用域，由上下文确定。

我们来看这样一段代码：

*  第一个函数字面量在作为对象的方法被调用时。this 指向对象
 *  第二个函数正常调用时指向全局对象——window

同样的代码结构，我们来看一下改造后的代码：

*  第一个函数字面量在作为对象的方法被调用时。this 指向对象
 *  第二个箭头函数，它的 this 绑定在最近一层非箭头函数，也就是 obj 上

#### 2.2 没有 arguments ####

箭头函数没有自己的 `arguments` 对象，这不一定是件坏事，因为箭头函数可以访问外围函数的 arguments 对象：

function constant() { 
      return () => arguments[0];
    }
    
    var result = constant(1);
    console.log(result()); // 1

那如果我们就是要访问箭头函数的参数呢？

你可以通过命名参数或者 rest 参数的形式访问参数:

let nums = (...nums) => nums;

#### 2.3 不能通过 new 关键字调用 ####

JavaScript 函数有两个内部方法：`[[Call]]` 和 `[[Construct]]`。

当通过 new 调用函数时，执行 `[[Construct]]` 方法，创建一个实例对象，然后再执行函数体，将 this 绑定到实例上。

当直接调用的时候，执行 `[[Call]]` 方法，直接执行函数体。

箭头函数并没有 `[[Construct]]` 方法，不能被用作构造函数，如果通过 new 的方式调用，会报错。

大致了解了箭头函数以后，我们来看下面的例子：

function foo() { 
      return () => { 
        return () => { 
          return () => { 
            console.log("id:", this.id);
          };
        };
      };
    }

上面代码之中，只有一个this，就是函数foo的this。

## 参考 ##

*  [ES6 系列之箭头函数][ES6]
 *  [廖雪峰：箭头函数][Link 1]

## 写在最后 ##

**JavaScript 系列：**

1.  [《JavaScript 内功进阶系列》（已完结）][JavaScript]
2.  [《JavaScript 专项系列》（持续更新）][JavaScript 1]
3.  [《ES6 基础系列》（持续更新）][ES6 1]

**关于我**

*  花名：余光（沉迷 JS，虚心学习中）
 *  WX：j565017805

**其他沉淀**

*  [Js 版 LeetCode 题解][Js _ LeetCode]
 *  [前端进阶笔记][Link 2]
 *  [我的 CSDN 博客][CSDN]

如果您看到了最后，对文章有任何建议，都可以在评论区留言

这是[文章所在 GitHub 仓库的传送门][GitHub]，如果真的对您有所帮助，希望可以点个 star，这是对我最大的鼓励 ～

![20200602155947301.png][]

[ES6]: https://github.com/mqyqingfeng/Blog/issues/85
[Link 1]: https://www.liaoxuefeng.com/wiki/1022910821149312/1031549578462080
[JavaScript]: https://blog.csdn.net/jbj6568839z/article/details/103161970
[JavaScript 1]: https://blog.csdn.net/jbj6568839z/category_10204368.html
[ES6 1]: https://blog.csdn.net/jbj6568839z/category_8464707.html
[Js _ LeetCode]: https://webbj97.github.io/leetCode-Js/
[Link 2]: https://webbj97.github.io/summary/
[CSDN]: https://yuguang.blog.csdn.net/
[GitHub]: https://github.com/webbj97/summary
[20200602155947301.png]: /images/20221120/bd04c40b3d5a4f4a84e492ccdcc492d1.png