JavaScript初学者必看“箭头函数”
来源:互联网 发布:windows上安装hadoop 编辑:程序博客网 时间:2024/06/05 20:38
译者按: 箭头函数看上去只是语法的变动,其实也影响了this
的作用域。
原文: JavaScript: Arrow Functions for Beginners
译者: Fundebug
为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。
本文我们介绍箭头(arrow)函数的优点。
更简洁的语法
我们先来按常规语法定义函数:
function funcName(params) { return params + 2; }funcName(2);// 4
该函数使用箭头函数可以使用仅仅一行代码搞定!var funcName = (params) => params + 2funcName(2);// 4
是不是很酷!虽然是一个极端简洁的例子,但是很好的表述了箭头函数在写代码时的优势。我们来深入了解箭头函数的语法:(parameters) => { statements }
如果没有参数,那么可以进一步简化:() => { statements }
如果只有一个参数,可以省略括号:parameters => { statements }
如果返回值仅仅只有一个表达式(expression), 还可以省略大括号:parameters => expression// 等价于:function (parameters){ return expression;}
现在你已经学会了箭头函数的语法,我们来实战一下。打开Chrome浏览器开发者控制台,输入:var double = num => num * 2
我们将变量`double`绑定到一个箭头函数,该函数有一个参数`num`, 返回 `num * 2`。 调用该函数:double(2);// 4double(3);// 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`函数的连续执行:clearInterval(b.timer);
我们来尝试理解为什么出错:根据上一篇博客讲解的规则,首先函数`setInterval`没有被某个声明的对象调用,也没有使用`new`关键字,再之没有使用`bind`, `call`和`apply`。`setInterval`只是一个普通的函数。实际上`setInterval`里面的`this`绑定到全局对象的。我们可以通过将`this`打印出来验证这一点:function Counter() { this.num = 0;this.timer = setInterval(function add() { console.log(this); }, 1000);}var b = new Counter();
你会发现,整个`window`对象被打印出来。 使用如下命令停止打印:clearInterval(b.timer);
回到之前的函数,之所以打印`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`对象。为了验证刚刚的说法,我们可以将 `Counter`函数中的`this`绑定到`that`, 然后在`setInterval`中判断`this`和`that`是否相同。function Counter() { var that = this; this.timer = setInterval(() => { console.log(this === that); }, 1000);}var b = new Counter();// true// true// ...
正如我们期望的,打印值每次都是`true`。最后,结束刷屏的打印:clearInterval(b.timer);
总结
- 箭头函数写代码拥有更加简洁的语法;
- 不会绑定
this
。
欢迎加入我们Fundebug的全栈BUG监控交流群: 622902485。
版权声明:
转载时请注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/05/25/arrow-function-for-beginner/
阅读全文
0 0
- JavaScript初学者必看“箭头函数”
- JavaScript初学者必看“this”
- JavaScript初学者必看“new”
- JavaScript初学者必看“this”
- VC初学者必看
- C++初学者必看
- vb初学者必看
- java初学者必看
- COM初学者必看
- 嵌入式 初学者必看
- ASP初学者必看
- powerdesigner初学者必看
- java 初学者必看
- Velocity初学者必看
- jQuery初学者必看
- Java初学者必看
- Java初学者必看
- PHP引用,函数引用,对象引用(初学者必看)
- android的边框设置
- test
- Java 异步机制与同步机制的区别
- IOS Swift3.0 URLSession和Json解析
- Caffe 学习:Eltwise层
- JavaScript初学者必看“箭头函数”
- 实现浏览器兼容版的window.getComputedStyle
- 数据库面试题
- Android studio 多渠道(多环境)打包grade配置详解
- Android 自定义Toast
- 一道有意思的题目Intersection of Two Linked Lists(双指针)
- SQL Server系统表sysobjects
- iOS 从0到1搭建高可用App框架
- mybatis注解方式返回insert的id