前言
箭头函数的es6推出的一种新的函数：Arrow Function（箭头函数）,在日常开发中经常会用到，合理使用箭头函数能方便我们解决this指向和代码美观问题。
一、箭头函数的写法
const fn = () => {
console.log(123)
}
二、箭头函数的使用方法
2.1 定义函数
箭头函数在语法上要比普通函数定义简洁
<!--箭头函数-->
const fn = (name) =>{
return `hello ${name}`;
}
<!--普通函数-->
const fn = function(name){
return `hello ${name}`
}
2.2 箭头函数的参数
- 没有参数的时候，直接写括号
- 有一个参数的时候，可以忽略括号
- 有多个参数，可以使用rest参数，或者用逗号隔开
//没有参数
const fn1 = () => {}
//有一个参数
const fn2 = name =>{
console.log(name)
}
//有多个参数
const fn3 = (a,b,c) =>{
console.log(a,b,c)
}
//又或者
const fn4 = (...rest) =>{
console.log(res); // [1,2,3,4]
}
fn4(1,2,3,4)
2.3 箭头函数里的函数体
如果函数体返回值里只是简单返回一个变量，或者简单的js表达式，可以直接省去函数体里的大括号{}和return
const f5 = (a,b) => a+b;
等同于
const f5 = (a,b) =>{
return a+b;
}
如果函数体内只返回一个对象，可以这么写
const f6 = (name) => ({name})
如果函数体只返回一个方法并且不需要返回值，可以这么写
const f7 = ()=> void doNotReturn();
三、箭头函数的区别
-
箭头函数不会创建自己的this
箭头函数没有自己的this，箭头函数的this指向继承自外层第一个普通函数的this，或者是继承父作用域中的this -
没有argument，可以使用rest参数
const fn = (...rest)=>{
console.log(rest);
}
fn(1,2,3,4,5); //[1,2,3,4,5]
- 箭头函数不能作为构造函数使用，不能通过new关键字
箭头函数没有prototype原型，所以也不能作为构造函数通过new关键字去实例化,否则会报错
- 不能用作Generator函数
箭头函数中没有yield关键字，所以不能用作generator函数
- call,apply,bind不能改变箭头函数的this指向
call | apply | bind方法可以用来动态修改函数执行时this的指向，但由于箭头函数的this定义时就已经确定且永远不会改变。所以使用这些方法永远也改变不了箭头函数this的指向。
