ES6 箭头函数

Wesley13
• 阅读 473

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

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

1         document.addEventListener('click',ev=>{
2             setTimeout(()=>{
3                 console.log(this)
4             },1000)
5         })

输出:window。

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

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

1         document.addEventListener('click',function(){
2             setTimeout(()=>{
3                 console.log(this)
4             },1000)
5         })

输出:document。

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

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

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

1      document.onclick=function(){
2             var  that=this;
3             var setId=setTimeout(function(){
4                     console.log(this);
5                     console.log(that)
6             },1000)
7         }

输出:this   window

           that  document

语法:()=>{}

1)、没参数情况:

1         var  a=()=>2;
2         console.log(a());

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

2)、单个参数的情况:

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

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

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

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

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

1      var myfunc=(a)=>{
2             a>100?a=200:a=10;
3             return a;
4         }
5         console.log(myfunc(121))

5)做为事件的handle

1         document.addEventListener('click',ev=>{
2             console.log(ev);
3         })

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

1         var arr=[3,21,2,4,1].sort((a,b)=>{
2             if(a>b){
3                 return -1;
4             }else{
5                 return 1;
6             }
7         })
8         console.log(arr);

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

 1 //箭头函数
 2         var  obj={
 3 
 4             data:[1,2,3,4],
 5             check:()=>{
 6                 console.log(this);
 7                 return this.data;
 8             }
 9         }
10         console.log('arrow'+obj.check())
11 
12 //普通箭头函数
13         var  objNoArr={
14             daxxta:[2,3,4],
15             check:function(){
16                 console.log(this);
17                 return this.daxxta;
18             }
19         }
20         console.log('noarrow'+objNoArr.check())

ES6 箭头函数

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

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

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

1 var  obj={
2     name:'ok',
3     init:function(){
4         document.addEventListener('click',ev=>console.log(this.name))
5     }
6 }
7 obj.init()

ES6 箭头函数

 二、es6 函数扩展:

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

1 var  testFunc=(a=2)=>{
2     console.log(a)
3 }
4 testFunc();

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

1 let   testFuc=(...arrs)=>{
2     console.log(arrs);
3     console.log(  arrs instanceof Array)
4 }
5 testFuc(1,2,3,4)

ES6 箭头函数

1 let   testFuc=(a,...arrs)=>{
2     console.log(a,arrs);
3     console.log(  arrs instanceof Array)
4 }
5 testFuc(1,2,3,4)

ES6 箭头函数

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

1 var  testMyFunc=function(a,b,c){
2      console.log(arguments);
3      console.log( arguments instanceof Array)
4  }
5  testMyFunc(1,2,3)

ES6 箭头函数

 三、es6 函数扩展:

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

1         var  a=function(a=2){
2             console.log(2)
3         }
4         a();

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

1         var c=11;
2         var obj={
3             c,
4             a(){
5             console.log(c)
6         }
7         }
8         obj.a();
9         console.log(obj.c);

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

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

 四、扩展运算符:

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

1     <script>
2         let  arr1=[1,2,3,4];
3         let arr2=[3,4,56];
4         let arr3=[...arr1,...arr2];
5         console.log(arr3);
6         let obj1={a:2,b:3};
7         let obj2={c:45,a:3};
8         console.log({...obj1,...obj2});
9     </script>

ES6 箭头函数

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

点赞
收藏
评论区
推荐文章
LinMeng LinMeng
1年前
面试题汇总
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
菜园前端 菜园前端
1年前
JS难点:this 指向
原文链接:this指向分为两种情况,一种是普通函数中使用的this,另外一种是箭头函数中的this。普通函数this指向调用者。场景1javascriptfunctionsayHi()console.log(this)sayHi()//window这里的t
Stella981 Stella981
2年前
ES6 系列之 Babel 是如何编译 Class 的(上)
_摘要:_ 前言在了解Babel是如何编译class前,我们先看看ES6的class和ES5的构造函数是如何对应的。毕竟,ES6的class可以看作一个语法糖,它的绝大部分功能,ES5都可以做到,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。constructorES6中:\
Wesley13 Wesley13
2年前
ES6新增内容(部分)
ES6新增内容(部分)一、两个声明变量的方法let、constlet:不能重复声明、有暂时性死区,不能提前访问、{}块级作用域。const:声明常量、声明之后不能被修改。二、箭头函数语法:(参数){表达式}箭头函数中this没有固定指向,一般指向宿主对象。
Wesley13 Wesley13
2年前
ES6箭头函数与普通函数的区别
箭头函数:letfun(){console.log('lala');}普通函数functionfun(){console.log('lalla');}箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一
Wesley13 Wesley13
2年前
ES6特性总结(3)——函数的变化
前言es6中的一系列关于函数用法的变化是非常有趣的,在es6的新标准下,你可以更加轻便地使用函数,并且可以仿照面向对象编程的思想来使用函数,将函数转化为“类”。(这里的类加了引号,原因我们会在后面的学习中解释)下面就让我们来一起看一看es6下的函数有哪些有趣的变化。1.箭头函数箭头函数是es6下实现的一种新的函数书写方法。在过去的
Wesley13 Wesley13
2年前
C++中构造函数和析构函数
构造函数定义它是一种特殊的方法。主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。另外,一个类可以有多个构造函数,我们可以根据其参数个数的不同或参数类型的不同来区分它们(这就是构造函数的重载)特点1.构造函数的命名必须和类名完全相同;2.构造函数的功能主要用于在类的对象创建时定义
Stella981 Stella981
2年前
JavaScript中的类定义和继承实现
ES5中因为没有class关键字,所以创建类的方式是通过构造函数来定义的。我将一步步的用代码演示如何慢慢用原生的语法实现JS的类的定义和继承。希望大家喜欢。废话不多说,我们来看原生JavaScript定义类的方法。1\.最简单的类//类的构造函数functionPerson(){this.nam
Wesley13 Wesley13
2年前
ES6新增的一些特性
1、let关键字,用来代替var的关键字,特点: 1、变量不允许被重复定义2、不会进行变量声明提升3、保留块级作用域中i的2、const定义常量,特点:1、常量值不允许被改变2、不会进行变量声明提升3、箭头函数  与普通函数的区别:1、书写上用代替了function         2、普通函数的this指向window而ES6
Wesley13 Wesley13
2年前
ES6中的箭头函数=>
ES6标准新增了一种新的函数:ArrowFunction(箭头函数)。为什么叫ArrowFunction?因为它的定义用的就是一个箭头:xxx相当于:function(x){returnxx;}箭头函数