目的
引入箭头函数的目的是更简短的函数写法并且不绑定this,箭头函数的语法比函数表达式更简洁
使用场景
箭头函数更适用于那些本来需要匿名的地方
箭头函数语法
(1)删掉function关键字加上=>
(2)没有参数加括号
(3)一个参数可以选择不加()
(4)没有或多个参数必须加(),并且参数之间用逗号分割
(5){}中只有一行语句时,可以省略
let add = function(a, b){
return a + b;
}
转化为
let add = (a, b) => {
return a + b;
}
再简写为
let add = (a, b) =>a + b
(6)加括号的函数体返回对象字面量表达式
const fn=uname=>({uname:uname})
console.log(fn1('pink老师'))
注意:箭头函数属于表达式函数,因此不存在函数提升
箭头函数参数
1.普通函数有arguments动态参数
2.箭头函数没有arguments动态参数,但是有剩余参数...args
const fn = uname => ({ uname: uname })
console.log(fn1('pink老师'))
const getSum = (...arr) => {
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
return sum
}
箭头函数this
在箭头函数出现之前,每一个新函数根据它是被如何调用的来定义这个函数的this值
this的指向:谁调用这个函数,this就指向谁
console.log(this)//windows
function fn() {
console.log(this)//windows
}
fn()
const obj = {
name: 'andy',
sayHi: function () {
console.log(this)//obj
}
}
obj.sayHi()
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
const fun = () => {
console.log(this)//window
}
fun()
//对象方法箭头函数this
const ob = {
uname: 'pink老师',
sayHi: () => {
console.log(this);//windows
}
}
ob.sayHi()
在开发中(使用箭头函数前需要考虑函数中this的值),事件回调函数使用箭头函数时,this为全局的window,因此DOM事件回调函数为了简便,还是不太推荐使用箭头函数