ES6新增的箭头函数javascript,jsanrsafely的博客-

箭头函数：是一种函数的语法，符合函数的概念

特点如下：

1. 简单方便：()=>{}

2. 不允许直接存在，必须作为值存在

var fn = ()=>{  console.log("hello"); } fn();       //hello 

3. 箭头函数内部没有自己的this，使用的是外层函数的this

var obj = {  fn1:function(){   console.log(this);  },  fn2:()=>{   console.log(this);  } } obj.fn1();      //obj obj.fn2();      //window 

4. 箭头函数内部没有自带的arguments

例1：普通函数

var fn = function(){  console.log(arguments); } fn2();       //Arguments[] fn2(1,2,3);      //Arguments[1,2,3] 

例2：箭头函数

var fn = ()=>{  console.log(arguments);  } fn();       //报错：arguments is not defined 参数为定义 

5. 当只有一个形参时，小括号可以省略

var fn = a=>{  console.log(a); } fn("hello");     //hello 

6. 在简单语句中，若想返回函数的内容，可以省略花括号的同时省略return

var fn = a=>a; console.log(fn("hello"));  //hello 

使用场景：

1. 一般来说，箭头函数用在回调函数上，较为方便

例1：普通函数

var arr = [3, 6, 2, 1, 7, 8]; arr.sort(function(a,b){   //sort()为ES6新增的数组方法，功能是排序  return a - b; }); console.log(arr);    // [1, 2, 3, 6, 7, 8] 

例2：箭头函数

var arr = [3, 6, 2, 1, 7, 8]; arr.sort((a,b) => a - b); console.log(arr);    // [1, 2, 3, 6, 7, 8] 

2. 事件监听式绑定事件，尽量不要使用箭头函数,会丢失this

document.addEventListener("click", () => {   console.log(this);    // window  })