ES6学习笔记（六）箭头函数

箭头函数的写法

参数在箭头左,函数体在箭头右

let foo = (x, y) => {
    return x + y
}
console.log(foo(1, 2)) // 3

this指向的是定义的对象,而不是调用的对象

换句话说,箭头函数根本没有this

箭头函数中的this是从上一层引入的this

正常函数的this:

在HTML中加个id为btn的按钮.

let oBtn = document.querySelector('#btn')
console.log(oBtn)
oBtn.addEventListener('click', function () {
    setTimeout(function () {
        console.log(this)
    },1000)
})

第一个log显示了dom元素本身

而第二个显示了调用setTimeout的父节点Window,并不是定义节点oBtn

箭头函数的this:

let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function () {
    setTimeout( () => {
        console.log(this)
    },1000)
})

点击后直接显示定义之初的节点oBtn

不可用于构造函数

箭头函数不可用于构造函数

不可以使用arguments对象

但是可以使用...扩展运算符实现.

let a = (...arr) => {
    console.log(arr)
}
a(1, 2, 3) // (3) [1, 2, 3]

这样就解决了.