JS箭头函数详解

1.什么是箭头函数

　　箭头函数是ES6新定义函数的语法　

　　语法：(参数)=>函数体

　　传统函数：

　　let sum = function(a,b){

　　　　return a+b;

　　}

　　let sum=(a,b)=>{

　　　　return a+b;

　　}

2.箭头函数的用法

　　2.1省略保函参数的小括号

　　　　如果只有一个参数，参数小括号可以省略。只有没有参数或多个参数的情况下不能省略

　　　　实例：

　　　　let sum = x =>{

　　　　　　return x+1;

　　　　}

　　2.2省略函数体的大括号

　　　　条件：

　　　　只有一行代码

　　　　省略大括号会返回这一行的值

　　　　省略大括号不能有return关键字

　　　　实例：

　　　　let sum = (a,b) =>a+b;//相当于return a+b;

　　2.3嵌入函数（非常适用，语法简洁）

　　　　JS嵌套函数：函数的调用，必须调用该最外层主函数。

　　　　传统JS嵌入函数写法（柯里化）：

　　　　　　funtion add(a){

　　　　　　　　return function(b){

　　　　　　　　　　return a+b;

　　　　　　　　}

　　　　　　}

　　　　　　//调用

　　　　　　console.log(add(4)(5))

　　　　箭头函数写法（柯里化）：

　　　　　const add = (a)=>(b)=>{return a+b;}　　　

　　　　　　//调用

　　　　　　console.log(add(4)(5))

　　　　多重嵌套函数对比

　　　　　　ES5写法：

　　　　　　function insert(value){//插入的值

　　　　　　　　return into:function(array){//要插入的数组

　　　　　　　　　　return after:function(afterValue){//添加元素的位置，或者理解为把元素添加在什么位置赋予什么下标

　　　　　　　　　　　　array.splice(array.indexof(afterValue)+1,0,value)//删除数组元素afterValue，并向数组中插入新的值元素value

　　　　　　　　　　　　return array;

　　　　　　　　　　}

　　　　　　　　}

　　　　　　}

　　　　　　调用：

　　　　　　console.log(insert(1).into([1,3]).after(1))//向数组中传入元素1，在素组下表加2的位置中，素组为【1，3】，最终返回【1，1，3】，详情见array.splice()函数

 

　　　　　　ES6写法：

　　　　　　let Insert = (value)=>({

　　　　　　　　into:(array=>({

　　　　　　　　　　after:affterValue){

　　　　　　　　　　　　array.splice(array.indexof(afterValue)+1,0,value);

　　　　　　　　　　　　return array;

　　　　　　　　　　}

　　　　　　　　})

　　　　　　})

　　　　　　调用：

　　　　　　console.log(insert(1).into([1,3]).after(1))//向数组中传入元素1，在素组下表加2的位置中，素组为【1，3】，最终返回【1，1，3】，详情见array.splice()函数

·　　2.4箭头函数的指向

　　　　什么是this，作用，使用

　　　　　　this的本质是”一个对象数据结构“，用于指向数据 ，通过this关键字可以操作和使用数据

　　　　函数的this指向

　　　　　　1.this指向Window 声明式函数 匿名函数 定时器 延时器 forEach循环

　　　　　　2.this指向事件源 事件绑定中，事件处理函数this指向默认是事件源，也就是绑定事件的标签对象

　　　　　　3.this指向数组/对象 数组/对象中存储的函数this,指向的就是数组/对象

　　　　箭头函数this指向

　　　　　　箭头函数的this指向，是父级程序this的指向

　　　　　　如果没有父级程序，或者父级程序没有指向，则指向的是Window

　　　　实例

　　　　　　（一）匿名函数绑定的事件处理函数，指向事件源，也就是div标签对象

　　　　　　oDiv.addEventListener('click',function(){

　　　　　　　　console.log(this)

　　　　　　})

　　　　　　（二）箭头函数this的指向是父级程序的指向，下面箭头函数没有父级程序，所以指向的是Window

　　　　　　oDiv.addEventListener('click',()=>{

　　　　　　　　console.log(this)

　　　　　　})

　　　　　　（三）对象中定义的函数和箭头函数

　　　　　　const obj={

　　　　　　　　name:'张三'，

　　　　　　　　age:18,

　　　　　　　　sex:'男',

　　　　　　　　fun1:funtion(){//对象中定义的函数，this指向对象本身，返回Obj

　　　　　　　　　　console.log(this)

　　　　　　　　},

　　　　　　　　fun2:()=>{//没有父级程序的箭头函数，指向的是Window,返回Window

　　　　　　　　　　console.log(this)

　　　　　　　　},

　　　　　　　　fun3:function(){//对象中定义的函数fun3中，this指向的是对象本身Obj

　　　　　　　　　　fun4:()=>{

　　　　　　　　　　　　console.log(this)//箭头函数fun4中this指向父级程序fun3,fun3指向对象本身，所以fun4的this指向也是返回Obj

　　　　　　　　　　}

　　　　　　　　　　fun4();

　　　　　　　　}

　　　　　　}