箭头函数的语法: () => {}
箭头函数和普通函数的区别:
- 箭头函数不能 new ，否则会报错
- 箭头函数不存在 arguments
- this的指向问题
- 箭头函数的this指向，默认指向该箭头函数定义时所在的对象，而不是谁调用该箭头函数this指向就指向谁
- 通俗理解: 箭头函数的this指向，永远指向它的父级（即: 上下文）对象
1. 箭头函数的使用
let fn = (num1, num2) => {
if (num1 > num2) {
return num1 - num2
} else {
return num1 + num2
}
};
num = fn(1, 2);
2. 只有一个形参的时候()可以省略
let fn = num => {
if (num > 0) {
return num - 1
} else {
return num + 1
}
};
num = fn(1);
3. 直接进行 return 没有其他逻辑代码的时候，可以省略掉 {} 和 return
let fn = num => num + 1;
num = fn(1);
# 等同于
function fn(num) {
return num + 1
}
num = fn(1);
4. 单行箭头函数直接返回对象需要加上 ()
let returnObj = () => ({a: 1, b: 2});
console.log(returnObj()); // {a: 1, b: 2}
5. 箭头函数使用解构赋值
let deconstruction = ({name, age}) => `姓名：${name} 年龄：${age}`;
console.log(deconstruction({name: 'Kevin', age: '18'})); // 姓名：Kevin 年龄：18
6.箭头函数使用 ...运算符 代替 arguments
- 普通函数使用 arguments
function oldArgumentsFn() {
console.log(arguments);
}
oldArgumentsFn(1, 2, 3, 4, 5);
- ...运算符
let newPointFn = (a, ...b) => {
console.log(a); // 1
console.log(b); // [2, 3, 4, 5]
};
newPointFn(1, 2, 3, 4, 5);
7.箭头函数的this指向问题
- 普通函数的this指向 -> 谁调用该箭头函数this指向就指向谁
let arrowJson = {
time: function () {
console.log(this); // {time: ƒ}
setTimeout(function () {
console.log(this); // Window
})
}
};
arrowJson.time();
- 箭头函数的this指向 -> 默认指向该箭头函数定义时所在的对象
let arrowJson2 = {
time: function () {
console.log(this); // {time: ƒ}
setTimeout(() => {
console.log(this); // {time: ƒ}
})
}
};
arrowJson2.time();
let arrowJson3 = { //注意这里的 this 指向
time: () => {
console.log(this); // Window
setTimeout(() => {
console.log(this); // Window
})
}
};
arrowJson3.time();