箭头函数

箭头函数是 ES6 里面简写函数的语法方式
箭头函数只能简写函数表达式，不能简写声明式函数

function fn() {}    // 不能简写   
const fun = function () {}    // 可以简写  
const obj = {
    fn: function () {}   // 可以简写
}

(函数的形参) => {函数体内要执行的代码}

const fn = function(a, b) {
    console.log(a)
    console.log(b)
}

// 可以使用箭头函数写成
const fn1 = (a, b) => {
    console.log(a)
    console.log(b)
}

const obj = {
    fn: function (a, b) {
        console.log(a)
        console.log(b)
    }
}
// 可以使用箭头函数写成
const obj1 = {
    fn: (a, b) => {
        console.log(a)
        console.log(b)
    }
}

箭头函数的特殊性

1. 箭头函数内部没有 this，箭头函数的 this 是上下文的 this

    /**
     *  在箭头函数定义的位置往上数, 这一行是可以打印出 this 的
     *  因为这里的 this 是 window
     *  所以箭头函数内部的 this 就是 window
    */
    const obj = {
        fn: funtion () {
            console.log(this)
        },
        // 这个位置是箭头函数的上一行, 但是不能打印出 this
        fn1: () => {
            // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
            console.log(this)
        }
    }
    obj.fn()      // obj
    obj.fn1()     // window 
    
    
    // 按照我们之前的 this 指向来判断, 两个都应该指向 obj
    // 但是 fn1 因为是箭头函数，所以 this 不指向 obj，而是指向 fn1 函数的外层，就是 window

箭头函数内部没有 arguments 这个参数集合

    const obj = {
        fn: function () {
            console.log(arguments)
        },
        fn1: () => {
            console.log(arguments)
        }
    }
    obj.fn(1, 2, 3) // 会打印一个伪数组 [1, 2, 3]
    obj.fn1(1, 2, 3)    // 会直接报错

2. 函数的形参只有一个的时候可以不写()

    const obj = {
        fn: () => {
            console.log('没有参数, 必须写小括号')
        },
        fn1: a => {
            console.log('一个参数, 可以不写小括号')
        },
        fn2: (a, b) => {
            console.log('两个参数, 必须写小括号')
        }
    }

3. 函数体只有一行代码的时候，可以不写 {}，并且会自动 return

    const obj = {
        fn: a => {
            return a + 10
        },
        fn1: a => a + 10
    }
    console.log(obj.fn(10))     // 20
    console.log(obj.fn1(10))    // 20

函数传参的默认值

我们在定义函数的时候，有时候需要一个默认值出现
就是当我不传递参数的时候，使用默认值，传递参数了就使用传递参数的参数

function fn(a) {
    a = a || 10
    console.log(a)
}
fn()          // 10
fn(20)        // 20

在 ES6 中我们可以直接把默认值卸载函数的形参位置

function fn(a = 10) {
    console.log(a)
}
fn()       // 10
fn(20)     // 20

默认值的方式箭头函数也可以使用

const fn = (a = 10) => console.log(a)
fn()       // 10
fn(20)     // 20

// 箭头函数如果需要使用默认值的话，那么一个参数的时候也需要写 ()