ES6 箭头函数

一、在es6中函数的定义和es5之间有明显区别。不需要关键字function 来进行定义,使用=>来指向函数。

**不可以new也就是做构造函数以及没有arguments参数。箭头函数的this是在定义的时候确定指向 这和es5不一样,es5是 谁调用他,他就指向谁。
**

11 document.addEventListener('click',ev=>{ 22 setTimeout(()=>{ 33 console.log(this) 44 },1000) 55 })

输出:window。

箭头函数this的指向是当时定义的父级作用域确定,计时器父级作用域而事件函数是箭头函数,他的this指向是由父级作用域,而他父级是document 它的作用域是window。所以输出window。这地有点绕。

如果将事件函数改为普通匿名函数 就会指向document。

11 document.addEventListener('click',function(){ 22 setTimeout(()=>{ 33 console.log(this) 44 },1000) 55 })

输出:document。

因为普通匿名函数的指向是在被调用的时候确定的,而调用的时候是由document所以,他的指向是document,而箭头函数指向是由定义父级作用域,而父级是作用域是document所以执行document。

好处:这样我们不必定义额外的变量去获取这个值,而是直接指向我们需要的对象。

如果我们使用普通匿名函数的时候,this的输出是window 如果想获取document需要定义变量获取。

11 document.onclick=function(){ 22 var that=this; 33 var setId=setTimeout(function(){ 44 console.log(this); 55 console.log(that) 66 },1000) 77 }

输出:this   window

           that  document

语法:()=>{}

1)、没参数情况:

11 var a=()=>2; 22 console.log(a());

注意:没有参数的时候,其中()不可以省略。 如果不写{}的时候,=>后面跟的是表达式即返回一个明确值,表示表达式为函数的返回值。

2)、单个参数的情况:

11 var sing=a=>2*a; 22 console.log(sing(2));

注意:单个参数的时候()小括号可以省略。

3)返回值为一个对象,需要在返回值的加上小括号,因为{}在箭头函数认为是代码块即执行的函数体。需要用小括号()来让js解析成表达式。

11 var obj=()=>({'a':2}); 22 console.log(obj());

 4)当有多条执行语句的时候,需要使用{}来表示。自定义返回值。

11 var myfunc=(a)=>{ 22 a>100?a=200:a=10; 33 return a; 44 } 55 console.log(myfunc(121))

5)做为事件的handle

11 document.addEventListener('click',ev=>{ 22 console.log(ev); 33 })

6)其他js函数中的参数为匿名函数。比如数组排序回调。

11 var arr=[3,21,2,4,1].sort((a,b)=>{ 22 if(a>b){ 33 return -1; 44 }else{ 55 return 1; 66 } 77 }) 88 console.log(arr);

7)使用箭头函数,this被固定 他的指向就是他父级作用域,而普通匿名函数的,this的指向就是谁调用他就指向谁。

1 1 //箭头函数 2 2 var obj={ 3 3 4 4 data:[1,2,3,4], 5 5 check:()=>{ 6 6 console.log(this); 7 7 return this.data; 8 8 } 9 9 } 1010 console.log('arrow'+obj.check()) 1111 1212 //普通箭头函数 1313 var objNoArr={ 1414 daxxta:[2,3,4], 1515 check:function(){ 1616 console.log(this); 1717 return this.daxxta; 1818 } 1919 } 2020 console.log('noarrow'+objNoArr.check())

注意:在箭头函数中,他的父级是obj  作用域是当前window。所以this指向就是当前window。

而普通匿名函数,this指向为被调用对象,而objNoArr调用check函数所有this指向为objNoArr对象。

所以我们在使用时候,一般箭头函数和普通匿名函数结合在一起使用,以便来获取当前操作对象。

11 var obj={ 22 name:'ok', 33 init:function(){ 44 document.addEventListener('click',ev=>console.log(this.name)) 55 } 66 } 77 obj.init()

 二、es6 函数扩展:

1、形参赋予默认值,在函数体里不能用let、const 再次赋值,会报错。

