1、什么是箭头函数?
是使用胖箭头(=>)定义函数表达式的能力,很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。
语法:(参数) => { 函数体 }
// 普通函数
let sum = function(a, b) {
return a + b;
}
// 箭头函数
let sum1 = (a, b) => {
return a + b;
}
2、用法
省略包含参数的小括号
只有一个参数,那也可以不用括号。只有没有参数,或者多个参数的情况下,才需要使用括号。
// 有效
let sum = (x) => {
return x;
};
// 有效
let sum1 = x => {
return x;
};
// 没有参数需要括号
let sum2 = () => {
return 1;
};
// 有多个参数需要括号
let sum3 = (a, b) => {
return a + b;
};
省略包含函数体的大括号
箭头函数也可以不用大括号,但这样会改变函数的行为。使用大括号就说明包含“函数体”,可以在一个函数中包含多条语句,跟常规的函数一样。
- 省略大括号箭头后面就只能有一行代码;
- 省略大括号会隐式返回这行代码的值;
- 省略大括号不能写return。
// 有效
let sum = (a, b) => {
return a + b;
};
// 有效
let sum1 = (a, b) => a + b; // 相当于 return a + b;
// 无效的写法
let sum2 = (a, b) => return a + b;
嵌入函数
let arr = [1, 2, 3, 4, 5];
arr.map(val => val * 2); // [2, 4, 6, 8, 10]
** 箭头函数中this 指向**
let num = 11;
const obj1 = {
num: 22,
fn1: function() {
let num = 33;
const obj2 = {
num: 44,
fn2: () => {
console.log(this.num);
}
}
obj2.fn2();
}
}
obj1.fn1(); // 22
箭头函数没有this,箭头函数的this是继承父执行上下文里面的this 。
执行上下文是函数fn1(),所以就继承了fn1()的this,obj1调用的fn1,所以fn1的this指向obj1, 所以obj1.num 为 22。