公司要開小程序的項目了，領導讓提前熟悉下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