前言
简单的讲,箭头函数是将原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+11 return 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属性age const 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的常见数组新增方法中讲解)