JS中的this和純面向對象（java，c++）中的this有點不大一樣，其原因就是作用域不同，導致JS中的this的指向不明確，在java中的this指當前對象的this或當前類的this，在JS中function(){}裏面沒有特殊指定this的指向，這裏的this時指向Window，但是在嚴格模式下，function(){return this}裏面的this是undefined，箭頭函數裏面的this反而是Window，我們來看個例子(為了簡單點，代碼下面的>就是控制臺的輸入,<就是控制臺的輸出)：

//在控制臺先輸入這個函數，
function Person(){
    
 
this.age = 0;
    setInterval(function growUp() {
//此時的this時指向window，並不指向上面的this.age
        this.age++;
    },1000)
}

>var p = new Person()
>p
//因為this時指向window，並不指向上面的this.age，所以沒有變

<Person {age: 0}
//age是全局變量，沒有給初始值，++後就變成Not a Number
>age
NaN
//給age賦初值，下面就開始++le
age = 0
0
age
5
age
8
age
10
age
14
age
 
16

以前流行的一種解決方法

//在控制臺先輸入這個函數，
function Person(){
    //定義一個局部變量把當前的this放在裏面，下面函數就可以使用了
    let that = this;
    this.age = 0;
    setInterval(function growUp() {
//此時的this時指向window，並不指向上面的this.age
        that.age++;
    },1000)
}
//一切正常
>let p = new Person();
>p
<Person {age: 0}
>p
<Person {age: 
 
1}
>p
<Person {age: 2}
>p
<Person {age: 3}

只有這一種解決方法？這時候箭頭函數該登場了，箭頭函數不會創建自己的this；它使用封閉執行上下文的this值。因此，在下面的代碼中，傳遞給setInterval的函數內的this與封閉函數中的this值相同，簡單來說，箭頭函數沒有自帶this，他的this是來自上一級，所以剛剛好解決這個問題：

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正確地指向person 對象
  }, 1000);
}
undefined
>let p = new Person();
<undefined
>p
<Person {age: 1}
>p
<Person {age: 2}
>p
<Person {age: 3}

我們再看寫栗子：

function f(){console.log(this.a)}
>f()
<undefined
//此時call傳入參數，這個參數可以理解為this,但對this不造成影響
>f.call({a:1})
<1
>f.apply({a:1})
<1

還有個要記的，當箭頭函數要返回一個對象時,{}要用小括號括起來，比如：f = () => ({}) ，大括號表示一個對象

更多箭頭函數例子：API

React:JS中的this和箭頭函數