箭头函数的写法
参数在箭头左,函数体在箭头右
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]
这样就解决了.