箭头函数是一种定义函数的方式,功能基本同function, 它以对象字面量定义函数,相比于function表达更为简洁。
特点:
-
表达简洁
-
作用域是块级,即每一对花括号就是一个作用域
使用方式示例
//定义无参数函数
var fun = ()=> {
//todo
}
//定义有参数的函数
var fun = ( num1 )=>{
//todo
}
//定义只有一个参数的函数, 可以简写
var fun = num1=>{
//todo
}
//当函数中只有一个返回值时
var fun = (num1, num2) => num1+num2;
var fun = ( ) => console.log('hello word'); //注意此箭头函数的返回值为undefine, 因为log()无返回值
箭头函数中的this
通常用法是传递callback函数,示例如下:
setTimeOut(()=>{
//todo
});
箭头函数中的this和function函数中的this的区别,示例如下:
var obj = {
aa(){
setTimeout(function () {
console.log(this);
});
}
bb(){
setTimeout(()=>{
console.log(this);
});
}
}
obj.aa();
obj.bb();
//输出
window
obj
var obj = {
aa(){
setTimeout(function () {
setTimeout(function () {
console.log(this);
});
setTimeout(function(){
console.log(this);
});
});
}
setTimeout(()=>{
setTimeout(function () {
console.log(this);
});
setTimeout(()=>{
console.log(this);
});
});
}
obj.aa();
obj.bb();
//输出结果
window
window
window
obj
结论:function(){}花括号中的this指向window, 而箭头函数花括号中的this指向外层的this, 如果离它最近的外层没有会继续西向外找, 直至找到, 如果最外层都没有则会找到window。