浅谈箭头函数

NoraXie 发布于2019-08-21 11:16 / 2244人阅读

摘要：来看看箭头函数的情况可以发现在定时器这个匿名函数作用域里，所指向的对象，就是定义时所指的对象。对于构造函数来说，它就是的实例。如下据此，总结箭头函数的三个优点语法简洁，能够写出漂亮的单行函数。

ES6新引入了箭头函数，它是一种表达简洁的函数，下面我们来看看它有哪三个显著优势。
假设定义了一个名为names的数组，如下：

现在需要给数组的每一项后面添加’Bos’这个字符串，如果用传统的函数语句来实现，我们会这么做：

（小注：因为用了模板字符串所以此例中使用了重音符’ ` ’）

那么，使用箭头函数可以怎么做？第一步，用 => 替代 function ：

第二步，当参数仅有一个的时候，可以把括弧省略，如下：

是不是看上去简洁了些？

第三步：无需显示地写return语句，箭头函数内置 return 功能。即，如果你只想使用箭头函数返回什么东西的话，那么无需显示地写出 return 。如下：

这一步，除了删除return语句之外，还把花括号也删除了，并且把多行代码浓缩成一行。是不是非常简洁？但在这需要注意的是，之所以删除花括号，是因为函数体内仅有一句想要返回的语句。

当函数没有参数的时候，箭头函数还可以更进一步的简洁，即把括弧给去掉，换成下划线’_’。如下：

此处由于不需要形参，我们把括弧’ ( ) ’删除用’ _ ’ 替代来假装变量名，实际上你可以在此用任何你想用的变量名，反正他们也不会真正被用上。比如：

它们返回的都是’Cool Bos’组成的数组而已。

箭头函数中的this关键字，指向的是定义时的对象，而不是使用时的对象。即，虽然在以往的函数中，this所指的对象只有在调用的时候才知道是谁，但是在箭头函数中，它是固定不变的。我们拿两个例子来比对一下：

传统函数

无论输出多少次p.age的值，都是0。因为作为Person构造函数实例的p对象，才是this所指的对象，而age这个私有属性在构造函数中已经定义，this.age的值便是0。

箭头函数

而用箭头函数改写后，打印出的p.age值每一次都不相同，每当过去1秒，它的值+1。

我们再来三个例子说明一下：

构造函数里嵌套定时器的传统写法

可看到，函数体里最后一行this.val打印出来是0，但是定时器里每隔1秒打印出来的是值是NaN，因为在定时器里面的this指向的是window，然后在全局环境下并没有找到window.val的值，所以是NaN。

对上面的函数稍作修改

在全局作用域下定义val这个变量，并给其赋值-10。
从结果可以看出，每隔1秒打印出来的值是全局作用域下的-10累加增1。

来看看箭头函数的情况

可以发现在定时器这个匿名函数作用域里，this所指向的对象，就是定义时所指的对象。对于构造函数来说，它就是Fn的实例p。所以，this.val的值基于0，每隔1秒增1。

最后补充一点：目前的JavaScript版本把所有箭头函数当成匿名函数，但我们可以用一个变量指向匿名函数，以这种方式来仿造声明函数（本文中的示例函数就是如此）。如下：

据此，总结箭头函数的三个优点： 1. 语法简洁，能够写出漂亮的单行函数。2. 内置return语句，当函数只想返回某个东西的时候，可以不必显现地写出return。3.this关键字无需重新指定，这在进行事件绑定时会很有帮助。

需要补充的是，箭头函数里面没有arguments参数，如果需要用到，可以这么写(...arguments) => {...}。但是这种方法在严格模式下不适用。

翻译自：http://wesbos.com/arrow-funct...

GPU云服务器云服务器箭头函数设计浅谈浅谈javascript 浅谈sdwan解决方案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86491.html

浅谈javascript里面的this、call、apply、bind

摘要：如果该参数的值为或，则表示不需要传入任何参数，从开始可以使用类数组对象。当使用操作符调用绑定函数时，该参数无效。当绑定函数被调用时，这些参数将置于实参之前传递给被绑定的方法。在了解call,apply之前需要先了解下javascrit中this指向 this的指向在ES5里面，this永远指向最后调用它的那个对象举个栗子： var name = outerName; function...

Lemon_95 2019-08-22 11:21 评论0 收藏0
浅谈react性能优化的方法

摘要：函数绑定的方式一般有下面种方式绑定构造函数中绑定然后可以使用时绑定使用箭头函数以上三种方法，第一种最优。因为第一种构造函数只在组件初始化的时候执行一次，第二种组件每次都会执行第三种在每一次时候都会生成新的箭头函数。这篇文章主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 React性能优化思路软件的性能优化思路就像生...

HitenDev 2019-08-26 12:23 评论0 收藏0