当前位置:首页 > 日记 > 正文

JavaScript箭头函数_动力节点Java学院整理

JavaScript箭头函数_动力节点Java学院整理

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。

为什么叫Arrow Function?因为它的定义用的就是一个箭头:

x => x * x

上面的箭头函数相当于:

function (x) { return x * x;}

在继续学习箭头函数之前,请测试你的浏览器是否支持ES6的Arrow Function

箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }return

x => { if (x > 0) {  return x * x; } else {  return - x * x; }}

如果参数不是一个,就需要用括号()括起来:

// 两个参数:(x, y) => x * x + y * y// 无参数:() => 3.14// 可变参数:(x, y, ...rest) => { var i, sum = x + y; for (i=0; i<rest.length; i++) {  sum += rest[i]; } return sum;}

如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:

// SyntaxError:x => { foo: x }

因为和函数体的{ ... }有语法冲突,所以要改为:

// ok:x => ({ foo: x })

this

箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域,由上下文确定。

回顾前面的例子,由于JavaScript函数对this绑定的错误处理,下面的例子无法得到预期结果:

var obj = { birth: 1990, getAge: function () {  var b = this.birth; // 1990  var fn = function () {   return new Date().getFullYear() - this.birth; // this指向window或undefined  };  return fn(); }};

现在,箭头函数完全修复了this的指向,this总是指向词法作用域,也就是外层调用者obj

var obj = { birth: 1990, getAge: function () {  var b = this.birth; // 1990  var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象  return fn(); }};obj.getAge(); // 25

如果使用箭头函数,以前的那种hack写法:

var that = this;

就不再需要了。

由于this在箭头函数中已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入的第一个参数被忽略:

var obj = { birth: 1990, getAge: function (year) {  var b = this.birth; // 1990  var fn = (y) => y - this.birth; // this.birth仍是1990  return fn.call({birth:2000}, year); }};obj.getAge(2015); // 25

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

相关文章

如何用excel函数筛选数据

如何用excel函数筛选数据

数据,函数,筛选,多表,方法,  Excel中多表相同数据该如何用函数进行筛选出来呢?其实设置函数筛选的方法不难。下面是由小编分享的excel 函数筛选多表相同数据的方法,欢迎大家来到学习。excel函数筛选多表相同数据的方法1:将两个工作表放在一…

js实现数组内数据的上移和下移的实

js实现数组内数据的上移和下移的实

数组,数据,实例,电脑软件,js,实例如下所示:var swapItems = function(arr, index1, index2){  arr[index1] = arr.splice(index2,1,arr[index1])[0]  return arr}var arr = [1,2,3]var newArr = []upData (arr, index) {  if (this.ar…

jQuery代码实现实时获取时间

jQuery代码实现实时获取时间

代码实现,获取时间,实时,电脑软件,jQuery,在上篇文章给大家介绍了jQuery动态地获取系统时间实现代码,大家可以参考下。废话不多说了,直接给大家贴代码了,具体代码如下所示:$(document).ready(function(){function time(){var date=new Date();v…

如何在Word文档中使用Active控件排

如何在Word文档中使用Active控件排

控件,文档,如何在,电脑软件,Word,  在用word输入文字中,有时需要使用Avtive控件来丰富word文档的排版效果。这里可以用软件自带的Active控件。以下是小编为您带来的关于Word文档使用Active控件排版,希望对您有所帮助。Word文档使用Active控…

powerpoint怎样给文字插入超级链

powerpoint怎样给文字插入超级链

文字,超链接,网页,方法,电脑软件,  在制作幻灯片的时候,怎么在其中设置网页链接呢?其实设置超链接的方法不难,下面小编就为你介绍powerpoint如何链接网页的方法啦!希望小编整理的资料对大家有帮助。PPT插入超链接网页的方法在ppt中插入网页…

怎么让PPT2003中的数据图表动起来

怎么让PPT2003中的数据图表动起来

图表,数据,电脑软件,  为了加强PPT演示文稿的说服力,常常会在幻灯片中使用图表。如果使用图表后再为它设置一下序列动画,让数据演示也动起来,则通常能达到吸引听众注意力,强化演示说服力的良好效果。以下是小编为您带来的关于让PPT2003中的数…

WPS文字将文字内容隐藏起来有什么

WPS文字将文字内容隐藏起来有什么

文字,方法,有什么,内容,电脑软件,  在WPS文字中,你是不是不相信文字可以被隐藏呢?现在WPS文字就可以帮助你隐藏答案。以下是小编为您带来的关于WPS文字将文字隐藏起来,希望对您有所帮助。WPS文字将文字隐藏起来操作步骤1 打开一篇WPS文档,用…

ps怎么合成人物头像的硬币?

ps怎么合成人物头像的硬币?

硬币,头像,人物,电脑软件,ps,ps中想要将两张图形合并到一起去,人物头像和硬币,该怎么合成呢?下面我们就来看看详细的教程。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、首先准备好这样一张空白的硬币…

PPS文件如何转化为PPT文件PPS文件

PPS文件如何转化为PPT文件PPS文件

文件,方法,文档,转化为,格式,  有的时候,我们下载的文件是幻灯片放映格式,打开的时候直接是放映。怎么可以转换成PPT。以下是小编给大家整理的PPS文件转化为PPT文件的方法,希望能帮到你!PPS格式的文件转化为PPT文件的方法1、幻灯片放映格式…

非主流qq签名名言名句

非主流qq签名名言名句

名句,名言,非主流,大全,电脑软件,  一句非主流签名:有时候电视剧看多了就会以为自己的故事也会发生奇迹。下面小编给大家分享了关于非主流qq签名名言名句,希望你喜欢。非主流qq签名名言名句精选1) 有很多感觉或者激情,那都不是爱2) 不要后…

excel生成一次函数的方法excel怎么

excel生成一次函数的方法excel怎么

函数,方法,电脑软件,excel,strong,  Excel中的一次函数具体该如何生成的呢?下面是小编带来的关于excel生成一次函数的方法,希望阅读过后对你有所启发!excel生成一次函数的方法生成一次函数步骤1:在excel的单元格内填好x轴,y轴对应的数据,一般…

怎么在excel中对数据进行筛选在exc

怎么在excel中对数据进行筛选在exc

数据,筛选,方法,步骤,中对,  在大量的数据面前,如何让找到满足您需要的那几份数据呢。下面小编辑教你怎么在excel中对数据进行筛选。在excel中对数据进行筛选的步骤对于条件不多的数据,我们使用简单筛选即可。首先,要选中您要进行筛选的区域…