JavaScript:学习笔记(5)——箭头函数=>以及实践

理论知识

介绍

  箭头函数表达式的语法比函数表达式更短,并且没有自己的thisargumentssuper或 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关键字,再之没有使用bindcallapplysetInterval只是一个普通的函数。实际上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;

最后总结两点就是

  1. 箭头函数写代码拥有更加简洁的语法
  2. 不会绑定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)——箭头函数=>以及实践的更多相关文章

  1. Javascript学习笔记-基本概念-函数

    ECMAScript 中的函数使用function 关键字来声明,后跟一组参数以及函数体.函数的基本语法如下所示: function functionName(arg0, arg1,...,argN) ...

  2. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  3. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

  4. JavaScript:学习笔记(4)——This关键字

    JavaScript:学习笔记(4)——This关键字 以前这篇帖子是关于闭包的,但是我想弄明白的其实是This关键字.JavaScript的this和Java等面向对象语言中的this大不一样,bi ...

  5. Java程序猿的JavaScript学习笔记(5——prototype和Object内置方法)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  6. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  7. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  8. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  9. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

随机推荐

  1. Python内置函数之len()

    len(s)用来判断对象的长度. 需要说明的是,整型,布尔等是没有长度这一说法的.字符串.字典.列表和元组都有长度. 例子: >>> len() Traceback (most re ...

  2. JS鼠标的拖拽原理

    拖拽功能主要是用在让用户做一些自定义的动作,比如拖动排序,弹出框拖动移动等等,效果还是蛮不错的.下面讲解一下拖拽的原理,希望可以帮助到有需要的朋友! 一.拖拽的流程动作①鼠标按下②鼠标移动③鼠标松开 ...

  3. spring reactor记录操作日志

    1.注册日志的类: @Configuration@EnableReactorpublic class ReactorConfig { /** * * 〈注册审计日志 Reactor〉 */ @Bean ...

  4. Android中使用HttpClient发送Get请求

    这里要指定编码,不然服务器接收到的会是乱码的.

  5. Play on Words UVA - 10129 欧拉路径

    关于欧拉回路和欧拉路径 定义:欧拉回路:每条边恰好只走一次,并能回到出发点的路径欧拉路径:经过每一条边一次,但是不要求回到起始点 ①首先看欧拉回路存在性的判定: 一.无向图每个顶点的度数都是偶数,则存 ...

  6. 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] ...

  7. web开发中经常使用的js

    将自己在web开发中经经常使用到的一些JS总结一下. 1.改动标签和表单的值 改动标签的值: var customer = document.getElementById("custm&qu ...

  8. [PHP开发必备] 走在大牛的路上 phpstudy最全的开发环境搭建

    今天给大家分享我最喜欢的一个工具,也是咱php开发攻城狮亦或程序猿必备的开发神器 -- phpstudy最全的开发环境搭建 这也是我的好朋友,日复一日不断更新的成果,大家有钱的捧个钱场,没钱的捧个人场 ...

  9. libevent在windows下用visual studio编译时出现error C2894错误的原因与解决方法

    libevent是一个使用很广泛的网络库,今天想了解下它.于是去git clone了一份源码,用vs2005的命令行:nmake -f makefile.nmake编译之,顺利编译通过,生成三个静态库 ...

  10. 如何通过PHP判断年份是否是闰年----两种方法

    1.定义:闰年是对4取余为0,对100取余不等于0,对400取余等于0的年是闰年. 2.代码: 第一种方法:直接函数判断 $day = date('Y'); if ($day%4==0&&am ...