箭头函数的目的是 简化函数的定义，语法糖
一般情况下，最简单的写法就是方法return一个值
// ES6 :
let f = v => v;
//ES5
var f = function(v){ return v }
其次就是各种情况应该如何去写箭头函数
//无参数转化 var f = function (){ return 123 } let f = () => 123 //多个参数 var f = function (a,b){ return a+b } let f = (a,b) => a+b //如果返回值是对象 var f = function (a,b){ return {a:a,b:b} } let f = (a,b) => { //不知道的情况下，可以直接蒋es5中的函数内容复制 return {a:a,b:b} } let f = (a,b) => ({a:a,b:b}) //加括号 //如果返回值是函数 let f = (a,b) => { //不知道的情况下，可以直接蒋es5中的函数内容复制 return function(){a:a,b:b} } let f = (a,b) => { //不知道的情况下，可以直接蒋es5中的函数内容复制 return a() } //无返回值的情况 let f2 = v =>{ if(v>=5){ //... } }
注意事项，不是所有情况都能使用
1. 箭头杉树不能当作构造函数，不可以使用new
let f = (a,b) => ({a:a,b:b}) var Fun = name =>{ this.name = name; } var f1 = new Fun();//error
2. 箭头函数没有原型对象
3. 不能使用Arguments 对象，但是可以使用rest代替
function fun3(){ console.log(arguments[2]) } fun3(1,2,3,4,56,); var fun3 =() =>{ console.log(arguments[2]);//error } //代替argument是rest参数 var fun3 = (...value) =>{ console.log(value[2]) }
4. this指向，箭头函数的this是定义的是谁，就指向谁 ，而普通函数的this是指向的调用的对象
//ES5 普通情况
var str = ‘abc‘;//全局变量 var obj = { //定义一个对象 str:‘xyz‘, //对象中的属性 getStr:function(){//对象中的方法 console.log(this.str); } } obj.getStr();//xyz 调用者是obj var z = obj.getStr; z();//abc 调用者是window
如果把obj稍作修改成箭头函数，那么this的指向是不同 的
//ES6 情况
var str = ‘abc‘;//全局变量 var obj = { //定义一个对象 str:‘xyz‘, //对象中的属性 getStr:()=>{//对象中的方法 console.log(this.str); } } obj.getStr();//abc 因为箭头函数永远指向定义他的对象的层级，例如obj是window定义的，所以此时的this指向window
原文：https://www.cnblogs.com/ningxin/p/14463180.html