例行声明:接下来的文字内容全部来自 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. ashx文件获取$.ajax()方法发送的数据

    今天在使用Jquery的ajax方法发送请求时,发现在后台中使用ashx文件无法接收到ajax方法中传递的参数,上网查了一下原因后发现了问题所在,原来是我在$.ajax方法中指明了"cont ...

  2. Android的学习之路(三)项目的启动过程和安装过程具体解释

    应用的安装和启动过程: 安装:第一步:java的编译器会把这个.java文件编译成.class文件           第二部:Android的SDK提供了一个dx工具,这个工具把.class文件转义 ...

  3. Linux声卡驱动框图

    1.声卡驱动注册完成后的框图 2.open & hw_params 完.

  4. ASP.NET Web API接受AngualrJS的QueryString的两种方式

    ASP.NET Web API如何接受来自AngualrJS的QueryString呢?本篇体验两种方式. 第一种方式:http://localhost:49705/api/products?sear ...

  5. WordPress主题开发:网站搜索

    调用方法一:手动输入html <form role="search" method="get" id="searchform" act ...

  6. c++ 实现atoi()函数

    1. 问题描写叙述 实现c++函数库中atoi()函数,要考虑到各种特殊情况: 空字符串. +和-号. 字符串前中后n个空格. 溢出. 非数字字符. 2. 解决方式 转换过程并不复杂.复杂的是要考虑到 ...

  7. linux syslog详解 转

    分三部分 一.syslog协议介绍 二.syslog函数 三.linux syslog配置   一.syslog协议介绍 1.介绍 在Unix类操作系统上,syslog广泛应用于系统日志.syslog ...

  8. 使用系统自带的 UIRefreshControl 实现下拉刷新

    UIRefreshControl 为 UITableViewController 中的一个属性,从以下可以看出, IOS6.0 以上才支持. @property (nonatomic,retain) ...

  9. 寂静之地百度云在线观看迅雷下载A Quiet Place高清BT下载

      原名:A Quiet Place 地区:美国 语言:英语 / 美国手语 首播:2018-05-18(中国大陆) / 2018-03-09(西南偏南电影节) / 2018-04-06(美国) 电视台 ...

  10. JQuery攻略(三)数组与字符串

    在上两章,JQuery攻略(一) 基础知识——选择器 与 DOM 和 JQuery攻略(二) Jquery手册 我们为后面的章节打好了基础,在这一章节中,我们继续. 在这一章节中,我们记录的是JQue ...