初步探究ES6之箭头函数
来源:互联网 发布:手机淘宝秒杀神器 编辑:程序博客网 时间:2024/06/05 08:15
初步探究ES6之箭头函数
版权声明:本文为博主原创文章,未经博主允许不得转载。
目录(?)[+]
今天要介绍的是ES6中的箭头函数。
语法
我们先来看看箭头函数的语法:
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
param 是参数,根据参数个数不同,分这几种情况:
() => { … } // 零个参数用 () 表示;
x => { … } // 一个参数可以省略 ();
(x, y) => { … } // 多参数不能省略 ();
示例
我们再来看看一些示例,看看在ES5中的函数怎么通过ES6中的箭头函数来替代吧:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
当然,也可以定义多个参数:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
当然=>后面也不一定非得接return 之后的语句,看下面:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
但是需要注意的是,多行语句需要用{}括起来,单行表达式不需要{},并且会作为函数返回值。
- 1
- 2
- 3
- 4
- 5
- 1
- 2
- 3
- 4
- 5
和普通函数一样,箭头函数也可以使用剩余参数和默认参数。
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
特性
介绍完了箭头表达式的语法和示例,我们就需要思考一下了。如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢?所以我们需要了解一下箭头函数的特性。
箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的 this,而非执行时。我们通过一个例子来理解:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
上面的代码会出现错误,因为this的指向从o变为了全局(函数调用中的this都是指向全局的)。如果大家对JavaScript中的this不是很熟悉的话,可以看看我写过的一篇文章,深入理解javascript之this。好了,回归正题,我们需要修改上面的代码如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
通过使用外部事先保存的this就行了。这里就可以利用到箭头函数了,我们刚才说过,箭头函数的 this 始终指向函数定义时的 this,而非执行时。所以我们将上面的代码修改如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
这回this就指向o了。
我们还需要注意一点的就是这个this是不会改变指向对象的,我们知道call和apply可以改变this的指向,但是在箭头函数中是无效的。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 初步探究ES6之箭头函数
- 初步探究ES6之箭头函数
- 初步探究ES6之箭头函数
- 初步探究ES6之箭头函数
- es6之箭头函数
- ES6之箭头函数
- ES6之箭头函数
- 初步探究ES6之生成器
- 初步探究ES6之解构
- ES6之箭头函数使用
- 深入浅出es6之箭头函数
- 初步探究ES6之Symbol类型
- 初步探究ES6之Proxy代理
- 初步探究ES6之class类
- 初步探究ES6之module模块化
- 初步探究ES6之序章
- 初步探究ES6之Proxy代理
- 【ES6】之 Arrow Function箭头函数
- ds 3.1 火车
- 个人常用语句
- Docker搭建环境
- HDU 水题(基础题)题目分类
- Mybatis-Dao层开发之Mapper接口
- 初步探究ES6之箭头函数
- 数据结构---栈--逆波兰算法
- nginx学习负载均衡一
- dns mysql mail
- 查找算法之顺序查找
- leetcode(44) - Wildcard Matching
- 数据结构实验之排序三:bucket sort
- matlab 子函数
- 【React Native】实现Navigator Back回退