箭頭函式有幾個使用注意點：

• 函式體內的this物件，就是定義時所在的物件，而不是使用時所在的物件。
• 不可以當作建構函式，也就是說，不可以使用new命令，否則會丟擲一個錯誤。
• 不可以使用arguments物件，該物件在函式體內不存在。如果要用，可以用rest引數代替。
• 不可以使用yield命令，因此箭頭函式不能用作Generator函式。

普通函式的上下文是呼叫使用才能確定的，並且規則很多，但是箭頭函式的上下文是定義時候確定的。規則其實很簡單，只要理解了，就能應對

字面意思理解箭頭函式上下文：箭頭函式的上下文依靠的是父作用域函式的上下文，獲取箭頭函式的上下文this就是，就需要獲取定義時候所處的普通函式的作用域，該普通函式的上下文就是箭頭函式的上下文，如果所處環境沒有普通函式上下文就是window

案例1

window.color = "red"
    let color = "blue";
    let obj = {
      color: "green",
      getColor:()=>{
        return this.color
      }
    }    

    let sayColor = ()=>{
      return this.color;
    }    

    console.log(obj.getColor()) // red
    console.log(sayColor())//red

obj物件中的getColor函式定義時候所處的位置是obj物件中，obj.color是green，但是obj不是函式，所以getColor內部的this不會主動去找obj.color，繼續向上找上下文，沒找到就輸出window的color為red；sayColor方法父作用域也是window所以輸出red

案例二

 var a = 200;
    var obj = {
      a: 100,
      fn: function(){
        return ()=> {
          return this.a
        }
      }
    }
    var obj2 = {
      a: 300,
      fn: obj.fn
    }
    var fn = obj2.fn()
    console.log(fn()) // 300

obj物件內部的箭頭函式定義在obj物件中的fn普通函式中，因為普通函式的上下文this必須在呼叫的時候才能確定，所以最後obj2在呼叫fn函式，obj2的上下文是300，所以箭頭函式的父親的上下文就是300，所以箭頭函式的上下文就是300

案例三

function foo() {
      setTimeout(()=>{
        console.log(this.a)
      },100)
    }  
    var a = 10;
    foo.call({a: 20}) //20

箭頭函式內部輸出的a定義在foo普通函式中，又因為foo普通函式呼叫的時候call了上下文將一個物件{a:20}指給了foo函式，所以foo函式的上下文就是這個物件，foo.a 就是20，所以箭頭函式的this.a也是20