javascript ES6中箭头函数注意细节小结


Posted in Javascript onFebruary 17, 2017

前言

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

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

x => x * x

上面的箭头函数相当于:

function (x) {
return x * x;
}

但箭头函数带来了些许问题,下面来一起看看吧。

关于{}

第一个问题是关于箭头函数与{}。

箭头函数,乍一看,用法似乎很简单,比如像下面这样用来给数组每一项乘以2:

const numbers = [1, 2, 3];
 const result = numbers.map(n => n * 2);
 // produces [2,4,6]

但是,如果使用不当,可能会引发意想不到的问题。比如下面,尝试为数组中每一项去产生对象字面量,看上去挺简单的map操作,还是引发了意外。

const numbers = [1, 2, 3];
 const result = numbers.map(n => { value: n });
 // produces [undefined], [undefined], [undefined]

什么原因造成的呢?

稍微分析可知,引起上面问题在于,箭头函数内部包裹在花括号之间的代码,被认为是一段独立的代码块而不是对象字面量,因此其单独执行,显然得到的结果就是一个全为undefined的数组。
于是,在这种情况下,其中的代码就必须有明确的返回语句或者用圆括号()包括对象字面量。

const result = numbers.map(n => ({ value: n }));
 // [{value: 1}, {value:2}, {value:3}]

关于this

第二个问题是关于箭头函数与this。

使用箭头函数,你可以像下面这样写代码而不用额外在局部作用域中去暂存this:

const adder = {
  sum: 0,
  add(numbers) {
   numbers.forEach(n => {
    this.sum += n;
   });
  }
 };
 adder.add([1, 2, 3]);
 // adder.sum === 6

然而,很多时候你可能会自以为是的在不经意间写错。正如下面的代码所示,this并不指向”adder”对象,而指向”adder”对象所在的作用域:

const adder = {
  sum: 0,
  add: (numbers) => { // scope here is important
   numbers.forEach(n => {
    this.sum += n;
   });
  }

 };

 adder.add([1, 2, 3]);
 // adder.sum === 0

最后请记住一点:箭头函数中的this继承自外围作用域的值,因此我们不能改变其指向。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
Jun 05 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
JQuery实现带排序功能的权限选择实例
May 18 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
论JavaScript模块化编程
Mar 07 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
详细讲解JavaScript中的this绑定
Oct 10 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
vuejs中父子组件之间通信方法实例详解
Jan 17 Javascript
数组Array的排序sort方法
Feb 17 #Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 #Javascript
数组Array的一些方法(总结)
Feb 17 #Javascript
深入理解javascript的getTime()方法
Feb 16 #Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
Feb 16 #Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 #Javascript
基于JavaScript实现拖动滑块效果
Feb 16 #Javascript
You might like
PHP开启opcache提升代码性能
2015/04/26 PHP
PHP使用正则表达式获取微博中的话题和对象名
2015/07/18 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
List the Codec Files on a Computer
2007/06/11 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
2009/04/07 Javascript
javaScript parseInt字符转化为数字函数使用小结
2009/11/05 Javascript
javascript基础知识大集锦(二) 推荐收藏
2011/01/13 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
2013/03/28 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
2014/09/02 Javascript
express的中间件basicAuth详解
2014/12/04 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
vue+springboot图片上传和显示的示例代码
2020/02/14 Javascript
js回调函数原理与用法案例分析
2020/03/04 Javascript
js验证密码强度解析
2020/03/18 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
python 随机数生成的代码的详细分析
2011/05/15 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
python 获取字符串MD5值方法
2018/05/29 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
Hudson Jeans官网:高级精制牛仔裤
2018/11/28 全球购物
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
品管员岗位职责
2013/11/10 职场文书
丧事主持词大全
2014/04/02 职场文书
2015年技术工作总结范文
2015/04/20 职场文书
圣诞晚会主持词
2015/07/01 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android