Es6新特性——箭头函数

大熊G

发布于 2022-11-14 16:47:14

3440

发布于 2022-11-14 16:47:14

文章被收录于专栏：大熊G的前端分享大熊G的前端分享

theme: channing-cyan

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战

什么是箭头函数

箭头函数是Es6新增的一种定义函数表达式的语法，它简化了我们之前写的函数书写方式，箭头函数实例化的函数对象与我们Es5之前创建的函数表达式的创建函数行为是相同的。在任何使用函数表达式的地方，都可以使用箭头函数。但箭头函数有些地方与传统书写方式还有差异，我们在下面来为大家讲解。

箭头函数书写方式

     //Es5
    let sum = function(a,b){
        return a + b;
    }
    // Es6
    let sum1 = (a,b) =>{
        return a + b;
    }
    console.log(sum(1,2));//3
    console.log(sum1(1,2));//3

大家可以看到我们少写了function，如果我们只传递一个参数还可以把小括号去掉，直接写 let sum1 = a =>{} 也可以运行，但不建议这样写，我们还是写小括号，比较有可读性。

箭头函数中的参数

箭头函数不能使用关键字arguments来访问，只能通过定义的命名参数来访问。

我们简单说一下arguments：arguments是一个对应于传递给函数的参数的类数组对象。看一下我们例子就明白了，它的下标0就是我们传入的第一个参数。

    function sum(){
        console.log(arguments[0]);
    }
    sum(3);//3
    let sum1 = () => {
        console.log(arguments[0]);
    }
    sum1(3);//报错 Uncaught ReferenceError: arguments is not defined

箭头函数中的this

在Es5 this引用是把函数当成方法调用的上下文对象，我们都知道this在网页全局中调用指向的是windows。如果该函数是一个对象的方法，则它的this指针指向这个对象。但在箭头函数中，箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。

     function o() {
        this.royaltyName = 'Jackons';
        // this 引用 King 的实例
        setTimeout( ()  => console.log(this.royaltyName), 1000);
    };

    function j() {
        this.royaltyName = 'bear';
        // this 引用 window 对象
        setTimeout(function () {
            console.log(this.royaltyName);
        }, 1000);
    }
    new o(); //jackson
    new j(); //undefinde

注意：函数箭头不能使用arguments，super和new.target，也不能当构造函数来用，它也没有prototype属性

箭头函数有他的便捷有他的优点，但是他也有缺点，他的优点是代码简洁，this提前定义，但他的缺点也是这些，比如代码太过简洁，导致不好阅读，总结一下什么情况下不该使用箭头函数。

在对象上定义函数
在原型上定义函数
动态上下文中的回调函数
构造函数中
太简短的（难以理解）函数

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-08-09，如有侵权请联系 cloudcommunity@tencent.com 删除

ecmascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

ecmascript

登录后参与评论

0 条评论

热度