ES6箭頭函數-2

如下來文字來自阮大神所著書籍摘記。爲了加深記憶。本人就手動敲了一遍(相關代碼本人也執行過,可保證運行經過.)

箭頭函數注意事項：

1) 函數體內的this對象就是定義時所在的對象,而不是使用時所在的對象。

2) 不能夠當作構造函數。也就是說,不可使用new命令,不然會拋出錯誤。

3）不可使用arguments對象，該對象在函數體內不存在。若是要用，能夠用rest參數代替。

關於什麼是arguments對象。能夠參考MDN連接https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

4) 不可使用yield命令,所以箭頭函數不能用做Generator函數。

其中，第一點尤爲值得注意，this對象的指向是可變的，但在箭頭函數中它是固定的。

下面有幾個例子體會一下箭頭函數的使用:

• function foo(){
    setTimeout(()=>
    {
      console.log('id:',this.id);
    },100);
  }
  
  var id=21;
  foo.call({id:42})
  
  //輸出42

  setTimeout的參數是一個箭頭函數，這個箭頭函數的定義是在foo函數生成時生效的,真正執行要到100ms秒之後。若是是普通函數，執行時this應該指向全局對象window,這時應該輸出21.可是箭頭函數致使this老是指向函數定義生效時所在的對象（本例是{id:42}),因此輸出的是42.

• 箭頭函數可讓this指向固定化，這種特性很是有利於封裝回調函數。例如如下的例子。DOM事件的回調函數封裝在一個對象裏面。

  var handler={
    id:'123456',
    init:function()
    {
      document.addEventListener('click',
        event=>this.doSomething(event.type,false);
    },
    doSomething:function(type)
    {
      console.log('Handling '+type+' for'+this.id);
    }
    }

   以上代碼的init方法中使用了箭頭函數，這致使箭頭函數裏邊的this老是指向handler對象。

• function foo()
  {
    return ()=>
    {
      return ()=>
      {
        return ()=>
        {
          console.log('id:',this.id);
        }
      }
    }
  }
  var f=foo.call({id:1});
  var t1=f.call({id:2})()();
  var t2=f().call({id:3})();
  var t3=f()().call({id:4})

  上面的代碼只有一個this,就是函數foo的this，因此t1,t2,t3都輸出一樣的結果。由於全部的內層函數都是箭頭函數。都沒有本身的this，它們的this其實都是最外層foo函數的this.

• 除了this，如下3個變量在箭頭函數中也是不存在的，分別指向外城函數對應的變量:arguments、super和new.target.

  function foo()
  {
     setTimeout(()=>
     {
          console.log('args:',arguments)
     },100)
  }
  foo(2,4,6,8)

   上面的代碼中，箭頭函數內部的變量arguments實際上是函數foo的arguments變量。

• 另外因爲箭頭函數沒有本身的this，固然也就不能用call()、apply()、bind()這些方法去改變this的指向。

  (function()
  {
    return [
      console.log((()=>this.x).bind({x:'inner'})())
    ]
  }).call({x:'outer'});
  //輸出['outer']

   上面的代碼中,箭頭函數沒有本身的this,因此bind方法無效,內部的this指向外部的this.