es6语法部分-强化后的函数

es6语法部分-强化后的函数

1、箭头函数

在es6中，允许省略function关键字，直接用一个箭头声明一个函数。

let sayhi = (name, age) => {
    console.log(`大家好，我叫${name}，今年${age}了!`)
}
sayhi('dd', 18) // 大家好，我叫dd，今年18了!

如果只有一个参数，则可以省略括号

let sayhi = name => {
    console.log(`你好，${name}!`)
}
sayhi('zhang') // 你好，zhang!

如果没有参数的话，可以直接()，或者给一个下划线_，相当于有一个参数，只是这个参数永远不会被使用。

let person = {
    getName:_ => {
        return 'dd'
    }
}
console.log(sayhi.getName()) // dd

但是一般来说不会这么做，不管有没有参数，如果函数在某个对象里面，更推荐如下写法：

// 以下是普通写法，并非箭头函数
let person = {
    getName() {
        return 'dd'
    }
}
console.log(sayhi.getName()) // dd

2、this指向

let person = {
    name: 'dd',
    getName() {
        console.log(this.name);
    }
}
person.getName() // 'dd'

// 箭头函数
let person = {
    name: 'dd',
    getName:_ => {
        console.log(this.name);
    }
}
person.getName() // undefined

箭头函数中的this对象是定义函数时的对象，而不是使用函数时的对象。

箭头函数中this的指向是定义时所在的作用域，而不是执行时的作用域。

只要使用了箭头函数，就不要管这个函数本身了，在外面寻找最近的大括号，然后看这个大括号处在怎样的环境中，this就指向它！

那么，距离getName()最近的就是person对象的大括号，person对象处于全局作用域里面，那么this就是指向window对象。

let person = {
    name: 'dd',
    sayhi() {
        setTimeout(_ => {
            console.log(this.name)
        }, 1000)
    }
}
person.sayhi() // dd

距离setTimeout最近的是sayhi(),他不是箭头函数，所以this不再往上冒泡，所以this的指向和sayhi()一样，都是person对象。

3、如果函数体只有一个简单的return语句，那么函数体的大括号和rerurn关键字都可以省略。

let arr = [1, 2, 3]
// 正常函数
arr.map(function(a) {
    return a*a
})
// 箭头函数s
arr.map(a => {
    return a*a
})

// 箭头函数省略写法
arr.map(a => a*a) 
// [1, 4, 9]