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 条评论
登录 后参与评论

相关文章

来自专栏醒者呆

掌握一门语言Go

摘要:Go语言的优势不必多说,通过本篇文章,让我们花时间来掌握一门外语,Let's Go! 关键字:Go语言,闭包,基本语法,函数与方法,指针,slic...

4049
来自专栏GreenLeaves

Vue.js系列之四计算属性和观察者

一、计算属性 1、模版内的表达式非常便利,但是设计它们的初衷是用于简单计算的。在模版中放入太多的逻辑运算会让模版过重且难以维护,例如如下代码: <div id=...

2266
来自专栏从流域到海域

《笨办法学Python》 第7课手记

《笨办法学Python》 第7课手记 本节课是为了巩固之前的内容,作者要求不能跳过所以就老老实实照做了。 代码如下: print "Mary had a lit...

1868
来自专栏影子

jQuery中的常用内容总结(三)

转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html

921
来自专栏听雨堂

Execute 方法(Find 对象)

Execute 方法(Find 对象) 运行指定的查找操作。如果查找成功,则返回 True。 语法 expression.Execute(FindText, M...

1897
来自专栏漫漫全栈路

JSON学习笔记

JSON学习笔记 Web学习笔记之——Json ---- 什么是JSON JSON: JavaScript Object Notation(JavaScri...

3124
来自专栏影子

jQuery中的常用内容总结(三)

4399
来自专栏游戏杂谈

全局变量的三种声明方法

显示true FWK未定义,说明隐式声明的全局变量可以被delete,与global对象的parseInt、escape、parseFloat等等类似,可直接被...

811
来自专栏V站

PHP中一些等号_尖括号相关符号的意思

学习PHP过程中,会常碰到一些特殊的符号,比如:=、==、===、->、=>、<<<这些个符号,下面分别介绍是什么意思,在什么地方用到。 1、“=”(等号) 等...

3388
来自专栏安恒信息

利用WPAD/PAC与JScript实现Windows 10远程代码执行

简介 Project Zero团队在google发表了一篇关于利用WPAD/PAC和JScript在本地网络中实现Windows10远程代码执行的博客,笔者根据...

2125

扫码关注云+社区