JavaScript   发布时间:2022-04-16  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了ES6中的箭头函数实例详解大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了ES6中的箭头函数。分享给大家供大家参,具体如下:

语法

我们先来看看箭头函数的语法:

{ statements } param => expression

param 是参数,根据参数个数不同,分这几种情况:

{ … } // 零个参数用 () 表示; x => { … } // 一个参数可以省略 (); (x,y) => { … } // 多参数不能省略 ();

示例

我们再来看看一些示例,看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧:

job.isSELEcted());

当然,也可以定义多个参数:

a + b,0);

当然=>后面也不一定非得接return 之后的语句,看下面:

{ playTrumpet(); fireConfettiCAnnon(); });

但是需要注意的是,多行语句需要用{}括起来,单行表达式不需要{},并且会作为函数返回值。

{ return x * x }; // 函数返回 x * x x => x * x; // 同上一行 x => return x * x; // SyntaxError 报错,不能省略 {} x => { x * x }; // 合法,没有定义返回值,返回 undefined

和普通函数一样,箭头函数也可以使用剩余参数和默认参数

x + y; func1(); // 得到 3 var func2 = (x,...args) => { console.log(args) }; func2(1,2,3); // 输出 [2,3]

特性

介绍完了箭头表达式的语法和示例,我们就需要思一下了。如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢?所以我们需要了解一下箭头函数的特性。

箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。我们通过一个例子来理解:

{ x : 1,func : function() { console.log(this.X) },test : function() { setTimeout(function() { this.func(); },100); } }; o.test(); // TypeError : this.func is not a function

上面的代码会出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。如果大家对JavaScript中的this不是很熟悉的话,可以看看前面的一篇文章《javascript中this的用法实例详解》。好了,回归正题,我们需要修改上面的代码如下:

{ x : 1,test : function() { var _this = this; setTimeout(function() { _this.func(); },100); } }; o.test();

通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了,我们刚才说过,箭头函数的 this 始终指向函数定义时的 this,而非执行时。所以我们将上面的代码修改如下:

{ this.func() },100); } }; o.test();

这回this就指向o了。

我们还需要注意一点的就是这个this是不会改变指向对象的,我们知道call和apply可以改变this的指向,但是在箭头函数中是无效的。

this.x }; o.test(); // 1 o.test.call(o); // 依然是1

希望本文所述对大家ECMAScript程序设计有所帮助。

大佬总结

以上是大佬教程为你收集整理的ES6中的箭头函数实例详解全部内容,希望文章能够帮你解决ES6中的箭头函数实例详解所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:箭头函数