es6（六） 箭头函数

作用: 定义匿名函数

基本语法:

没有参数: () => console.log('xxxx') *

一个参数: i => i + 2

大于一个参数: (i, j) => i + j

函数体不用大括号: 默认返回结果

函数体如果有多个语句, 需要用 {}包围， 若有需要返回的内容， 需要手动返回

使用场景: 多用来定义回调函数

箭头函数的特点：

1、 简洁

2、 箭头函数没有自己的this， 箭头函数的this不是调用的时候决定的， 而是在定义的时候处在的对象就是它的this

3、 箭头函数的this看外层的是否有函数，如果有， 外层函数的this就是内部箭头函数的this，如果没有， 则this是window。

let fun = () => console.log("我是箭头函数")
fun()

//形参的情况
// 1. 没有形参的时候
let fun1 = () => console.log('我是箭头函数')
fun1()

// 2. 只有一个形参的时候 () 可以省略
let fun2 = a => console.log(a)
fun2('aaa')

// 3. 两个及两个以上形参的时候, ()不能省略
let fun3 = (x, y) => console.log(x, y);
fun3(25, 36) //25 36

// 函数体的情况
// 1.函数体只有一条语句或者是表达式的时候{}可以省略 -->会自动返回语句执行的结果，或者表达式的结果
let fun4 = (x, y) => x + y;   // 相当于 let fun4 = (x, y) => { return x+y } 
console.log(fun4(24, 36)) // 60

// 2.函数体不止一条语句或者表达式的情况{}不可以省略
let fun5 = (x, y) => {
    console.log(x + y);
    x + y
        // return x + y  // 多条语句的时候要手动return出去,不能省略
}
console.log(fun5(35, 49)) // undefined

let obj = {
    name: '箭头函数',
    getName1: function() {
        btn.onclick = () => {
            // 普通函数中this，谁调用了那个函数，那个this就指向谁
            //此处this指向它的上一层getName函数,外部obj调用了getName函数,所以this属于obj
            console.log(this) 
        }
    },
    getName2: () => {
        btn.onclick = () => {
            console.log(this) 
        // 此处this指向它的上一层getName函数，getName函数属于箭头函数,它的this指向它的上一层函数,
        // 因为getName的上一层是window,所以this指向window
        }
    }
}

obj.getName1()
obj.getName2()