文档章节

ES6箭头函数(Arrow Functions)

筱飞
 筱飞
发布于 2016/10/11 10:08
字数 395
阅读 30
收藏 1

  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()

这个很有用,再不用写me,self,_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的,貌似并没有这个限制

本文转载自:http://www.cnblogs.com/snandy/p/4403111.html

筱飞
粉丝 15
博文 142
码字总数 22847
作品 0
虹口
前端工程师
私信 提问
[tslint.json]tslint报错

Missing trailing comma "trailing-comma": [false] https://www.jianshu.com/p/2b409dfc8f75 " should be ' "quotemark": [true, "single"] Import sources within a group must be alphabe......

Danni3
02/28
62
0
javascript js(=>) 箭头函数 详细解说 案例大全

ES6标准新增了一种新的函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { } 箭头函数相当于匿...

simpower
2018/05/13
10
0
【探秘ES6】系列专栏(七):箭头函数

ES6作为新一代JavaScript标准,已正式与广大前端开发者见面。为了让大家对ES6的诸多新特性有更深入的了解,Mozilla Web开发者博客推出了《ES6 In Depth》系列文章。CSDN已获授权,将持续对该...

一配
2015/11/08
131
0
ES6 中使用 jQuery $(this) 的问题

转1 在老项目中开始改用 逐渐过渡。摸索中遇到在与 一同使用时 中 的含义发生了变化。 遇到这个问题主要是没有搞清楚 箭头函数: $('.js-bottom-btn').click(() => { }); 转换为了: $('.js...

夏碌冬藏
04/18
10
0
理解JavaScript普通函数以及箭头函数里使用的this

this 普通函数的this 普通函数的this是由动态作用域决定,它总指向于它的直接调用者。具体可以分为以下四项: this总是指向它的直接调用者, 例如 obj.func() ,那么func()里的this指的是obj...

Jack088
2018/10/24
9
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
246
5
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
5
0
Spring Boot + Mybatis-Plus 集成与使用(二)

前言: 本章节介绍MyBatis-Puls的CRUD使用。在开始之前,先简单讲解下上章节关于Spring Boot是如何自动配置MyBatis-Plus。 一、自动配置 当Spring Boot应用从主方法main()启动后,首先加载S...

伴学编程
昨天
8
0
用最通俗的方法讲spring [一] ──── AOP

@[TOC](用最通俗的方法讲spring [一] ──── AOP) 写这个系列的目的(可以跳过不看) 自己写这个系列的目的,是因为自己是个比较笨的人,我曾一度怀疑自己的智商不适合干编程这个行业.因为在我...

小贼贼子
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部