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