写点什么

Es6 新特性——箭头函数

作者:大熊G
  • 2022 年 6 月 11 日
  • 本文字数:1046 字

    阅读完需:约 3 分钟

Es6新特性——箭头函数

什么是箭头函数

箭头函数是 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 提前定义,但他的缺点也是这些,比如代码太过简洁,导致不好阅读,总结一下什么情况下不该使用箭头函数。

  • 在对象上定义函数

  • 在原型上定义函数

  • 动态上下文中的回调函数

  • 构造函数中

  • 太简短的(难以理解)函数


发布于: 刚刚阅读数: 3
用户头像

大熊G

关注

每天都在写bug的硬核男人 2022.06.02 加入

前端

评论

发布
暂无评论
Es6新特性——箭头函数_JavaScript_大熊G_InfoQ写作社区