箭头函数相当于匿名函数,箭头函数简化了函数的定义,比函数表达式更简洁,并且没有自己的this,arguments。。。
基础语法
(参数1, 参数2, …) => { 函数体 }
-
最简单的箭头函数(没有形参、函数体语句单一)
let fn = () => console.log('最简写的箭头函数') fn() // 最简写的箭头函数
相当于:
var fn = function () { return console.log('最简写的箭头函数') }
-
形参只有一个时 “()” 可以省略;没有参数或多个参数时不能省略
let fn = x => x*x console.log(fn(6)) // 36
-
函数体语句单一 (只有一条语句或者表达式)时可以省略 “{}” 否则不能省略
let fn = (x, y, z) => x*y+z console.log(fn(9, 9, 6)) // 87
高级语法
-
返回一个对象
语法:
参数=> ({foo: bar})
函数体加 “()” 括号后返回的是对象字面表达式;当对象的属性名与变量名相同时可以直接使用变量名;属性值为匿名函数时可以直接省略 function 关键字。
let uname = "玉环", age = "青娥", gender = "女" let fn = () => ({ uname, age, gender, getName() { return this.gender } }) console.log(fn())
执行结果:
{uname: "玉环", age: "青娥", gender: "女", getName: ƒ}
-
参数设置默认值
语法:
(参数1 = 默认值1,参数2 = 默认值2, …) => {函数体}
let fn = (x, y = 9, z = 7, a, b) => x*y+z console.log(fn(9)) // 88
箭头函数的 this
箭头函数没有自己的 this,箭头函数的 this 在定义函数的时候绑定,而不是在执行函数的时候绑定。
HTML:
<button id="btn1">普通函数 this</button>
<button id="btn2">箭头函数 this</button>
JS:
// 通过id 获取 元素
let btn1 = document.getElementById('btn1')
let btn2 = document.getElementById('btn2')
// 普通函数
btn1.onclick = function () {
console.log(this) // this 指向调用者 btn1
}
// 箭头函数
btn2.onclick = () => console.log(this) // 当前函数的 this 指向 window
执行结果:
<button id="btn1">普通函数 this</button>
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
箭头函数的 this 看外层是否有普通函数,如果有,外层函数的 this 就是箭头函数的 this ,如果没有则 this 是 window。
外层为普通函数
let obj = {
uname: '箭头函数 this',
getName: function () {
console.log(this.uname)
// 在普通函数中定义了箭头函数并将箭头函数作为函数返回值返回
return () => console.log(this.name)
}
}
// 执行结果:箭头函数 this
obj.getName() // 普通函数中的 this 指向调用该函数的 obj 对象
// 执行结果也是:箭头函数 this
obj.getName()() // 由此可见当前的箭头函数中的 this 也指向 obj 对象
外层为箭头函数
let obj = {
uname: '箭头函数 this',
getName: () => {
console.log(this)
// 在箭头函数中定义了箭头函数并将箭头作为函数返回值返回
return () => console.log(this)
}
}
obj.getName()
obj.getName()()
执行结果:
#指向 window
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}