es6中箭头函数学习的一个记录

公司要开小程序的项目了,领导让提前熟悉下es6的语法,学习中遇到箭头函数相关的一段代码,起初对输出结果不是很理解,重新看了箭头函数的相关概念后才有一点儿明白。

如下代码:

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭头函数
  setInterval(() => this.s1++, 1000);
  // 普通函数
  setInterval(function () {
    this.s2++;
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);

上面代码中,Timer函数内部设置了两个定时器,分别使用了箭头函数和普通函数,然后用setTimeout函数延迟3100毫秒后执行。 最后输出结果是:

s1: 3
s2: 0

可以看到,3100毫秒之后,timer.s1被更新了3次,而timer.s2一次都没更新。为什么会这样?

因为:前者的this绑定定义时所在的作用域(即Timer函数),后者的this指向运行时所在的作用域(即全局对象)

箭头函数中的this.绑定的是Timer函数中的s1变量,所以每隔一秒钟s1的值会被更新,但是在普通函数中,this指代的是全局对象,放到浏览器,全局对象是window,在node就是global.s2。在上边儿这段代码中,并没有在全局定义s2变量,所以this.s2++其实没有什么作用,如果在这里将s2打印一下:

// 普通函数
    setInterval(function () {
        this.s2++;
        console.log(this.s2);
    }, 1000);

会发现,输出的是NaN. 如果增加一个全局变量,如下:

window.s2 = 0;

在浏览器中再次执行,就会发现this.s2可以打印出值了。

屏幕快照 2017-07-06 下午6.00.57.png

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏全沾开发(huā)

如何在ES5与ES6环境下处理函数默认参数

1284
来自专栏大前端_Web

关于Function.prototype.apply.call的一些补充

我们可以看到,ie9的document.getElementById是有Function.prototype上的方法的,所以说,IE9+的宿主对象它们继承了Ob...

803
来自专栏Pythonista

前端学习之JavaScript

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的 JavaScri...

1033
来自专栏技术/开源

30分钟?不需要,轻松读懂IL

先说说学IL有什么用,有人可能觉得这玩意平常写代码又用不上,学了有个卵用。到底有没有卵用呢,暂且也不说什么学了可以看看一些语法糖的实现,或对.net理解更深一点...

1867
来自专栏锦小年的博客

python学习笔记6.7-简化数据结构的初始化过程

我们每编写一个类的时候都需要编写一个初始化函数,那么如果编写的类当做数据结构来用,它们的初始化结构就是一样的,例如: class Stock: def ...

1806
来自专栏mySoul

DOM概述 选取文档元素

有些html标签会有name元素,区别于id,name属性的值不必是唯一的,多个元素可能存在相同的名字。

846
来自专栏对角另一面

读Zepto源码之IOS3模块

IOS3 模块是针对 IOS 的兼容模块,实现了两个常用方法的兼容,这两个方法分别是 trim 和 reduce 。 读 Zepto 源码系列文章已经放到了gi...

1910
来自专栏calmound

D3DXCreateTexture

HRESULT D3DXCreateTexture( __in LPDIRECT3DDEVICE9 pDevice, __in UINT...

3298
来自专栏崔庆才的专栏

Scrapy框架的使用之Selector的用法

2354
来自专栏练小习的专栏

JSHint的选项配置笔记

asi 如果是真,JSHint会无视没有加分号的行尾, 自动补全分号一直是Javascript很有争议的一个语法特性。默认,JSHint会要求你在每个语句后面...

1779

扫码关注云+社区