es6函数之箭头函数用法实例详解


Posted in Javascript onApril 25, 2020

本文实例讲述了es6函数之箭头函数用法。分享给大家供大家参考,具体如下:

es6允许使用“箭头”(=>)定义函数。

var f = v => v
// 等同于
var f = function(v) {
 return v
}

如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分。

var f = () => 5
// 等同于
var f = function() {
 return 5
}

var sum = (num1, num2) => num1 + num2
// 等同于
var sum = function(num1, num2) {
 return num1 + num2
}

如果箭头函数的代码块部分多于一条语句,就要使用大括号将它们括起来,并且使用return语句返回。

var sum = (num1, num2) => {return num1 + num2}

由于大括号被解释为代码块,所以如果箭头函数直接返回一个对象,必须在对象外面加上括号,否则会报错。

// 报错
let getTempItem = id => {id: id, name: "Temp"}
// 不报错
let getTempItem = id => ({id: id, name: "Temp"})

下面是一种特殊情况,虽然可以运行,但会得到错误的结果。

let foo = () => {a: 1}

上面代码中,原始意图是返回一个对象{a: 1},但是由于引擎认为大括号是代码块,所以执行了一行语句a: 1,这时,a可以理解为语句的标签,因此实际执行了语句是1,然后函数就结束了,没有返回值。

如果箭头函数只有一行语句,且不需要返回值,可以采用下面的写法,就不用写大括号了。

let fn = () => void doesNotReturn()

箭头函数可以与变量解构结合使用。

const full = ({first, last}) => first + ' ' + last
// 等同于
function full(person) {
 return person.first + ' ' + person.last
}

箭头函数使用表达更简洁。

const isEven = n => n % 2 === 0
const square = n => n * n

箭头函数的一个用处是简化回调函数。

// 正常函数写法
[1, 2, 3].map(function(x) {
 return x * x
})
// 箭头函数写法
[1, 2, 3].map(x => x * x)

下面是rest参数与箭头函数结合的例子。

const numbers = (...nums) => nums

numbers(1, 2, 3, 4, 5)

const headAndTail = (head, ...tail) => [head, tail]

headAndTail(1, 2, 3, 4, 5)

使用注意点

1)函数体内的this对象,就是定义所在的对象,而不是使用时所在的对象。
2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
3)不可以使用arguments对象,该对象在函数体内不存在,如果要用,可以用rest参数代替。
4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

function foo () {
 setTimeout(() => {
 console.log('id: ', this.id)
 }, 100)
}

var id = 21

foo.call({id: 42})

上面代码中,setTimeout的参数是一个箭头函数,这个箭头函数的定义生效是在foo函数生成时,而它的真正执行要等到100ms后。如果是普通函数,执行时this应该指向全局对象window,这时应该输出21。但是,箭头函数导致this总是指向函数定义生效时所在的对象,所在输出的是42.

箭头函数根本没有自己的this,导致内部的this就是外层代码块的this,正是因为它没有this,所以也就不能用作构造函数。

除了this,以下三个变量在箭头函数之中也是不存在的:

arguments, super, new.target

别外,由于箭头函数没有自己的this,所以当然也就不能用call(),apply(),bind()这些方法去改变this的指向。

(function() {
 return [
 (() => this.x).bind({x: 'inner'})()
 ]
}).call({x: 'outer'})

不适用场合

由于箭头函数使得this从“动态”变成“静态”,下面两个场合不应该使用箭头函数。

第一个场合是定义函数的方法,且该方法内部包括this.

window.lives = 100
var cat = {
 lives: 9,
 jumps: () => { this.lives--; console.log(this.lives)}
}

// 99

上面代码中,cat.jumps()方法是一个箭头函数,这是错误的。调用cat.jumps()时,如果是普通函数,该方法内部的this指向cat;如果写成上面那样的箭头函数,使得this指向全局对象,因些不会得到预期结果。

第二个场合是需要动态this(事件监听)的时候,也不应该使用箭头函数。

var button = document.getElementById('press');
button.addEventListener('click', () => {
 this.classList.toggle('on');
});

上面代码运行时,点击按钮会报错,因为button的监听函数是一个箭头函数,导致里面的this就是全局对象。如果改成普通函数,this就会动态指向被点击的按钮对象。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
jquery无刷新验证邮箱地址实现实例
Feb 19 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
优化Vue项目编译文件大小的方法步骤
May 27 Javascript
ckeditor一键排版功能实现方法分析
Feb 06 Javascript
vue实现简单加法计算器
Oct 22 Javascript
如何利用js在两个html窗口间通信
Apr 27 Javascript
es6数组之扩展运算符操作实例分析
Apr 25 #Javascript
es6函数之尾调用优化实例分析
Apr 25 #Javascript
es6函数之尾递归用法实例分析
Apr 25 #Javascript
javascript 易错知识点实例小结
Apr 25 #Javascript
javascript执行上下文、变量对象实例分析
Apr 25 #Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 #Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
jQuery EasyUI API 中文文档 - ComboBox组合框
2011/10/07 Javascript
jquery 动态创建元素的方式介绍及应用
2013/04/21 Javascript
利用毫秒减值计算时长的js代码
2013/09/22 Javascript
用jQuery实现的智能隐藏、滑动效果的返回顶部代码
2014/03/18 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
JS实现在状态栏显示打字效果完整实例
2015/11/02 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
Ionic3 UI组件之autocomplete详解
2017/06/08 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
详解Angular结合zTree异步加载节点数据
2018/01/20 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
python线程池threadpool实现篇
2018/04/27 Python
pandas 层次化索引的实现方法
2019/07/06 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Pytorch之parameters的使用
2019/12/31 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
解决pytorch 保存模型遇到的问题
2021/03/03 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
2014年体育部工作总结
2014/11/13 职场文书
2014年教研室工作总结
2014/12/06 职场文书
总账会计岗位职责
2015/04/02 职场文书
2015年体育教师个人工作总结
2015/05/12 职场文书
2015年乡镇财政工作总结
2015/05/19 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
人与自然的观后感
2015/06/18 职场文书