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 相关文章推荐
jQuery ui 1.7更新小结
Aug 15 Javascript
基于jquery DOM写的类似微博发布的效果
Oct 20 Javascript
javascript中有趣的反柯里化深入分析
Dec 05 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
jquery,js简单实现类似Angular.js双向绑定
Jan 13 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
详解javascript中的Error对象
Apr 25 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 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执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php中this关键字用法分析
2016/12/07 PHP
PHP实现json_decode不转义中文的方法
2017/05/20 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
《JavaScript高级程序设计》阅读笔记(二) ECMAScript中的原始类型
2012/02/27 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
angular实现图片懒加载实例代码
2017/06/08 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
python多进程实现进程间通信实例
2017/11/24 Python
django_orm查询性能优化方法
2018/08/20 Python
python实现字符串加密 生成唯一固定长度字符串
2019/03/22 Python
python for和else语句趣谈
2019/07/02 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
国际会议邀请函范文
2014/01/16 职场文书
学习全国两会精神心得体会范文
2014/03/17 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
六查六看个人剖析材料
2014/10/14 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
英文慰问信
2015/02/14 职场文书
国王的演讲观后感
2015/06/03 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫
mysql实现将字符串字段转为数字排序或比大小
2022/06/14 MySQL
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript