箭头函数由来
对比普通函数
箭头函数介绍
使用注意事项
总结

1、箭头函数的由来:为什么要有箭头函数 ?
1)简化前端代码。
2)解决前端企业开发中的复杂this指向问题。

2、对比普通函数:箭头函数和普通函数的区别是什么?
2.1、箭头函数是匿名函数,不能作为构造函数,不能使用new。
2.2、箭头函数不能绑定arguments,取而代之用rest参数...解决。
2.3、箭头函数没有原型属性。
2.4、函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象;
1)普通函数的this定义:this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this指向的是window;当函数被作为某个对象的方法调用时,this就等于那个对象。
2)箭头函数的this定义:箭头函数的this是在定义函数时绑定的,不是在执行过程中绑定的。简单的说,函数在定义时,this就继承了定义函数的对象。

3、箭头函数介绍:什么是箭头函数?
1)箭头函数表达式是常规函数表达式的语法紧凑替代方法。
2)基本语法:(param1, param2, …, paramN) => { statements }。

var func = demo => 'anxhit'; 
// var func = function(demo){ 
return 'anxhit';
}

 

3)如果箭头函数不需要参数或需要多个参数,使用一个圆括号代表参数部分。

var func = demo => 'anxhit'; 
// equivalent to: 
var func = function(){ 
return 'anxhit';
} 

var sum = (num1,num2) => num1 + num2; 
//equivalent to: 
var sum = function(num1,num2){ 
return num1+ num2;
}

 

4)大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

// error 
var getUserInfo = name =>{name:'LLK',age:'18'}; 

var getUserInfo = name =>({name:'LLK',age:'18'});

 

4、使用注意事项:什么时候应该或不应该使用箭头函数?

1)定义对象方法的时候。

技术分享-ES6-ARROW-FUNCTION介绍_企业开发

 

技术分享-ES6-ARROW-FUNCTION介绍_构造函数_02

 

 

2)定义原型方法。

技术分享-ES6-ARROW-FUNCTION介绍_函数表达式_03

 

 

技术分享-ES6-ARROW-FUNCTION介绍_函数表达式_04

 

 

3)动态上下文中的回调函数。

技术分享-ES6-ARROW-FUNCTION介绍_企业开发_05

 

技术分享-ES6-ARROW-FUNCTION介绍_函数表达式_06

 

4)构造函数中。

技术分享-ES6-ARROW-FUNCTION介绍_企业开发_07

 

 

5、箭头函数总结
1)箭头函数在企业开发中能够使得开发人员用更少的代码完成需求功能,但也因此过于精简时会在一定程度上降低代码的可读性。
2)为部分情况下this指向不明确问题提供了新一代解决方案,同时也要求研发人员熟悉对this在各种情况下的指向。
3)了解使用箭头函数时一些附属的es6属性,才能发挥箭头函数的最大功效。例如展开运算符,foreach、map、filter、find等数组方法。
4)编程中没有一招鲜吃遍天,没有最好,只有最合适

独乐乐不如众乐乐!