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

相关文章

来自专栏听雨堂

Execute 方法(Find 对象)

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

1947
来自专栏影子

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

4609
来自专栏GreenLeaves

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

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

2436
来自专栏前端真相

前端编码规范

2596
来自专栏醒者呆

掌握一门语言Go

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

4349
来自专栏数说戏聊

04.字段抽取/拆分&记录抽取1.字段抽取2.字段拆分3.记录抽取

962
来自专栏前端桃园

JavaScript ES6  让我们写得少,做得多

JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读。它允许您编写更少的代码并执行更多操作。 ES6 向我们介绍了许多强大的功能...

1152
来自专栏前端黑板报

Sass vs Less

2007年发布,最早的一款CSS预处理器,带来了变量、常量、嵌套、混入、函数、循环等功能, 解决了CSS不可编程的短板。由于浏览器不能直接识别Sass,所以需要...

2349
来自专栏安恒信息

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

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

2205
来自专栏漫漫全栈路

JSON学习笔记

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

3454

扫码关注云+社区

领取腾讯云代金券