es6 箭头函数

1、前言:

在 ES6 中,箭头函数是其中最有趣也最受欢迎的新增特性。顾名思义,箭头函数是一种使用 (=>) 定义函数的新语法,它与传统的 ES5 函数有些许不同。

这是一个用 ES5 语法编写的函数:

        function add(num){
            return num+10
        }

        add(5);  //15

有了 ES6 的箭头函数后,我们可以用箭头函数这样表示:

        var add = num => num+10
        add(5);  //15

箭头函数的写法短的多!由于隐式返回,我们可以省略花括号和 return 语句。

与常规 ES5 函数相比,了解箭头函数的行为方式非常重要。

 

2.箭头函数特点:

①语法短、简洁

基本语法如下:

(参数)=> { statements }

当没有参数时,使用一个圆括号代表参数部分

        let f = () => 5;
        f();  //5

当只有一个参数时,可以省略圆括号。

        let f = num => num + 5;
        f(10);  //15

当有多个参数时,在圆括号内定义多个参数用逗号分隔。

        let f = (a,b) => a+b;
        f(1,2);  //3

当箭头函数的代码块部分多余一条语句,就需要使用大括号括起来,并且使用 return 语句。

        // 有大括号,有return语句,返回结果
        let f1 = (a,b) => a+b;
        f1(1,2);  //3

        // 有大括号,无return语句,没有返回值
        let f2 = (a,b) => {a+b};
        f2(1,2);  //undefined

        // 有大括号,有return语句,返回结果
        let f3 = (a,b) => {return a+b};
        f3(1,2);  //undefined

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

        //报错
        var f1 = num => {num:num}

        //不报错
        var f2 = num => ({num:num})

 ②不能通过new关键字调用

箭头函数没有[[Construct]]方法,所以不能被用作构造函数。

③没有原型

由于不可以通过 new 关键字调用,因而没有构建原型的需求,所以箭头函数不存在 prototype 这个属性。

④没有this绑定

在 ES5 函数表达式中,this关键字根据调用它的上下文绑定到不同的值。但是,对于箭头函数,它this是词法绑定的。

箭头函数体内的 this 对象,就是定义时所在的对象,而不是使用时所在的对象。
对箭头函数使用 call、apply、bind 时,不会改变 this 指向,只会传入参数
this指向的固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this
没有 arguments、super、new.target
箭头函数中是没有 arguments、super、new.target 的绑定,这些值由外围最近一层非箭头函数决定。

自执行函数

在 ES6 的箭头函数出现之前,自执行函数一般会写成这样:

        (function(){
            console.log(1)
        })()

或者:

        (function(){
            console.log(1)
        }())

箭头函数当然也可以被用作自执行函数,可以这样写:

        (()=>{
            console.log(1)
        })()

但是,令大多数人想不到的是,下面这种写法会报错:

        (()=>{
            console.log(1)
        }())

那么,为什么会报错呢?

原因是,箭头函数属于 AssignmentExpression 的一种,当 CallExpression 时,要求左边的表达式是 MemberExpression 或其他 CallExpression。

原理就是这样了,具体可参见ECMAScript® 2015 规范

具体可归纳为以下几条:

1、箭头函数是匿名函数,不绑定自己的this,arguments,super,new.target

2、箭头函数会捕获其所在上下文的this值,作为自己的this值,在使用call/apply绑定时,相当于只是传入了参数,对this没有影响

3、箭头函数不绑定arguments,取而代之用rest参数…解决

4、箭头函数当方法使用的时候,没有定义this绑定

5、箭头函数不能作为构造函数,和 new 一起用就会抛出错误

6、箭头函数没有原型属性

7、不能简单返回对象字面量

 

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片