详解Javascript ES6中的箭头函数(Arrow Functions)


Posted in Javascript onAugust 24, 2016

ES6可以使用“箭头”(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器)。

一、语法

1. 具有一个参数的简单函数

var single = a => a
single('hello, world') // 'hello, world'

2. 没有参数的需要用在箭头前加上小括号

var log = () => {
 alert('no param')
}

3. 多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加

var add = (a, b) => a + b
add(3, 8) // 11

4. 函数体多条语句需要用到大括号

var add = (a, b) => {
 if (typeof a == 'number' && typeof b == 'number') {
  return a + b
 } else {
  return 0
 }
}

5. 返回对象时需要用小括号包起来,因为大括号被占用解释为代码块了

var getHash = arr => {
 // ...
 return ({
  name: 'Jack',
  age: 33
 })
}

6. 直接作为事件handler

document.addEventListener('click', ev => {
 console.log(ev)
})

7. 作为数组排序回调

var arr = [1, 9 , 2, 4, 3, 8].sort((a, b) => {
 if (a - b > 0 ) {
  return 1
 } else {
  return -1
 }
})
arr // [1, 2, 3, 4, 8, 9]

二、注意点

1. typeof运算符和普通的function一样

var func = a => a
console.log(typeof func); // "function"

2. instanceof也返回true,表明也是Function的实例

console.log(func instanceof Function); // true

3. this固定,不再善变

obj = {
 data: ['John Backus', 'John Hopcroft'],
 init: function() {
  document.onclick = ev => {
   alert(this.data) // ['John Backus', 'John Hopcroft']
  }
  // 非箭头函数
  // document.onclick = function(ev) {
  //  alert(this.data) // undefined
  // }
 }
}
obj.init()

这个很有用,再不用写meself_this了,或者bind

4. 箭头函数不能用new

var Person = (name, age) => {
 this.name = name
 this.age = age
}
var p = new Func('John', 33) // error

5. 不能使用argument

var func = () => {
 console.log(arguments)
}
func(55) //

对于5,在Firefox36里测试是可以输出55的,貌似并没有这个限制

三、总结

以上就是关于ES6中箭头函数的全部介绍内容,希望对大家了ES6中的箭头函数能有所帮助。如果有疑问可以留言讨论。

Javascript 相关文章推荐
js string 转 int 注意的问题小结
Aug 15 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
Aug 26 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
Vue实现内部组件轮播切换效果的示例代码
Apr 07 Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 Javascript
手机端点击图片放大特效PhotoSwipe.js插件实现
Aug 24 #Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 #Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 #Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 #Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 #Javascript
深入浅析JavaScript中的3DES
Aug 24 #Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 #Javascript
You might like
图书管理程序(二)
2006/10/09 PHP
第八节--访问方式
2006/11/16 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
PHP下用Swoole实现Actor并发模型的方法
2019/06/12 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
用Javascript做flash做的事..才完成的一个类.Auntion Action var 0.1
2007/02/23 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
文本框只能选择数据到文本框禁止手动输入
2013/11/22 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
javascript实现避免页面按钮重复提交
2015/01/08 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
在JS中操作时间之getUTCMilliseconds()方法的使用
2015/06/10 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
详解maxlength属性在textarea里奇怪的表现
2015/12/27 Javascript
domReady的实现案例
2016/11/23 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
浅析python3中的os.path.dirname(__file__)的使用
2018/08/30 Python
Python如何实现转换URL详解
2019/07/02 Python
Python shelve模块实现解析
2019/08/28 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
社团文化节策划书
2014/02/01 职场文书
公司领导班子对照材料
2014/08/18 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2014年财务人员工作总结
2014/11/11 职场文书
奖学金个人总结
2015/03/04 职场文书
催款通知书范文
2015/04/17 职场文书
2015年女职工工作总结
2015/05/15 职场文书
公开致歉信
2019/06/24 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
纯html+css实现打字效果
2021/08/02 HTML / CSS