11 var testFunc=(a=2)=>{ 22 console.log(a) 33 } 44 testFunc();

2、参数列表 rest  在箭头函数中没有arguments这个类数组接收形参。er是通过 ...argsname 来进行接收 类似于java 接收不固定参数一样,如果确定参数也可以这样写 a,....arrs  形参a接收第一个参数,而后面的arrs接收其他参数,arrs是数组而不是类数组,具备数组所有方法。

11 let testFuc=(...arrs)=>{ 22 console.log(arrs); 33 console.log( arrs instanceof Array) 44 } 55 testFuc(1,2,3,4)

11 let testFuc=(a,...arrs)=>{ 22 console.log(a,arrs); 33 console.log( arrs instanceof Array) 44 } 55 testFuc(1,2,3,4)

 而es5的匿名函数的是通过arguments来接收,arguments  是类非数组。

11 var testMyFunc=function(a,b,c){ 22 console.log(arguments); 33 console.log( arguments instanceof Array) 44 } 55 testMyFunc(1,2,3)

 三、es6 函数扩展:

1)函数默认值。在es6中可以定义默认值,以前我们在处理函数默认值的时候是用a||2 在a为0或者空字符串的时候 也被处理成默认值,es6可以直接使用function(a=2){}和python java处理的默认值类似。

11 var a=function(a=2){ 22 console.log(2) 33 } 44 a();

2)我们定义对象的时候,有时候定义函数的时候,fn:function(){} 这种形式,可以直接写成 fn(){}  定义其他的属性的也可以直接简写。

11 var c=11; 22 var obj={ 33 c, 44 a(){ 55 console.log(c) 66 } 77 } 88 obj.a(); 99 console.log(obj.c);

默认省略key值 c  其实是:c:c  a:function(){console.log(c)}

注意的是:这是在对象属性中的定义!!!

 四、扩展运算符:

使用三点:...来合并数组和对象。

11 <script> 22 let arr1=[1,2,3,4]; 33 let arr2=[3,4,56]; 44 let arr3=[...arr1,...arr2]; 55 console.log(arr3); 66 let obj1={a:2,b:3}; 77 let obj2={c:45,a:3}; 88 console.log({...obj1,...obj2}); 99 </script>

主要在合并对象的时候,出现相同的key的时候,谁在后面 ,谁覆盖前面相同的key对应的值。

点赞
收藏

评论区

加载中...

相关推荐

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

面试题汇总

2021/10/30pfyh1、举例说几个ES6新特性2、map和filter的区别3、浏览器缓存机制4、vue渲染机制5、生命周期钩子函数6、组件传值7、箭头函数的特点/this指向/有没有arguments/如何获取入参8、虚拟DOM树9、Diff算法10、Vuex11、vue的两种路由模式hash和history的特点12、bind,call,appl

ES6 系列之 Babel 是如何编译 Class 的(上)

_摘要:_ 前言在了解Babel是如何编译class前,我们先看看ES6的class和ES5的构造函数是如何对应的。毕竟,ES6的class可以看作一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。constructorES6中:\

ES6新增内容(部分)

ES6新增内容(部分)一、两个声明变量的方法let、constlet:不能重复声明、有暂时性死区,不能提前访问、{}块级作用域。const:声明常量、声明之后不能被修改。二、箭头函数语法:(参数){表达式}箭头函数中this没有固定指向,一般指向宿主对象。

ES6箭头函数与普通函数的区别

箭头函数:letfun(){console.log('lala');}普通函数functionfun(){console.log('lalla');}箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一

ES6特性总结(3)——函数的变化

前言es6中的一系列关于函数用法的变化是非常有趣的,在es6的新标准下,你可以更加轻便地使用函数,并且可以仿照面向对象编程的思想来使用函数,将函数转化为“类”。(这里的类加了引号,原因我们会在后面的学习中解释)下面就让我们来一起看一看es6下的函数有哪些有趣的变化。1.箭头函数箭头函数是es6下实现的一种新的函数书写方法。在过去的