js——箭头函数的简单介绍

目的：引入箭头函数的目的是更简短的函数写法并且不绑定this，箭头函数的语法比函数表达式更简洁。

使用场景：箭头函数更适用于那些本来需要匿名函数的地方。

一、基本语法

1.基本写法

// 普通函数
    const fun = function () {
      console.log('普通函数');
    }
    fun()
 // 箭头函数基本语法
    const fn = () => {
      console.log('箭头函数基本语法');
    }
    fn()

2.只有一个形参时，可以省略小括号

const fn1 = (x) => {
      console.log(x);
    }
    fn1(1)

// 只有一个形参时，可以省略小括号
    const fn2 = x => {
      console.log(x);
    }
    fn2(1)

3.如果函数体只有一行代码，可以写到一行上，并且无需写return直接返回值

// 只有一行代码时，可以省略大括号
    const fn3 = x => console.log(x);
    fn3(1)

// 只有一行代码时，可以省略return
    const fn4 = x => x + x
    console.log(fn4(1));

4.加括号的函数体返回对象字面量表达式

// 箭头函数可以直接返回一个对象
    const fn5 = (uname) => ({ uname: uname })
    console.log(fn5('返回对象'));

注意： 箭头函数属于表达式函数，因此不存在函数提升

二、箭头函数参数

1.普通函数有arguments 动态参数

2.箭头函数没有 arguments 动态参数，但是有剩余参数...args

// 利用箭头函数、剩余参数求和
    const Sum = (...arr) => {
      let s = 0
      for (let i = 0; i < arr.length; i++) {
        s += arr[i]
      }
      return s //函数体有多行代码return不能省
    }
    console.log(Sum(2, 3, 4));

三、箭头函数this

在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值。

> 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。

例1： 

例2：

例3： 

注意：在开发中【使用箭头函数前需要考虑函数中this 的值】，事件回调函数使用箭头函数时，this为全局的window，因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数。

// 箭头函数的this问题
    // DOM节点
    const btn = document.querySelector('.btn')
    // 箭头函数 此时this指向了window
    btn.addEventListener('click', () => {
      console.log(this);
    })
    // 普通函数 此时this指向了DOM对象
    btn.addEventListener('click', function () {
      console.log(this);
    })