文章目录
- 前言
- 一、定义
- 二、简化
- 1.当函数参数只有一个时
- 2.当函数体只有一条return语句时
- 三、注意
- 1.箭头函数的this
- 2.不能作为构造函数实例化对象
- 3.不能使用argument变量
- 总结
前言
简单的讲，箭头函数是将原function关键字和函数名删掉的一种简写函数形式。
一、定义
通常函数的定义是：
fuction 函数名(参数){//函数体}//例如function fn1(a,b){return a+b;}var fn2=function(a,b){return a+b;}
箭头函数定义如下：
(a,b)=>{return a+b}//或var fn1()=(a,b)=>{return a+b}
二、简化
1.当函数参数只有一个时
这时括号可以省略，但是没有参数时，括号不能省略。
var fn1=()=>{};//无参数var fn2=a=>{};//单个参数var fn3=(a,b)=>{};//多个参数varr fn4=(a,b,...args)=>{};//多变参数
2.当函数体只有一条return语句时
这时可以省略{}和return关键字，但函数体包含多条语句时候，不能省略{}和return关键字。
()=>'hello';//返回'hello'字符串(a,b)=>a+b;//返回a+b的和(a)=>{a=a+11return a//多条语句}
三、注意
1.箭头函数的this
箭头函数中的this是静态的，始终指向函数声明时所在作用域下的this值。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>function getAge1() {console.log(this.age);}let getAge2 = () => {console.log(this.age);}window.age = 20;//设置window属性ageconst school = {age: 18}//直接调用console.log("直接调用");getAge1();getAge2();//使用call改变this指向调用console.log("使用call改变this指向调用");getAge1.call(school);getAge2.call(school);</script>
</body></html>
上述两个函数直接调用时，this均指向的是window作用域下的age，但使用call改变this指向school作用域下的age，发现箭头函数并未改变指向，正如上诉所说它的this是静态的，始终指向函数声明时所在作用域下的this值。
2.不能作为构造函数实例化对象
let People = (name, age) => {this.name = name;this.age = age;}let p = new People('王五', 20);
会报错
3.不能使用argument变量
let fn = () => {console.log(arguments);}fn(1, 2, 3);
报错
总结
以上就是箭头函数的介绍，但是大家一定要注意箭头函数的实际运用，比如箭头函数与解构赋值结合，箭头函数与数组方法回调结合等。（与数组方法回调结合我会在后面ES6的常见数组新增方法中讲解）
