JavaScript Arrow Function(箭头函式)

箭头函式

箭头函式功能与一般函式的用法大致差不多，不过写法却比一般函式还要简洁的多。
这里就直接来时做如何把一般函式改成箭头函式，如此会比较好理解两者之间的差异。

EX1:

//原函式
function sum(a,b){
return a+b;
}

//改成箭头函式
var sum = (a,b)=> a+b;

1.可以省掉 function 关键字
2.加上箭头
3.单一行陈述不需要 {} ，而且在没有 {} 情况下就算没写 return 会预设 return
4.//如果只有一个参数 () 也可以省略

EX2:

//原函式
function sayHi(){
console.log('Hi!!');
}
//改成箭头函式
var sayHi = ()=>console.log('Hi!!')

EX3:

//原函式
document.addEventListener('click',function(){
console.log('clicked!');
})
//改成箭头函式
document.addEventListener('click',()=>console.log('clicked!'));

箭头函式需要注意之处

1.没有arguements

一般函式:

const abc = function() {
  console.log(arguments); 
}
abc('a', 'b', 'c');
//VM1203:2 Arguments(3) ['a', 'b', 'c', callee: ƒ, Symbol(Symbol.iterator): ƒ]

就会显示出arguements这样的类阵列

箭头函式:

const abc = () => {
  console.log(arguments); 
}
abc('a', 'b', 'c');//VM1133:2 Uncaught ReferenceError: arguments is not defined

2.箭头函式绑定的this不同

一般函式:

var person={
name: 'Lisa',
call:function(){
console.log(this.name);
}
}
person.call()//Lisa

箭头函式:

var person={
name: 'Lisa',
call:()=>console.log(this.name)
}
person.call()//undifined

因为这个函式指的是window 所以才得到undifined

W3school JavaScript Arrow Function
铁人赛：箭头函式 (Arrow functions)