JavaScript 箭头函数

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

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

1. 基本写法

语法1：基本写法

// 普通函数
const fn = function () {
    console.log('我是普通函数')
}
fn()

// 箭头函数
const fn = () => {
    console.log('我是箭头函数')
}
fn()

语法2：只有一个参数可以省略小括号

// 普通函数
const fn = function(x) {
    return x + x
}
console.log(fn(1))  // 2

// 箭头函数
const fn = x => {
    return x + x
}
console.log(fn(1))  // 2

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

// 普通函数
const fn = function(x, y) {
    return x + y
}
console.log(fn(1, 2))   // 3

// 箭头函数
const fn = (x, y) => x + y
console.log(fn(1, 2))   // 3

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

const fn1 = uname => ({uname: uname})
console.log(fn1('李庆林个人博客'))

总结：

1.箭头函数属于表达式函数，因此不存在函数提升

2.箭头函数只有一个参数时可以省略圆括号 ()

3.箭头函数函数体只有一行代码时可以省略花括号{}，并自动做为返回值被返回

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

2. 箭头函数参数

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

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

const getSum = (...args) => {
    let sum = 0
    for (let i = 0; i < args.length; i++) {
        sum += args[i]
    }
    return sum  // 函数体有多行代码不能省略return
}
console.log(getSum(1, 2, 3))    // 6

3. 箭头函数this

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

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

console.log(this)   // 此处为window
const sayHi = function() {
    console.log(this)   // 普通函数指向调用者 此处为window
}
sayHi()
btn.addEventListener('click', () => {
    console.log(this)   // 当前this指向btn
})

const user = {
    name: '小明',
    // 该箭头函数中的 this 为函数声明环境中 this 一致
    walk: () => {
        console.log(this)   // 指向window 不是user
    }
}
user.walk()

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

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