~文法メモ~ アロー関数

  • C#などでもいち早く導入されたアロー関数

    要するに「非常に短い関数」で、「その関数自体を引数とする」ようなシーンと中心に、
    「もっと短い書き方が出来てた方が見やすい」ということで導入された機能です。

    var a = [
      "山田太郎",
      "うさぎ",
      "東京特許許可局"
    ];
    
    let a2 = a.map(function(s){ return s.length });
    hm.debuginfo(a2); // [4,3,7]
    
    let a3 = a.map( (s) => s.length );
    hm.debuginfo(a3); // [4,3,7]
    
  • 関数自身のthis問題の解決

    通常の関数ですと、それぞれの関数は「自身のthis」を自動的に定義してしまいます。

    function Person() {
      // Person() のコンストラクタは、自身のインスタンスを `this` として定義します。
      this.age = 0;
    
      setInterval(function growUp() {
        // 非 strict モードでは、growUp() 関数は `this` をグローバルオブジェクトとして定義します。
        // これは、 Person() コンストラクタで定義された `this` とは異なります。
        this.age++;
      }, 1000);
    var p = new Person();
    

    この問題は this の値をスコープ内の変数(大抵はself)に別途割り当てることにより、各人でマニュアルで対策していました

  • シンボル名で値を共有したい場合は、Symbol.for(...)で作成

    function Person() {
      var self = this; // `self` の代わりに `that` を選ぶこともあります。
                       // どちらかに統一するようにしましょう。
      self.age = 0;
    
      setInterval(function growUp() {
        // このコールバックは、期待されるオブジェクトの値を
        // `self` 変数で参照します。
        self.age++;
      }, 1000);
    }

    アロー関数は、外側のスコープのthisをそのまま補足するため、以下のコードは期待通りに動作します。

    function Person(){
      this.age = 0;
    
      setInterval(() => {
        this.age++; // |this| は person オブジェクトを適切に参照します。
      }, 1000);
    }
    
    var p = new Person();