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

本文链接:https://segmentfault.com/a/1190000008397584

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: 不能有重名参数。非箭头函数在非严格模式下面可以有重名参数。

ES6 箭头函数(arrow function)的更多相关文章

  1. es6 箭头函数(arrow function) 学习笔记

    箭头函数有两个好处. 1.他们比传统函数表达式简洁. const arr = [1, 2, 3]; const squares = arr.map(x => x * x); // 传统函数表达式 ...

  2. ES6箭头函数Arrow Function

    果然,隔了很长时间都没有来博客园上逛了...... 前一段时间一直在忙我们参加的一个比赛,转眼已经好久没有来逛过博客园了,果然还是很难坚持的...... 今天总算还是想起来要过来冒个泡,强行刷一波存在 ...

  3. [ES6系列-02]Arrow Function:Whats this?(箭头函数及它的this及其它)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 如果没用过CSharp的lambda 表达式,也没有了解过ES6,那第一眼看到这样代码什么感觉? /* eg.0 * fu ...

  4. ES6 箭头函数(Arrow Functions)

    ES6 箭头函数(Arrow Functions) ES6 可以使用 "箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 具有一个参数的简单函 ...

  5. 深入浅出ES6(七):箭头函数 Arrow Functions

    作者 Jason Orendorff  github主页  https://github.com/jorendorff 箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教 ...

  6. [译]ES6箭头函数和它的作用域

    原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ 在ES6很多很棒的新特性中, 箭头函数 (或者大箭头函数)就是其中值 ...

  7. ES6箭头函数和它的作用域

    原文来自我的前端博客: http://www.hacke2.cn/arrow-functions-and-their-scope/ http://es6rocks.com/2014/10/arrow- ...

  8. 箭头函数 Arrow Functions/////////////////////zzz

    箭头符号在JavaScript诞生时就已经存在,当初第一个JavaScript教程曾建议在HTML注释内包裹行内脚本,这样可以避免不支持JS的浏览器误将JS代码显示为文本.你会写这样的代码: < ...

  9. es6箭头函数讲解

    es6箭头函数的用法 箭头函数是es6的一种函数的简写方法. 如下: var f = v = > v; //等同于 var f = function(v){ return v; } var su ...

  10. es6箭头函数 this 指向问题

    es5中 this 的指向 var factory = function(){ this.a = 'a'; this.b = 'b'; this.c = { a:'a+', b:function(){ ...

随机推荐

  1. __NSArrayI removeObjectAtIndex:]: unrecognized selector sent to instance

    同样是删除cell问题,帮我看看问题出现在哪,谢谢! 我的类文件myFile是继承UIViewController的(目的是为了能够在一个view里切换不同的tableView),在myFile.h中 ...

  2. value stored to value2 during its initialization is never read

    警告:value stored to value2 during its initialization is never read NSMutableArray *datesArray = [[NSM ...

  3. Tomcat服务器集群与负载均衡实现

    一.前言 在单一的服务器上执行WEB应用程序有一些重大的问题,当网站成功建成并开始接受大量请求时,单一服务器终究无法满足需要处理的负荷量,所以就有点显得有 点力不从心了.另外一个常见的问题是会产生单点 ...

  4. 关于struts2种的action运行两次,或多次,或反复运行的bug

    今天在做项目的时候发现一个bug,就是action会莫名其妙的运行两次.网上搜了非常多帖子,关于这个问题也得到了一些处理方法,可是没有我想要的,造成运行两次活多次的问题呢,有非常多种原因,我在这里仅仅 ...

  5. cloudera项目源代码

    以下项目都需要安装git,Linux的git还是比较容易安装的,windows的git安装参考项目区域:软件版本控制-在Windows中使用Git视频介绍 git相关软件安装参考win7安装 git软 ...

  6. 关于chrome插件编写的小结

    一个插件的大致目录结构如下: 其中manifest文件最为重要,它定义/指明插件应用的相关信息(权限.版本.功能说明等),点此查看Manifest的详情>>   这里有一篇chrome官方 ...

  7. Eclipse启动时提示fail to create the Java Virtual Machine问题的解决办法

    是eclipse.ini文件的问题,打开eclipse安装目录下的eclipse.ini文件: 将其中的256m改为128m,512m改为256m,1024m改为512m即可 修改后如下: -star ...

  8. Button 自定义图片,代码绘制样式,添加音效的方法

    Button自己在xml文件中绑定监听器 <!-- 设定onclick属性,然后在activity中定义相应的方法 --> <!-- 通过xml布局中通过button的android ...

  9. Asp.Net Core Web相对路径、绝对路径整理

    一.相对路径 1.关于Asp.Net Core中的相对路径主要包括两个部分:一.Web根目录,即当前网站的目录为基础:二.内容目录wwwroot文件夹,对于静态文件都放在这个目录. 2.获取控制器,A ...

  10. PHP Unit资料收集

    ThinkPHP Unit https://github.com/gaoermai/ThinkPHPUnit PHPUnit入门http://blog.csdn.net/fly_heart_yuan/ ...