JavaScript:学习笔记(5)——箭头函数=>以及实践
JavaScript:学习笔记(5)——箭头函数=>以及实践
理论知识
介绍
箭头函数表达式的语法比函数表达式更短,并且没有自己的this,arguments,super或 new.target。这些函数表达式更适用于那些本来需要匿名函数的地方,并且它们不能用作构造函数。
箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种像下面这样,只包含一个表达式,连{ ... }
和return
都省略掉了。
x => x * x /*上面的箭头函数相当于*/ function (x) {
return x * x;
}
还有一种可以包含多条语句,这时候就不能省略{ ... }
和return
:
x => {
if (x > 0) {
return x * x;
}
else {
return - x * x;
}
}
如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错:
// SyntaxError:
x => { foo: x }
故返回对象时函数体的{ ... }
有语法冲突,所以要改为({....}):
// ok:
x => ({ foo: x })
其语法结构可总结如下:
(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)
//相当于:(参数1, 参数2, …, 参数N) =>{ return 表达式; } // 当只有一个参数时,圆括号是可选的:
(单一参数) => {函数声明}
单一参数 => {函数声明} // 没有参数的函数应该写成一对圆括号。
() => {函数声明}
//加括号的函数体返回对象字面表达式:
参数=> ({foo: bar})
//支持剩余参数和默认参数
(参数1, 参数2, ...rest) => {函数声明}
(参数1 = 默认值1,参数2, …, 参数N = 默认值N) => {函数声明}
//同样支持参数列表解构
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f(); // 6
关于this
和一般的函数不同,箭头函数不会绑定this
。 或则说箭头函数不会改变this
本来的绑定。
我们用一个例子来说明:
function Counter() {
this.num = 0;
}
var a = new Counter();
因为使用了关键字new
构造,Count()函数中的this
绑定到一个新的对象,并且赋值给a
。通过console.log
打印a.num
,会输出0。即
console.log(a.num);
// 0
如果我们想每过一秒将a.num
的值加1,该如何实现呢?可以使用setInterval()
函数。
function Counter() {
this.num = 0;
this.timer = setInterval(function add() {
this.num++;
console.log(this.num);
}, 1000);
}
我们来看一下输出结果:
var b = new Counter();
// NaN
// NaN
// NaN
// ...
你会发现,每隔一秒都会有一个NaN
打印出来,而不是累加的数字。到底哪里错了呢?首先函数setInterval
没有被某个声明的对象调用,也没有使用new
关键字,再之没有使用bind
, call
和apply
。setInterval
只是一个普通的函数。实际上setInterval
里面的this
绑定到全局对象的。我们可以通过将this
打印出来验证这一点:
回到之前的函数,之所以打印NaN
,是因为this.num
绑定到window
对象的num
,而window.num
未定义。
那么,我们如何解决这个问题呢?使用箭头函数!使用箭头函数就不会导致this
被绑定到全局对象。
function Counter() {
this.num = 0;
this.timer = setInterval(() => {
this.num++;
console.log(this.num);
}, 1000);
}
var b = new Counter();
// 1
// 2
// 3
// ...
通过Counter
构造函数绑定的this
将会被保留。在setInterval
函数中,this
依然指向我们新创建的b
对象。
其实这里也为了一个持续困扰我的问题,即是一种hack写法。
var that = this;
最后总结两点就是
- 箭头函数写代码拥有更加简洁的语法;
- 不会绑定
this
。
参考链接
- MDN箭头函数:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
- 廖雪峰箭头函数:https://www.liaoxuefeng.com/wiki/.......
- FunDebug的文章:https://blog.fundebug.com/2017/05/25/arrow-function-for-beginner/
JavaScript:学习笔记(5)——箭头函数=>以及实践的更多相关文章
- Javascript学习笔记-基本概念-函数
ECMAScript 中的函数使用function 关键字来声明,后跟一组参数以及函数体.函数的基本语法如下所示: function functionName(arg0, arg1,...,argN) ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
- JavaScript:学习笔记(4)——This关键字
JavaScript:学习笔记(4)——This关键字 以前这篇帖子是关于闭包的,但是我想弄明白的其实是This关键字.JavaScript的this和Java等面向对象语言中的this大不一样,bi ...
- Java程序猿的JavaScript学习笔记(5——prototype和Object内置方法)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记(3——this/call/apply)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(4——关闭/getter/setter)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
随机推荐
- Python内置函数之len()
len(s)用来判断对象的长度. 需要说明的是,整型,布尔等是没有长度这一说法的.字符串.字典.列表和元组都有长度. 例子: >>> len() Traceback (most re ...
- JS鼠标的拖拽原理
拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...
- spring reactor记录操作日志
1.注册日志的类: @Configuration@EnableReactorpublic class ReactorConfig { /** * * 〈注册审计日志 Reactor〉 */ @Bean ...
- Android中使用HttpClient发送Get请求
这里要指定编码,不然服务器接收到的会是乱码的.
- Play on Words UVA - 10129 欧拉路径
关于欧拉回路和欧拉路径 定义:欧拉回路:每条边恰好只走一次,并能回到出发点的路径欧拉路径:经过每一条边一次,但是不要求回到起始点 ①首先看欧拉回路存在性的判定: 一.无向图每个顶点的度数都是偶数,则存 ...
- UVA 1640 The Counting Problem UVA1640 求[a,b]或者[b,a]区间内0~9在里面各个数的数位上出现的总次数。
/** 题目:UVA 1640 The Counting Problem UVA1640 链接:https://vjudge.net/problem/UVA-1640 题意:求[a,b]或者[b,a] ...
- web开发中经常使用的js
将自己在web开发中经经常使用到的一些JS总结一下. 1.改动标签和表单的值 改动标签的值: var customer = document.getElementById("custm&qu ...
- [PHP开发必备] 走在大牛的路上 phpstudy最全的开发环境搭建
今天给大家分享我最喜欢的一个工具,也是咱php开发攻城狮亦或程序猿必备的开发神器 -- phpstudy最全的开发环境搭建 这也是我的好朋友,日复一日不断更新的成果,大家有钱的捧个钱场,没钱的捧个人场 ...
- libevent在windows下用visual studio编译时出现error C2894错误的原因与解决方法
libevent是一个使用很广泛的网络库,今天想了解下它.于是去git clone了一份源码,用vs2005的命令行:nmake -f makefile.nmake编译之,顺利编译通过,生成三个静态库 ...
- 如何通过PHP判断年份是否是闰年----两种方法
1.定义:闰年是对4取余为0,对100取余不等于0,对400取余等于0的年是闰年. 2.代码: 第一种方法:直接函数判断 $day = date('Y'); if ($day%4==0&&am ...