ES6 箭头函数（arrow function）

Arno 发布于2019-08-20 14:23 / 1885人阅读

摘要：因为箭头函数没有构造方法。因为不能一个箭头函数，所以也没必要有了。的值在这个箭头函数的整个生命周期里面都不变。你必须通过命名参数和剩余参数去获取箭头函数的参数。非箭头函数在非严格模式下面可以有重名参数。

例行声明：接下来的文字内容全部来自 Understanding ECMAScript 6,作者是Nicholas C.Zakas,也就是大名鼎鼎的Professional JavaScript for Web Developers（《JavaScript高级程序设计》）的作者。我很喜欢他的写作风格，所以在看了Understanding ECMAScript 6后试着自己写篇博客梳理一下，相当于简单地翻译和巩固一下吧。在此特别感谢Nicholas的原创，我只是一个小矮人，站在巨人的肩膀上，所以看到了原本看不到的风景。
原文链接：https://leanpub.com/understan...

1: 什么是箭头函数？
箭头函数，顾名思义就是用箭头（=>来定义的函数，不会用到关键字‘function’），例如:

let sum = (a, b)=> {return a + b;}

效果等同于：

var sum = function(a, b){return a + b;}

但是，事实上上面两个function存在很多不同，会在之后的第三点讲解。

2: 箭头函数的多种定义方式
箭头函数的定义形式有很多种（这也是我不喜欢的一点，呵呵），具体的有：

1: 什么情况下都可以型

let sum = (a, b)=>{return a + b;}

这种是最常用，最通用的形式。

2: 只有一个参数型

let self = num1 => {return num1;}

可以看到相对第一种定义的区别是：没有用（）包围参数. 这种形式只可以在这种情况下用。

3: 没有参数型

let functionA = ()=> {return "hehe";}

当没有参数时，必须要有"()"。

4: 两个参数及其以上型

let sum = (a, b) => {return a + b;}

当有两个及其以上的参数时，也必须要用‘（）’把参数括起来。

5:没有return&&没有{}

let sum = (a, b) => a + b;

你可以同时不给return关键字和{}，效果`等同`于上面的第4种情况

6: 没有return && 有{}

let sum = (a, b)=> {a + b;}

这种情况不等于第5种，这种情况下`"a+b"`并不会作为这个函数的返回值，如果你调用这个函数，得到的结果`‘undefined’`

7: 有return && 没有{}

let sum = (a, b)=> return a + b;

不要作死，这种写法直接给你一个syntaxError.

注明，以上的第5，6，7点针对的是函数方法体的部分，不论函数参数是几个，结果没有区别；同样的，第2，3，4点针对的是函数的参数部分，不论函数的方法体怎么写，对结果没有影响。

3: 箭头函数和一般的非箭头函数的区别:

1: 没有this, super, arguments和new.target绑定。一个箭头函数里面的这几个指由包含它的最近的非箭头函数决定
2: 不能使用new来调用。因为箭头函数没有构造方法。
3: 没有［prototype］属性。因为不能new一个箭头函数，所以prototype也没必要有了。
4: 不能改变this的值。this的值在这个箭头函数的整个生命周期里面都不变。
5: 没有arguments。你必须通过命名参数和剩余参数去获取箭头函数的参数。
6: 不能有重名参数。非箭头函数在非严格模式下面可以有重名参数。

GPU云服务器云服务器 function函数箭头函数 arrow ES6

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81595.html

探索ES2015：箭头函数（Arrow Functions）

摘要：注意箭头函数有几个使用注意点不可以使用对象，该对象在函数体内不存在。不可以当作构造函数，也就是说，不可以使用命令，否则会抛出一个错误。不可以使用命令，因此箭头函数不能用作函数。前言在JavaScript的世界中函数被誉为一等公民，每当我们需要在JS定义一个新的函数，我们都会毫不犹豫的function() {}，也许我们可以开始换一种方式来定义一个函数，也就是本文的主角箭头函数，一个...

pkwenda 2019-08-19 18:02 评论0 收藏0
es6基础0x024：babel简单使用

摘要：简单的说就是，新语法编译器旧语法。说明所以，对于新特性，我们可以通过使用，也可以通过语法转化来达到兼容。 0x001 polyfill 我们都知道，js总是一直存在着兼容性问题，虽然其他语言也存在着兼容性问题，比如c++、java，但那种兼容性是新特性在旧版本上的不兼容，js则存在着各种奇形怪哉的不兼容。这其中有着非常复杂的历史和时代的原因，并不加以累述。而解决兼容性问题的方法在以前只...

wangbinke 2019-08-23 13:41 评论0 收藏0
JavaScript 的 this 指向问题深度解析

摘要：而改变了这种状态，虽然定义的类用运算符得到的仍然是，但它不能像普通函数一样直接调用同时，中定义的方法函数，也不能当作构造函数用来调用。而在中，用调用一个构造函数，会创建一个新对象，而其中的就指向这个新对象。 JavaScript 中的 this 指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 ...

liuchengxu 2019-08-20 14:22 评论0 收藏0
ES6学习笔记之箭头函数

摘要：特性介绍箭头函数是新增的特性之一，它为这门语言提供了一种全新的书写函数的语法。用生成的函数会定义一个自己的，而箭头函数没有自己的，而是会和上一层的作用域共享。本文同步自我得博客：http://www.joeray61.com JS中的箭头箭头在JS里并不算是个新鲜的玩意儿，一直以来，JS都支持-->这样的箭头。很早的时候有些浏览器还不支持JS，当时的人们为了兼容这些浏览器，需要这...

Vultr 2019-08-19 18:12 评论0 收藏0
es6基础0x001：箭头函数

摘要：这就是所谓的箭头函数不绑定，而在我看来，回调函数就是箭头函数最好的归宿。 0x000 概述箭头函数有两个作用：更简短的写法不绑定this 0x001 语法一表览 ()=>{} ()=>{console.log(arrow);return null} ()=>hello (num1, num2)=>num1+num2 num=>++num ()=>({name:arrow})...

stonezhu 2019-08-23 12:51 评论0 收藏0