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(th
4000
is.s2);
}, 1000);

会发现，输出的是NaN.

如果增加一个全局变量，如下：

window.s2 = 0;

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