「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。

ES系列文章

箭头函数

this指向定义时所在的对象，而不是调用时所在的对象
不可以当作构造函数
不可以使用arguments对象

ES5两种函数声明方式：

第一种：
console.log(sun(4,5))
function sun(x,y){
    return x+y
}
console.log(sun(4,5))

//第一种：先定义后调用,也可以先调用后定义。用第一种方式定义方法的时候会存在预定义，所以这种方式不管是先定义还是先调用都不会报错。

第二种：
console.log(sum(4,5))
let sum = function sun(x,y){
    return x+y
}

//第二种：相当于是把一个方法赋值给了一个变量，let不存在变量提升。

ES6箭头函数

let sum = (x,y) =>{
    return x+y
}
console.log(sum(4,5))

简写：
let sum = (x,y) => x+y
console.log(sum(4,5))

let x = x => x
//当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

使用ES6箭头函数语法来定义函数，将原函数的“function”关键字和函数名都删掉，然后使用 => 连接参数列表和函数体。
注意： =>函数左边为函数参数，右边为函数方法体。
this指向定义时所在的对象，而不是调用时所在的对象

html:
<button id="btn"></button>
js:
let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function (){
    setTimeout(() => {
        console, log(this)
    }，1000)
})
//定义对象是oBtn,箭头函数中并没有this，箭头函数中的this其实是继承外面一层执行的this，如果 setTimeout 中没有this就会寻找外面一层的this，外面一层的this指向oBtn。

不可以当作构造函数

let People = (name,age) =>{
    this.name = name
    this.age = age
}
let P1 = new People('xxx',22)
console.log(p1)
//VM105:5 Uncaught TypeError: People is not a constructor

不可以使用arguments对象

let People = () =>{
   console.log(arguments)
}
foo(1,2,3)
//Uncaught ReferenceError: foo is not defined

可以使用rest(...)代替arguments
let People = (...a) =>{
   console.log(a)
}
foo(1,2,3)

一个前端小白，若文章有错误内容，欢迎大佬指点讨论！

ES系列 | 箭头函数

ES系列文章

箭头函数

ES5两种函数声明方式：

ES6箭头函数