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

相关文章

来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4045
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3195
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25410
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

32010
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070
来自专栏芋道源码1024

熔断器 Hystrix 源码解析 —— 断路器 HystrixCircuitBreaker

本文主要基于 Hystrix 1.5.X 版本 1. 概述 2. HystrixCircuitBreaker 3. HystrixCircuitBreaker....

5357
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2576
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2597
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4878
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717

扫码关注云+社区