详解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 相关文章推荐
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
javascript实现下雨效果
Mar 27 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
Puppet的一些技巧
Sep 17 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
LayUI动态设置checkbox不显示的解决方法
Sep 02 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
php实现异步数据调用的方法
2015/12/24 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
详解jQuery-each()方法
2019/03/13 jQuery
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
[03:15]2014DOTA2国际邀请赛 专访国士无双信心满满
2014/07/12 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
Python优先队列实现方法示例
2017/09/21 Python
Python补齐字符串长度的实例
2018/11/15 Python
python将字典列表导出为Excel文件的方法
2019/09/02 Python
Python实现SMTP邮件发送
2020/06/16 Python
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
黄继光的英雄事迹材料
2014/02/13 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
《雕塑之美》教学反思
2014/04/24 职场文书
小区推广策划方案
2014/06/06 职场文书
中层干部培训方案
2014/06/16 职场文书
法学自荐信
2014/06/20 职场文书
党员公开承诺书2016
2016/03/24 职场文书
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技