Your Search Results

    アロー関数

    これは Harmony(ECMAScript 6) 提案の一部であり、実験段階の技術です。
    この技術の仕様は安定していません。ブラウザ互換性の一覧表を確認してください。またこれらの構文や動作は、仕様変更などにより、新しいバージョンのブラウザでは変更される可能性があるという点に注意してください。

    概要

    アロー関数式はfunction式に比べより短い構文を持ち、 this の値をレキシカルに束縛します。アロー関数は常に匿名関数です。

    Expression
    Implemented in: Firefox 22 (SpiderMonkey 22)
    ECMA Version: ECMAScript 6th Edition (Draft)

    構文

    ([param] [, param]) => {
       statements
    }
    
    param => expression

    詳しい構文の例はここちらで見ることができます。

    引数

    param
    引数の名前です。引数を必要としないことはかっこ () で表します。引数をひとつしかとらない場合、かっこは必要ではありません。 (例: foo => 1)
    statements or expression
    複数のステートメントを含むときは、波かっこ {} で囲う必要があります。しかし、ひとつの式の場合は必要ではありません。また、式は暗黙的にその関数が返す値となります。

    解説

    2つの要素がアロー関数の説明に影響しました。より短い関数とレキシカルな this です。

    より短い関数

    いくつかの関数のパターンで、より短い関数を自由に使用できます。比較できる例を示します。

    var a = [
      "We're up all night 'til the sun",
      "We're up all night to get some",
      "We're up all night for good fun",
      "We're up all night to get lucky"
    ];
    
    var a2 = a.map(function(s){ return s.length });
    
    var a3 = a.map( s => s.length );

    レキシカルな this

    アロー関数が登場する前は、それぞれの関数がそれ自身の this の値を定義していました。(コンストラクターでは新しいオブジェクト、 strict モードの関数呼び出し、関数が"オブジェクトのメソッド" として呼び出された場合のオブジェクトなどの場合、undefined) これは、オブジェクト指向プログラミングをするうえでじれったいものだとわかりました。

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

    ECMAScript 3/5 では、この問題は this の値を、より上の閉じた変数に代入することで修正されました。 

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

    それに引き換え、 a bound function could be created so that the proper this value would be passed to the growUp function.

    アロー関数は this の値を取り囲んでいる状況でキャプチャーするので、以下のコードは期待通りに動きます。

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

    strict モードについての関連事項

    与えられた this がレキシカルなとき、strict モード の規則は this については単に無視されます。

    var f = () => {'use strict'; return this};
    f() === window; // またはグローバル オブジェクト

    このほかは strict モードの規則が通常通り適用されます。

    // 空のアロー関数は undefined を返します。
    let empty = () => {};
    
    (() => "foobar")() // "foobar" を返します
    
    var simple = a => a > 15 ? 15 : a; 
    simple(16); // 15
    simple(10); // 10
    
    var complex = (a, b) => {
        if (a > b) {
            return a;
        } else {
            return b;
        }
    }

    仕様

    ブラウザーの対応状況

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    基本的なサポート 未サポート 22.0 (22.0) 未サポート 未サポート 未サポート
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    基本的なサポート 未サポート 22.0 (22.0) 未サポート 未サポート 未サポート

    Firefox Note

    The initial implementation of arrow functions in Firefox made them automatically strict. This has been changed as of Firefox 24. The use of "use strict"; is now required.

    This syntax is similar to Expression Closures added in Firefox 3 (details: Javascript 1.8)

    Document Tags and Contributors

    Contributors to this page: yuxxxx, teoli
    最終更新者: teoli,