ES6语法—箭头函数

箭头函数是 ES6 里面一个简写函数的语法方式

重点： 箭头函数只能简写函数表达式，不能简写声明式函数

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

二、箭头函数语法：

语法： var fn = (函数的行参) => { 函数体内要执行的代码 }

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

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

三、箭头函数的特殊性：

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

// 在箭头函数定义的位置往上数，这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {
    fn: function () {
    console.log(this)
    },
    // 这个位置是箭头函数的上一行，但是不能打印出 this
    fun: () => {
    // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
    console.log(this)
    }
}

obj.fn() // 指向obj
obj.fun() // 指向window

按照我们之前的 this 指向来判断，两个都应该指向 obj
但是 fun 因为是箭头函数，所以 this 不指向 obj，而是指向 fun 的外层，就是 window

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

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

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

const obj = {
    fn: a => {
    return a + 10
    },
    fun: a => a + 10
}

console.log(fn(10)) // 20
console.log(fun(10)) // 20