例行声明:接下来的文字内容全部来自 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. 玩DNF开启NVIDIA独显的方法

    管理员身份运行后,点下红圈圈里的X,打开驱动配置文件,在Profiles里输入DNF,打开配置文件 把do not display this profile in the control panel ...

  2. 有关AngularJS请求Web API资源的思路

    页面部分大致如下: <body ng-app="productManagement"> ... <div ng-include="'app/produc ...

  3. Task Parallel Library01,基本用法

    我们知道,每个应用程序就是一个进程,一个进程有多个线程.Task Parallel Library为我们的异步编程.多线程编程提供了强有力的支持,它允许一个主线程运行的同时,另外的一些线程或Task也 ...

  4. Occlusion Culling遮挡剔除理解设置和地形优化应用

    这里使用的是unity5.5版本 具体解释网上都有,就不多说了,这里主要说明怎么使用,以及参数设置和实际注意点 在大场景地形的优化上,但也不是随便烘焙就能降低帧率的,必须结合实际情况来考虑,当然还有透 ...

  5. java 解压zip java.lang.IllegalArgumentException: MALFORMED 错误

    ava.lang.IllegalArgumentException: MALFORMED at java.util.zip.ZipCoder.toString(Unknown Source) at j ...

  6. linux下memcached安装 和redis安装,jdk,tomcat,mysql 安装

    一.memcached安装yum  search  memcachedyum  -y install memcachedmemmcached -h service memcached restartc ...

  7. Android手机提示“未安装应用程序”

    用eclipse调试应用时,遇到了这个问题,网上给出的解决方案倒是挺多,但似乎一个都没奏效,而且我手机也重启了,还是有问题,郁闷ing-   然后看到一篇文章指出,可能不是签名和SD的卡问题,而是我们 ...

  8. LeakCanary 原理浅析

    前言 提到Java语言的特点,无论是教科书还是程序员一般都会罗列出面向对象.可移植性及安全等特点.但如果你是一位刚从C/C++转到Java的程序员,对Java语言的特性除了面向对象之外,最外直接的应当 ...

  9. [Web 前端] CSS篇之 4. position 和 display 的取值和各自的意思和用法

    讲一讲CSS的position/float/display都有哪些取值,它们相互叠加时的行为都是什么?  列出display的值,说明他们的作用.position的值, relative和absolu ...

  10. tf.transpose函数的用法讲解

    tf.transpose函数中文意思是转置,对于低维度的转置问题,很简单,不想讨论,直接转置就好(大家看下面文档,一看就懂). tf.transpose(a, perm=None, name='tra ...